IIFE, Arrow Function and Destructuring

Posted on | In |

Introduction

Today, we will go over some interesting topics for review. Now that spring break has started, I will try to blog more regularly!

IIFE

IIFE stands for Immediately invoked function ｅxpressions, and it is a function expression that can be called immediately.

To study IIFE with detail, there are two things to compare. Function Declaration and Function Expression.

Function Declaration

Function declaration refers to the below.

1
2
3
Function A() {
  // Function Code
}

Functions created using function declaration are saved to variable object after the Javascript interpreter is initialized and the script is loaded. Sunsequently, they can be called regardless of where they were declared.

Function Expression

Function expression is to assign a function to a variable.

1
2
3
4
var example = function whatsup () {
  // Function Code

};

Comparison

Function is assigned to variable so it is carried out without having to be saved to variable object. It is carried out in runtime instead. Function declaration has the potential for JS interpreter to save too much code to the variable object and cause the response speed to slow down.

In addition, anything declared in global scope can be accessed anywhere in the code. Methods and properties that should not be shared and variables that are declared elsewhere with the same name need to be considered.

IIFE Advnatage

Immediately invoked function does not required a function to be defined or saved to a variable. Wrapping a function with brackets make it a immediately invoked function. Using IIFE does not require you to decalre a variable globally and prevent any conflicts between global variables.

Function Declaration

1
2
3
4
5
function a () {
  console.log("Function Declaration")
}

a()

IIFE

1
2
3
(function a () {
  console.log("IIFE")
}());

Arrow Function

Arrow function expression is shorter compared to other function declaration and it doesn’t bind its this, arguments, super or new.target. It is also anonymous it cannot be used as a creator and is appropriate when it is not used as a method function.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function sum3(x) {

  return y => {
    return z => {
      return x+y+z;

    }

  }

}


var sum3 = x => y=> z=> x+y+z;

Two functions above are the same!

Advantage

The biggest advantage of arrow function is that code can be more brief and concise. It can also be used as a callback function, so many examples in MDN use arrow functions.

Arrow function is used anonymously, so a function expression is used to call arrow function.

1
2
3
var x = x => x*x

x(10)

Originally, “this” of a function is decided by where it is called (dynamic scoping), but using an arrow function does not require separate binding and does not create its own “this”. It inherits the “this” of the context that includes itself. An arrow function always points at “this” of the higher scope. It is simlar to lexical scope. Using call, apply or bind will also not change “this”.

1
2
3
4
5
6
7
8
9
10
11
12
13

window.x = 5;

const regular = function () {return this.x;};

const arrow = () => this.x;

 

console.log (normal.call({ x:10})); //10

console.log(arrow.call({x:10})); //1

Disadvantage

Arrow function also has disadvantages. Since “this” of an arrow function points at the context of the higher scopethat contains itself, it is not good to be used as a method function.

1
2
3
4
5
6
7
8
9
10
11
12
const age = {

  name: "Josh",

  age: "55",

  whatisage: () => console.log(`My Age is ${this.age}`)

};
 

age.whatisage();

When we call the function above, we may think 55 would show as an answer. However, the “this” of the arrow function does not point at the object “age”, but points at the higher context, which is the global object window. Therefore, the result of the function is “Hi undefined”.

Prototype uses “this”, so the same problem occurs. Arrow function cannot be used as a constructor function because it does not have the prototype property.

addEventListener should not use an arrow function as the callback function because this would point at the window.

The cases above should use a normal function.

Destructuring

Destructuring is a method in javascript that breaks down the properties of an array or an object and save each to a separate variable (MDN).

Example #1

1
2
3
4
5
6
[a, b, ...rest] = [10, 20, 30, 40, 50];

 
console.log(rest);

// expected output: [30,40,50]

Example #2

1
2
3
4
5
6
7
8
let football = {
 neymar: "neymar",
 rooney: "rooney",
 bale: "bale" 
};

let { neymar, rooney, bale } = football;
// Can take out each property of an object.

Conclusion

IIFE, Arrow Function and destructuring are all useful methods of Javascript that can be actively used. Study these and code better!

0%