Difference between Regular Function vs Arrow Function

Friday, 28/10/2022

Tram Ho

I’m TUAN, currently a Full-stack Developer in Tokyo.
If you find this Blog interesting, please give me a like and subscribe to support me.

You can declare your Functions in many ways.

Use keyword function:

<span class="token comment">// function declaration</span>
<span class="token keyword">function</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token parameter">msg</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Hey </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>msg<span class="token interpolation-punctuation punctuation">}&lt;/span &gt;</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// function expression</span>
<span class="token keyword">const</span> <span class="token function-variable function">test</span> <span class="token operator">=</span> <span class=" token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">msg</span><span class="token punctuation">)&lt;/span &gt; <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Hey </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>msg<span class="token interpolation-punctuation punctuation">}&lt;/span &gt;</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span></span>

// function declaration

function test(msg) {

return `Hey ${msg}`;

}

// function expression

const test = function (msg) {

};

You can call both declaration and expression functions as Normal/Regular Function

Arrow function was introduced in ES6 and is also known as arrow function.

<span class="token keyword">const</span> <span class="token function- variable function">arrowFunction</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">msg&lt;/span &gt;<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Hey $ {msg}</span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span>
</span>

const arrowFunction = (msg) => {

}

As you can see both function works the same in the above example. Now the question is why do we need regular funcion or arrow function.

Let’s discuss some issues below

1. Syntax – Syntax

2. Arguments binding – Argument binding

3. this

4. keyword: new

5. No duplicate named parameters

6. Function Hoisting

7. Method

———————————————–

1. Syntax – Syntax

We can write regular and arrow function this way

<span class="token comment">// ES5</span>
<span class="token keyword">var</span> <span class="token function-variable function">add</span> <span class="token operator">=</span> <span class=" token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y&lt;/ span&gt;<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> x <span class="token operator">+</span> y<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// ES6</span>
<span class="token keyword">let</span> <span class="token function-variable function">add</span> <span class="token operator">=</span> <span class=" token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span><span class="token punctuation">)&lt;/ span&gt; <span class="token operator">=&gt;</span> x <span class="token operator">+</span> y<span class="token punctuation">;</span>
</span></span>

// ES5

var add = function (x, y) {

return x + y;

};

// ES6

let add = (x, y) => x + y;

Implicit Return – Default Return

In a regular function, you must use the return keyword to return any value . If you don’t return anything, the function returns undefined.

<span class="token keyword">function</span> <span class="token function">regFunc</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token string">"Regular Function"</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token function">regFunc</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// Regular Function</span>
<span class="token keyword">function</span> <span class="token function">regFunc</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Regular Function"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token function">regFunc</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// Regular Function</span>
<span class="token comment">// undefined</span>

function regFunc() {

return "Regular Function";

}

regFunc();

// Regular Function

console.log("Regular Function");

}

regFunc();

// Regular Function

// undefined

The arrow functions work the same way when returning a value.

If arrow function contains an expression, you can omit the curly braces and then the expression will be returned implicitly returned.

`{}`optional if it has only one line statement

<span class="token keyword">const</span> <span class="token function- variable function">addOne</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">number&lt;/span &gt;<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> number <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token function">addOne</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span>

const addOne = (number) => number + 1;

addOne(10);

`()`optional if you have only one argument

let add = (x) => x + x;

If no argument

let arrowFunc = _ => console.log("Arrow Function");

2. Arguments binding – Binding Arguments

In a regular function, the arguments keywords can be used to access arguments passed to the function.

Example:

<span class="token keyword">function</span> <span class="token function">regularFunction</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span>&lt; span class="token punctuation"&gt;) <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arguments<span class="token">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">regularFunction</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// Arguments[1,2]</span>

function regularFunction(a, b) {

console.log(arguments);

}

regularFunction(1, 2);

// Arguments[1,2]

The arrow functions have no argument binding.

<span class="token keyword">const</span> <span class="token function- variable function">arrowFunction</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arguments<span class="token">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token function">arrowFunction</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//ReferenceError: arguments is not defined</span>

const arrowFunction = (a, b) => {

};

arrowFunction(1, 2);

//ReferenceError: arguments is not defined

However, if you want to access the arguments in a arrow function, you can use the rest:

operator

<span class="token keyword">var</span> <span class="token function- variable function">arrowFunction</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>args</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token function">arrowFunction</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 1 2</span>

var arrowFunction = (...args) => {

console.log(...args);

};

// 1 2

3. this

In a regular function, this changes according to how the function is called.

Simple Invocation: this with a global object or may be undefined if you are using mode strict mode.
Method Invocation: this with the object that owns the function.
Indirect Invocation: this with the first argument.
Constructor Invocation: this with the newly created instance.

<span class="token comment">// 1️⃣ Simple Invocation</span>
<span class="token keyword">function</span> <span class="token function">simpleInvocation</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword ">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">simpleInvocation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// Window Object</span>

<span class="token comment">// 2️⃣ Method Invocation</span>
<span class="token keyword">const</span> methodInvocation <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">method</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword ">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
methodInvocation<span class="token punctuation">.</span><span class="token function">method</span><span class="token punctuation">(</span><span class="token punctuation marks">)</span><span class="token punctuation">;</span>
<span class="token comment">// logs methodInvocation object</span>

<span class="token comment">// 3️⃣ Indirect Invocation</span>
<span class="token keyword">const</span> context <span class="token operator">=</span> <span class="token punctuation">{</span> aVal<span class="token operator">:</span> <span class="token string">"A"</span><span class="token punctuation">,</span> bVal<span class="token operator">:&lt; /span&gt; <span class="token string">"B"</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">indirectInvocation</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword ">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">indirectInvocation</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// logs { aVal: 'A' }</span>
<span class="token function">indirectInvocation</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// logs { bVal: 'A' }</span>

<span class="token comment">// 4️⃣ Constructor Invocation</span>
<span class="token keyword">function</span> <span class="token function">constructorInvocation</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword ">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">new</span> <span class="token class-name">constructorInvocation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// logs an instance of constructorInvocation</span>
</span>

// 1️⃣ Simple Invocation

function simpleInvocation() {

console.log(this);

}

simpleInvocation();

// Window Object

// 2️⃣ Method Invocation

const methodInvocation = {

method() {

},

};

methodInvocation.method();

// logs methodInvocation object

// 3️⃣ Indirect Invocation

const context = { aVal: "A", bVal: "B" };

function indirectInvocation() {

}

indirectInvocation.call(context); // logs { aVal: 'A' }

indirectInvocation.apply(context); // logs { bVal: 'A' }

// 4️⃣ Constructor Invocation

function constructorInvocation() {

}

new constructorInvocation();

// logs an instance of constructorInvocation

The arrow functions don’t have their own this and they don’t redefine the value of this inside the function .

this inside a arrow function always refers to this from contexts inside outside.

<span class="token keyword">var</span> name <span class="token operator ">=</span> <span class="token string">"Suprabha"</span>
<span class="token keyword">let</span> newObject <span class="token operator">=</span> <span class="token punctuation">{</span>
    name <span class="token operator">:</span> <span class="token string">"supi"</span><span class="token punctuation">,</span>
    <span class="token function-variable function">arrowFunc</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class=" token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword ">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">regularFunc</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword ">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
newObject<span class="token punctuation">.</span><span class="token function">arrowFunc</span><span class="token punctuation">(</span><span class="token punctuation marks">)</span><span class="token punctuation">;</span> <span class="token comment">// Suprabha</span>
newObject<span class="token punctuation">.</span><span class="token function">regularFunc</span><span class="token punctuation">(</span><span class="token punctuation marks">)</span><span class="token punctuation">;</span> <span class="token comment">// supi</span>

var name = "Suprabha"

let newObject = {

name : "supi",

arrowFunc: () => {

},

regularFunc() {

}

newObject.arrowFunc(); // Suprabha

newObject.regularFunc(); // supi

4. new

Common functions can use constructor, they can be called using the keyword new.

<span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span>&lt; span class="token punctuation"&gt;) <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x <span class="token">+</span> y<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">let</span> sum <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class">add</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,&lt;/span &gt; <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 5</span>
</span>

function add(x, y) {

console.log(x + y);

}

let sum = new add(2, 3);

// 5

However, arrow functions can never be used as constructors. Therefore, they can never be called with the new

. keyword

<span class="token keyword">let</span> <span class="token function- variable function">add</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x <span class="token operator">+ </span> y<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> sum <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class">add</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,&lt;/span &gt; <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// TypeError: add is not a constructor</span>
</span>

let add = (x, y) => console.log(x + y);

const sum = new add(2, 4);

// TypeError: add is not a constructor

5. paramaters cannot have duplicate names

In normal function we can do this:

<span class="token comment">// ✅ will work</span>
<span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> a</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>&lt; span class="token punctuation"&gt;}

<span class="token comment">// will not work</span>
<span class="token punctuation">(</span><span class="token string">"use strict"</span><span class="token punctuation">)</span><span class=" token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> a</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>&lt; span class="token punctuation"&gt;}
<span class="token comment">// Uncaught SyntaxError: Duplicate parameter name not allowed in this context</span>

// ✅ will work

function add(a, a) {}

// will not work

("use strict");

// Uncaught SyntaxError: Duplicate parameter name not allowed in this context

arrow functions must never have duplicate named parameters, whether in strict mode or non-strict mode.

<span class="token keyword">const</span> <span class="token function- variable function">arrowFunc</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> a</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">// Uncaught SyntaxError: Duplicate parameter name not allowed in this context</span>

const arrowFunc = (a, a) => {};

// Uncaught SyntaxError: Duplicate parameter name not allowed in this context

6. Function Hoisting

In normal function, function gets hoisting at the top.

<span class="token function">normalFunc</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">normalFunc</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token string">"Normal Function"</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// "Normal Function"</span>

normalFunc();

function normalFunc() {

return "Normal Function";

}

// "Normal Function"

In arrow function, the function is hoisted where you declare it. So if you call the function before declaration you will get referenceError.

<span class="token function">arrowFunc</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">arrowFunc</span> <span class="token operator">=</span> <span class=" token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{&lt; /span&gt;
  <span class="token keyword">return</span> <span class="token string">"Arrow Function"</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">// ReferenceError: Cannot access 'arrowFunc' before initializati</span>
</span>

arrowFunc();

return "Arrow Function";

};

// ReferenceError: Cannot access 'arrowFunc' before initializati

7. Methods

You can define functions in a class using regular functions.

<span class="token keyword">class</span> <span class="token class- name">FullName</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token function">result</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword ">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">let</span> name <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class">FullName</span><span class="token punctuation">(</span><span class="token string">"Suprabha"</span><span class="token punctuation">)&lt; /span&gt;<span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>name<span class="token">)</span><span class="token punctuation">;</span>
<span class="token comment">// FullName {name: "Suprabha"}</span>
</span>

class FullName {

constructor(name) {

this.name = name;

}

result() {

}

let name = new FullName("Suprabha");

console.log(name);

// FullName {name: "Suprabha"}

You also need to apply callback.

<span class="token function">setTimeout</span><span class="token punctuation">(</span>name<span class="token punctuation">.</span>result<span class="token punctuation">,</span> <span class="token number">2000</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// after 1 second logs ""</span>

setTimeout(name.result, 2000 );

// after 1 second logs ""

But if you bind this

<span class="token function">setTimeout</span><span class="token punctuation">(</span>name<span class="token punctuation">.</span><span class="token function">result</span><span class="token punctuation">.</span>&lt; span class="token function"&gt;bind<span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// Suprabha</span>

setTimeout(name.result.bind(name), 2000);

// Suprabha

By the example above, you can see that you must associate contexts this with their context.

In arrow function, you do not need to bind to context.

<span class="token keyword">class</span> <span class="token class- name">FullName</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token function-variable function">result</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class=" token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword ">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">let</span> name <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">FullName</span><span class="token punctuation">(</span><span class="token string">"Suprabha"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">setTimeout</span><span class="token punctuation">(</span>name<span class="token punctuation">.</span>result<span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Suprabha</span>

class FullName {

this.name = name;

}

result = () => {

};

}

let name = new FullName("Suprabha");

setTimeout(name.result, 2000); // Suprabha

Khi nào không sử dụng arrow function

Object

<span class="token keyword">let</span> dog <span class="token operator">=</span> <span class="token punctuation">{</span>
  count<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
  <span class="token function-variable function">jumps</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>count<span class="token operator">++</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

let dog = {

count: 3,

jumps: () => {

this.count++;

},

};

Khi bạn gọi dog.jumps, số đếm không tăng lên. Đó là bởi vì this không bị ràng buộc với bất cứ điều gì, và sẽ kế thừa value của this từ phạm vi cha của nó.

Tham khảo

GeeksForGeeks normal vs arrow function

Tóm tắt

Trong hàm thông thường, this value là động, Trong arrow function, this value bằng với value của hàm ngoài.

Trong hàm thông thường, các đối số sẽ cung cấp cho bạn danh sách tham số arguments được truyền vào hàm. argument của arrow function không được xác định.

Trong hàm thông thường, bạn luôn phải trả về bất kỳ value nào, nhưng trong arrow function, bạn có thể bỏ qua keyword return và có thể viết single line.

Trong mũi tên, các tham số của hàm phải là duy nhất.

Vấn đề Hoisting trong arrow function vì hàm không được gọi trước khi khởi tạo.

Như mọi khi, mình hy vọng bạn thích bài viết này và biết thêm được điều gì đó mới.

Cảm ơn và hẹn gặp lại các bạn trong những bài viết tiếp theo!

Nếu bạn thấy thích blog của mình thì nhấn theo dõi để ủng hộ mình nhé. Thank you.

Ref

https://tuan200tokyo.blogspot.com/2022/10/blog16-iem-khac-nhau-giua-regular.html

Share the news now

Source : Viblo

Difference between Regular Function vs Arrow Function

1. Syntax – Syntax

2. Arguments binding – Argument binding

3. this

4. keyword: new

5. No duplicate named parameters

6. Function Hoisting

7. Method

1. Syntax – Syntax

Implicit Return – Default Return

`{}`optional if it has only one line statement

`()`optional if you have only one argument

If no argument

2. Arguments binding – Binding Arguments

3. this

4. new

5. paramaters cannot have duplicate names

6. Function Hoisting

7. Methods

Khi nào không sử dụng arrow function

Tham khảo

Tóm tắt

Ref

TikTok becomes the second largest social platform in South Africa

The fastest depreciating after 9 months of launch, iPhone 14 Pro Max continues to break the bottom in Vietnam

Beginner's guide to R: Introduction

10 essential SublimeText plugins for JavaScript developers

1. Syntax – Syntax

2. Arguments binding – Argument binding

3. this

4. keyword: new

5. No duplicate named parameters

6. Function Hoisting

7. Method

1. Syntax – Syntax

Implicit Return – Default Return

{}optional if it has only one line statement

()optional if you have only one argument

If no argument

2. Arguments binding – Binding Arguments

3. this

4. new

5. paramaters cannot have duplicate names

6. Function Hoisting

7. Methods

Khi nào không sử dụng arrow function

Tham khảo

Tóm tắt

Ref

TikTok becomes the second largest social platform in South Africa

The fastest depreciating after 9 months of launch, iPhone 14 Pro Max continues to break the bottom in Vietnam

Beginner's guide to R: Introduction

10 essential SublimeText plugins for JavaScript developers

`{}`optional if it has only one line statement

`()`optional if you have only one argument