DEV Community

Cover image for ๐Ÿง  10-Day Challenge: Day 5 Functions & Scope in JS
Smriti Singh
Smriti Singh

Posted on

๐Ÿง  10-Day Challenge: Day 5 Functions & Scope in JS

๐Ÿ“… Day 5: Functions & Scope

Welcome to Day 5 of the challenge!4

Today, weโ€™re unlocking the core building blocks of JavaScript: Functions and Scope. Functions help you organize, reuse, and simplify your code โ€” and understanding scope gives you control over your variables.

๐Ÿ”ง What Is a Function?
A function is a reusable block of code that performs a specific task.
You define it once and use it wherever you need it.

Think of a function like a vending machine:

Insert input โ†’ Process โ†’ Get output

โœ… Function Declaration

function greet(name) {
  return "Hello, " + name + "!";
}
console.log(greet("Smriti")); // Hello, Smriti!
Enter fullscreen mode Exit fullscreen mode

โœ… Function Expression

const greet = function(name) {
  return "Hi, " + name + "!";
};
Enter fullscreen mode Exit fullscreen mode

Function expressions are not hoisted, so you can't call them before theyโ€™re defined.

โšก Arrow Function (ES6+)
Arrow functions provide a shorter syntax and behave differently with this.

const greet = (name) => {
  return "Hey, " + name + "!";
};
Enter fullscreen mode Exit fullscreen mode

If the function has only one expression, you can make it even shorter:

const greet = name => "Hey, " + name + "!";
Enter fullscreen mode Exit fullscreen mode

๐Ÿ”„ Parameters vs Arguments
Parameters: Variables listed in the function definition
function greet(name) โ†’ name is a parameter

Arguments: Actual values passed when calling the function
greet("Smriti") โ†’ "Smriti" is an argument

๐Ÿ” The return Keyword
The return keyword is used to output a value from a function.

function add(a, b) {
  return a + b;
}
console.log(add(3, 4)); // 7
Enter fullscreen mode Exit fullscreen mode

If no return, the function returns undefined.

๐Ÿ“ฆ Scope in JavaScript

Scope determines where your variables can be accessed.

โœ… Function Scope
Variables declared with var are function-scoped:

function showMessage() {
  var message = "Hello";
  console.log(message);
}
// message is not accessible outside
Enter fullscreen mode Exit fullscreen mode

โœ… Block Scope
let and const are block-scoped:

if (true) {
  let msg = "Inside block";
  const x = 42;
}
// msg and x are not accessible here
Enter fullscreen mode Exit fullscreen mode

๐Ÿ”„ Normal Function vs Arrow Function: What's the Difference?

โœ… Mini Task: Factorial Function

Write a function that calculates the factorial of a number.

๐Ÿ’ก Factorial of 5 = 5 ร— 4 ร— 3 ร— 2 ร— 1 = 120

๐Ÿ’ป Solution:

function factorial(n) {
  let result = 1;
  for (let i = 1; i <= n; i++) {
    result *= i;
  }
  return result;
}

console.log(factorial(5)); // 120
Enter fullscreen mode Exit fullscreen mode

Try writing the same using a recursive function!

โ“ Interview Questions (Day 5 Topics)

  1. Whatโ€™s the difference between a function declaration and a function expression?
  2. Explain the difference between parameters and arguments.
  3. What does the return keyword do in a function?
  4. What is the difference between function scope and block scope?
  5. What are the key differences between arrow functions and regular functions?

๐ŸŽ‰ Thatโ€™s a Wrap for Day 5!
Now you understand how to create and use functions, pass and return values, and manage variable visibility through scope.
Functions = power + reusability.

๐Ÿ‘‰ Coming up in Day 6: Arrays & Array Methodsโ€”where weโ€™ll learn how to store and work with lists of data.

Keep coding, and share your factorial function below, which you wrote with a different logic! ๐Ÿ’ช๐Ÿ’ป

Top comments (2)

Collapse
 
dotallio profile image
Dotallio

Love how you break down functions and scope, super clear examples! I always found writing a recursive factorial feels more elegant - anyone else prefer that over the loop?

Collapse
 
smriti_webdev profile image
Smriti Singh • Edited

Thanks for appreciating, and glad to know that it helps you well! loops are usually more efficient in terms of performance; recursion brings clarity when used right.