Functions

Functions are reusable blocks of code that can be called to perform a specific task. They can accept input (arguments) and return output, making them powerful tools for organising and modularising code.

Functions can be defined in several ways and can be invoked using different calling styles.

Function Syntax

Just like we used const, let, and var to declare variables, we use the keyword function to declare functions.

function myFunc() {
    // tasks go here
}

The function keyword tells whatever is running your program that what follows is a function and treats it as such. After that comes the name - we like to give functions names that describe what they do, like sayHi. Then comes an open and a close parenthesis, (). And finally, open and close brackets, {}. In between these brackets is where all of our function code will go.

function sayHi() {
    console.log('Hi!');
}
        
sayHi();

In this example, we declare a function sayHi and set it up to console.log 'hello'.

In order to run this function, we need to write or invoke its name with the parentheses after it, sayHi(). This is the syntax to run (aka call) a function. A function always needs parentheses to run.

Function Declaration Hoisting

Function declaration hoisting in JavaScript is the behavior where function declarations are moved to the top of their scope during the compilation phase, allowing them to be called before they are defined in the code. This means that a function declared with a function declaration can be called before it appears in the code, unlike function expressions.

For example:

foo();

function foo() {
  console.log("Hello World!");
}      

In this code, foo() is called before it appears in the code. This is possible because of function declaration hoisting.

Function Expressions

In JavaScript, a function expression is a way to define a function as an expression, which can then be assigned to a variable. It differs from function declaration in that function declaration is a statement and hoisted to the top of its scope, while function expression is evaluated at runtime. Here is an example:

// Function expression
const multiply = function (a, b) {
  return a * b;
};
      
// Function call
multiply(2, 3); // Returns 6          

In the example above, muliply is a variable that holds a function expression. The function can be called by invoking the variable with arguments. Function expressions are useful for creating functions that are only used in a specific context, or for passing functions as arguments to other functions.

Arrow Function Expressions

Arrow function expressions are a concise way to define functions in JavaScript. They were introduced in ES6 as an alternative to traditional function expressions, with a shorter syntax and some important differences in behavior.

Here's an example of a traditional function expression:

const sum = function(a, b) {
  return a + b;
};              

And here's the equivalent arrow function expression:

const sum = (a, b) => {
  return a + b;
};                   

As you can see, the arrow function expression is shorter and simpler. There are a few key differences to note:

• Arrow function expressions don't have their own this value. Instead, they inherit this from the enclosing context.
• Arrow function expressions don't have a arguments object. Instead, you can use rest parameters (...args) to collect all arguments into an array.
• If the function body is a single expression, you can omit the curly braces and return keyword. The expression's value will be returned implicitly.

Here's an example of an arrow function expression that takes advantage of these differences:

const double = value => value * 2;                  

This function takes a single argument and returns its value multiplied by 2. The curly braces and return keyword are omitted because there's only one expression in the function body.

Arrow function expressions are especially useful when working with higher-order functions like map, filter, and reduce. They allow you to write more concise and readable code by eliminating the need for extra function declarations.

Passing Data into Functions

In JavaScript, you can pass data into functions through function parameters. Function parameters act as variables that are used to receive and process input data.

Here is an example of a function that takes two parameters, num1 and num2, and returns their sum:

function addNumbers(num1, num2) {
  return num1 + num2;
}
      
console.log(addNumbers(5, 7)); // Output: 12                     

In the example above, the addNumbers function takes two parameters, num1 and num2. These parameters are used to receive the input values 5 and 7, respectively. The function then adds the values of num1 and num2 and returns the result.

You can also pass in variables as function arguments:

let a = 10;
let b = 20;
      
function multiplyNumbers(x, y) {
  return x * y;
}
      
console.log(multiplyNumbers(a, b)); // Output: 200                          

In the example above, the multiplyNumbers function takes two parameters, x and y. We pass the values of a and b into the function as arguments. The function then multiplies the values of x and y and returns the result.