JavaScript Functions and Scope Explained : Day-7

This post will cover how to define and use JavaScript functions in JavaScript, and explain the concept of scope.

JavaScript Functions are reusable blocks of code that perform a specific task. Understanding functions and scope is crucial for writing modular and maintainable code. This post will cover how to define and use functions in JavaScript, and explain the concept of scope.

1. Defining Functions

Functions can be defined using function declarations or function expressions:

• Function Declaration:

//javascript
function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet('Alice')); // Output: Hello, Alice!

• Function Expression:

//javascript
const greet = function(name) {
  return `Hello, ${name}!`;
};
console.log(greet('Bob')); // Output: Hello, Bob!

2. Function Expressions vs. Declarations

The main difference is hoisting. Function declarations are hoisted, meaning they can be called before they are defined. Function expressions are not hoisted:

//javascript
console.log(greet('Charlie')); // Output: Hello, Charlie!
function greet(name) {
  return `Hello, ${name}!`;
}

But calling a function expression before defining it will cause an error:

//javascript
console.log(greet('Dave')); // Error: greet is not defined
const greet = function(name) {
  return `Hello, ${name}!`;
};

3. Parameters and Arguments

Functions can accept parameters (placeholders) and arguments (actual values passed):

• Parameters:

//javascript
function add(a, b) {
  return a + b;
}
console.log(add(2, 3)); // Output: 5

• Default Parameters:

//javascript
function multiply(a, b = 1) {
  return a * b;
}
console.log(multiply(5)); // Output: 5 (b defaults to 1)

4. Understanding Scope (Global vs. Local)

Scope determines the visibility of variables. JavaScript has two types of scope: global and local:

• Global Scope: Variables declared outside any function are in the global scope and can be accessed from anywhere in the code.

//javascript
let globalVar = 'I am global';
function displayGlobal() {
  console.log(globalVar);
}
displayGlobal(); // Output: I am global

• Local Scope: Variables declared within a function are in the local scope and can only be accessed within that function.

//javascript
function localExample() {
  let localVar = 'I am local';
  console.log(localVar);
}
localExample(); // Output: I am local
console.log(localVar); // Error: localVar is not defined

5. Practical Examples

• Function to Calculate Factorial:

//javascript
function factorial(n) {
  if (n === 0) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}
console.log(factorial(5)); // Output: 120

• Function to Find Maximum in an Array:

//javascript
function findMax(arr) {
  let max = arr[0];
  for (let i = 1; i < arr.length; i++) {
    if (arr[i] > max) {
      max = arr[i];
    }
  }
  return max;
}
let numbers = [1, 2, 3, 4, 5];
console.log(findMax(numbers)); // Output: 5

Conclusion

Functions are a key feature of JavaScript, allowing you to encapsulate code into reusable blocks. Understanding scope helps you manage variable accessibility and avoid potential bugs. By mastering functions and scope, you can write more organized and efficient code.

If you haven't read our last day blog on the basic introduction to JavaScript, click here to read our Blogs. want to connect me on linkdin.