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.