🤓 e-Learning Journey - JavaScript

Functions

Function Declarations

A function declaration binds a function to an identifier. A function declaration consists of:

The function keyword.
The name of the function (identifier), followed by parentheses.
A function body, enclosed in { }.

Note: We should also be aware of the hoisting feature which allows access to function declarations before they are defined. Example:

console.log(greetWorld()); // Output: Hello, World!

function greetWorld() {
  console.log('Hello, World!');
}

Hoisting allowed greetWorld() to be called before the greetWorld() function was defined. More info

Parameters

Parameters are used as variables inside the function body. When the function is called, these parameters will have the value of whatever is passed in as arguments.

Arguments

The values that are passed to the function when it is called are called arguments. Arguments can be passed to the function as values or variables. The order in which arguments are passed and assigned follows the order that the parameters are declared.

Default Parameters

Default parameters allow parameters to have a predetermined value in case there is no argument passed into the function or if the argument is undefined when called. Example:

function greeting (name = 'stranger') {
  console.log(`Hello, ${name}!`)
}

greeting('Nick') // Output: Hello, Nick!
greeting() // Output: Hello, stranger!

Return

To return a value from a function, we use a return statement.

When a function is called, the default the result of calling a function is undefined. The return statement stops the execution of a function and returns a value from that function.

Helper Functions

We can also use the return value of a function inside another function. Example:

function multiplyByNineFifths(number) {
  return number * (9/5);
};

function getFahrenheit(celsius) {
  return multiplyByNineFifths(celsius) + 32;
};

getFahrenheit(15); // Returns 59

We can use functions to section off small bits of logic or tasks.

Function Expressions

Function expressions create functions inside an expression instead of as a function declaration. They can be anonymous and/or assigned to a variable. In a function expression, the function name is usually omitted (anonymous function). A function expression is often stored in a variable in order to refer to it.

// Named function
function rocketToMars() {
  return 'BOOM!';
}

// Anonymous function
const rocketToMars = function() {
  return 'BOOM!';
}

Note: Unlike function declarations, function expressions are not hoisted so they cannot be called before they are defined.

Arrow Functions

Arrow functions removes the need to type function keyword. First, include the parameters inside the ( ), then add arrow => that points to the function body surrounded in { }. Example:

const rectangleArea = function(width, height) {
  let area = width * height;
  return area;
};

becomes:

const rectangleArea = (width, height) => {
  let area = width * height;
  return area;
};

Concise Body Arrow Functions

Functions that take only a single parameter do not need that parameter to be enclosed in parentheses.
However, if a function takes zero or multiple parameters, parentheses are required.

A function body composed of a single-line block does not need curly braces. Without the curly braces, whatever that line evaluates will be automatically returned. The contents of the block should immediately follow the arrow => and the return keyword can be removed. This is referred to as implicit return. Example:

const squareNum = (num) => {
  return num * num;
};

becomes:

const squareNum = num => num * num;

cyber-s / blog