TIL18 - JS - Functions

Function is a set of block of codes that are grouped together into a sequence to perform a specific task

1. Function Declaration

Syntax

function functionName(parameter) {
  code block;
}

• start with function keyword
• followed by the name of the function, or the identifier, with ()
• inside the () go parameters, or the inputs to be used by the function. You can declare a function without any parameters
• followed by the block of codes for the function inside {}

2. Hoisting in JavaScript

JavaScript has a unique feature - hoisting - which allows for a function to be called before it is declared

> ex)

console.log(greeting()); // Prints: Hello!
function greeting() {
  console.log('Hello!');
}

above code runs without error, even though the function greeting() is called first, before it is declared as a function

It is important to note, however, that hoisting is bad practice - you should refrain from using it.

3. Calling a Function

The block of codes of a function only executes when the function is called

You can call a function simply by writing the function's name with (), with arguments inside the ()

• ex)

function add(x, y) {
  console.log(x + y);
}
add(1, 9); // --> this is the function call

• note that the order of arguments must correnspond to that of parameters declared
• the inputs are called parameters in function declaration and called arguments in function call

4. Default Parameters

A default parameter assigns a default value to a parameter in case no argument is passed in for the corresponding parameter in the function call

> ex)

function userId(user = 'guest') {
  console.log(`You have accessed as ${user}.`);
}
userId(); // Prints: You have accessed as guest.

5. Return

Without the return keyword, the output value of a function's codes are not captured. If you call a function that doesn't have a return statement, the default value would be undefined

6. Helper Functions

You can also call a function within another function
A function that is called inside another function is called a helper function

7. Function Expression

Functions can be created in more than one way. Another way to declare a function is to use function expressions

Syntax

const functionName = function(parameters) {
  code block;
}

• start by declaring a function variable with the const keyword and the function's name, or the identifier
• to this function variable, assign function() using = and with the function's parameters between the () if there will be any parameters for the function
• then write the code block inside {}

8. Arrow Function

Yet another way to create a function, introduced in ES6, is the use of arrow function notation

Syntax

const functionName = (parameters) => {
  code block;
}

• start by declaring a function variable with the const keyword and the fnction's name, or the identifier
• to this function variable assign () using = and follow with the 'arrow' notation =>. If there will be any parameters for the function, parameters go inside the ()
• the 'arrow' notation is followed by the code block inside {}

So, in JavaScript, there are three ways to declare a function: 1) function declaration, 2) function expression, and 3) arrow function

9. Concise Body Arrow Function

The arrow function notation can be simplified for certain cases, namely if there is just one parameter and if there is just one line of code in the code block

Syntax

• if the function has only one parameter, the () can be omitted. For zero parameter or more than one parameter, the () notation must be used
  
  > zero parameter case:

const functionName = () => {
  code block;
}

    > one parameter case:

const functionName = parameter => {
  code block;
}

    > two or more parameters case:

const functionName = (parameter1, parameter2, ...) => {
  code block;
}

• if the function needs only one line of code in its code block, then the {} can be omitted

const functionName = () => line of code;

    > in this case, the return statement for the function is not need -> it is implied by the single line of code (implied return)