Working with Functions in JavaScript

What Are Functions?

Types of Functions in JavaScript

JavaScript provides several ways to define and use functions. Each type has its own characteristics, syntax, and use cases. Below are the most common types of functions in JavaScript:

1. Function Declarations

Function declarations are the most common way to define functions in JavaScript.

Syntax:

function functionName(parameter1, parameter2, ...) {
  // Code to be executed
  return returnValue; // Optional
}

javascript

Characteristics:
- Hoisted: Function declarations are hoisted, meaning they can be called before they are defined in the code.
- Named: They always have a name.

Example:

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

javascript

2. Function Expressions

Function expressions are functions that are defined within an expression.

Syntax:

const functionName = function(parameter1, parameter2, ...) {
  // Code to be executed
  return returnValue; // Optionals
};

javascript

Characteristics:
- Not hoisted: Function expressions are not hoisted.
- They can be named or anonymous (without a name).
- Assigned to a variable.

Example:

const multiply = function(x, y) {
  return x * y;
};

console.log(multiply(4, 6)); // Output: 24

javascript

3. Arrow Functions (ES6)

Arrow functions ↗ provide a more concise syntax for writing function expressions. They are especially useful for short functions and callbacks.

Syntax:

const functionName = (parameter1, parameter2, ...) => {
  // Code to be executed
  return returnValue; // Optional
};

// If there's only one parameter, parentheses are optional:
const square = x => {
  return x * x;
};

// If the function body is a single expression, the curly braces and 'return' are optional:
const cube = x => x * x * x;

javascript

Characteristics:
- Shorter syntax.
- Lexical this binding: They inherit the this value from the surrounding scope.
- Anonymous (usually).

Example #1:

const divide = (a, b) => a / b;

console.log(divide(10, 2)); // Output: 5

javascript

Example #2:

function setupCounter(element) {
  let counter = 0
  const setCounter = (count) => {
    counter = count
    element.innerHTML = `count is ${counter}`
  }
  element.addEventListener('click', () => setCounter(counter + 1))
  setCounter(0)
}

javascript

Arrow Function with Implicit Return

Arrow functions can have an implicit return when the function body is a single expression. This means you can omit the curly braces and the return keyword.

Example:

const add = (a, b) => a + b;

console.log(add(2, 3)); // Output: 5

javascript

Arrow Functions: Syntax Variations

//--1) An arrow function with no parameters that returns the result of the expression.
() => expression

//--2) An arrow function with a single parameter that returns the result of the expression.
param => expression

//--3) Similar to the previous example, but with parentheses around the single parameter (optional for single parameters).
(param) => expression

//--4) An arrow function with multiple parameters that returns the result of the expression.
(param1, paramN) => expression

//-- 5) An arrow function with no parameters that executes multiple statements inside a block.
() => {
  statements
}

//-- 6) An arrow function with a single parameter that executes multiple statements inside a block.
param => {
  statements
}

//-- 7) An arrow function with multiple parameters that executes multiple statements inside a block.
(param1, paramN) => {
  statements
}

javascript

4. Immediately Invoked Function Expressions (IIFEs)

IIFEs are functions that are executed immediately after they are defined. They are often used to create a new scope and avoid polluting the global namespace.

Syntax:

(function() {
  // Code to be executed
})();

// Arrow function IIFE
(() => {
  // Code to be executed
})();

javascript

Characteristics:
- Executes immediately after it’s defined.
- Creates a new scope, preventing variable pollution.

Example:

(function() {
  const message = "Hello from IIFE!";
  console.log(message); // Output: Hello from IIFE!
})();

javascript

5. Higher-Order Functions

Higher-order functions are functions that operate on other functions, either by taking them as arguments or by returning them as results. They are a key concept in functional programming.

Examples: map(), filter(), reduce(), forEach(), sort().

Example:

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8, 10]

const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // output: [2,4]

javascript

6. Recursive Functions

Recursive functions are functions that call themselves in order to solve a problem. They are often

Example:

function factorial(n) {
  if (n === 0) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}

console.log(factorial(5)); // Output: 120

javascript

Rest and Spread Parameters

Rest and spread parameters allow functions to accept an indefinite number of arguments or expand iterable objects into individual elements.

Rest Parameters:

Allows a function to accept an indefinite number of arguments as an array.
Syntax: ...args.

Example:

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // Output: 10

javascript

Spread Operator:
- Expands an iterable (like an array or string) into individual elements.
- Syntax: ...iterable.
- Example:
```
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // Output: [1, 2, 3, 4, 5]
```
  javascript

Default Parameters

Default parameters allow you to set default values for function parameters. This is useful for providing fallback values when no arguments are passed.

Syntax:

function greet(name = "Guest") {
  console.log(`Hello, ${name}!`);
}

greet(); // Output: Hello, Guest!
greet("Alice"); // Output: Hello, Alice!

javascript