JavaScript - Understanding Functions

A function is an instruction that takes some data, executes a defined and unique process, and returns the result. It's almost like a vending machine which you put money in and a drink comes out.

Two steps are necessary to use the function.

1. Declare a function
2. Call a function

◾️　Function Declaration

Functions can be declared using the "function" followed by a name and a pair of parentheses, which may contain argument if needed. And then write the tasks inside the curly braces {}.

function $FUNCTION_NAME() {
  $STATEMENTS;
}

$FUNCTION_NAME(); // call a function

◾️　Function Expression

A function expression is very similar to a function declaration. A function expressions can be assigned to variables or used as arguments in other functions. It doesn't require a function name(anonymous functions).

let $FUNCTION_NAME = function() {
  $STATEMENTS;
};

$FUNCTION_NAME(); // call a function

◾️　Function Call

You can call the function by just writing its name and parentheses. If arguments are required, they can be written in parentheses.

Argument(/Parameters):
Functions can accept parameters, which allow you to pass specific value to the function when it's called.

Return Value
By using return statement, you can return value to the code that called them. The returned value can be used in the code that called the function.

// argument: width, height
function calculateArea(width,height) {
  // return the value
  return width * height;
}
// pass the value to function
// width:4, height:5
console.log(calculateArea(4,5)); //20

▫️　Hoisting

Hoisting is JavaScript's default behaviour of moving declarations to the top.

Functions	Hoisting	Description
Function Declarations	○	You can call a function before it's defined in the code.
Function Expressions	×	You can call a function only after the line in which they are defined. Attempting to call a function expression before its definition will result in an error.

◾️　Anonymous functions

Functions can also be defined without a name. These functions are called anonymous functions and used for code that only needs to run once within a task, rather than repeatedly being called by other parts of the script. These are often used as arguments to other functions, assigned to variables, or used as event handlers and listeners to perform a task when an event occurs.

const squareArea = function(width,height) {
  return width * height;
}

◾️　Arrow Functions

Arrow functions are a function notation newly introduced in ES2015(ES6), and as the name suggests, functions are defined using =>. They are useful for short, one-line functions.

let squareArea = (width,height) => {
  return width * height;
};

squareArea(4,5);

If the function has only one statement, you can omit the curly braces and the return keyword.

let squareArea = (width,height) => width * height;

If the function has only one parameter, you can omit the parentheses.

let sayHi = name => `Hi ${name}! How are you?`;