Điểm khác nhau giữa Regular Function vs Arrow Function

Thứ Sáu, 28/10/2022

Tram Ho

Mình là TUẤN hiện đang là một Full-stack Developer tại Tokyo.
Nếu bạn thấy Blog này hay xin hãy cho mình một like và đăng ký để ủng hộ mình nhé.

Bạn có thể khai báo các Functions của bạn theo nhiều cách.

Sử dụng 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">}</span></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">)</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">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

// function declaration

function test(msg) {

return `Hey ${msg}`;

}

// function expression

const test = function (msg) {

};

Bạn có thể gọi cả khai báo và biểu thức hàm là Normal/Regular Function

Arrow function được giới thiệu trong ES6 và còn được gọi là 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</span><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>

const arrowFunction = (msg) => {

}

Như bạn thấy cả hai function hoạt động giống nhau trong ví dụ trên. Bây giờ câu hỏi đặt ra là tại sao chúng ta cần regular funcion hoặc arrow function.

Cùng thảo luận một số vấn đề bên dưới nhé

1. Syntax – Cú pháp

2. Arguments binding – Ràng buộc đối số

3. this

4. eyword: new

5. Không có parameters được đặt tên trùng lặp

6. Function Hoisting

7. Method

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

1️. Syntax – Cú pháp

Chúng ta có thể viết hàm regular và arrow function theo cách này

<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</span><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">)</span> <span class="token operator">=&gt;</span> x <span class="token operator">+</span> y<span class="token punctuation">;</span>

// ES5

var add = function (x, y) {

return x + y;

};

// ES6

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

Implicit Return – Return ngầm định

Trong hàm thông thường, bạn phải sử dụng keyword return để trả về bất kỳ value nào. Nếu bạn không trả về bất kỳ thứ gì thì hàm sẽ trả về 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

Các arrow function hoạt động theo cách tương tự khi trả về giá trị.

Nếu arrow function chứa một biểu thức, bạn có thể bỏ qua dấu ngoặc nhọn và khi đó biểu thức sẽ được trả về implicitly returned.

`{}`không bắt buộc nếu nó chỉ có một dòng tuyên bố

<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</span><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>

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

addOne(10);

`()`không bắt buộc nếu bạn chỉ có một đối số

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

Nếu không có đối số

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

2️. Arguments binding – Đối số ràng buộc

Trong hàm thông thường, các keyword arguments có thể được sử dụng để truy cập các đối số được truyền cho hàm.

Thí dụ:

<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><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>arguments<span class="token punctuation">)</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]

Các arrow function không có ràng buộc đối số.

<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 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">//ReferenceError: arguments is not defined</span>

const arrowFunction = (a, b) => {

};

arrowFunction(1, 2);

//ReferenceError: arguments is not defined

Tuy nhiên, nếu bạn muốn truy cập các đối số trong một arrow function, bạn có thể sử dụng toán tử rest:

<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

Trong hàm thông thường, this thay đổi theo cách hàm đó được gọi.

Simple Invocation: this bằng đối tượng toàn cục hoặc có thể không xác định nếu bạn đang sử dụng chế độ strict mode.
Method Invocation: this bằng đối tượng sở hữu hàm.
Indirect Invocation: this bằng đối số đầu tiên.
Constructor Invocation: this bằng instance mới được tạo.

<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">)</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">:</span> <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>

// 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

Các arrow function không có this riêng và chúng không xác định lại value của this bên trong hàm.

this bên trong một arrow function luôn đề cập đến this từ contexts bên ngoài.

<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">)</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">)</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

Các hàm thông thường có thể sử dụng constructor, chúng có thể được gọi bằng cách sử dụng 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><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>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 keyword">let</span> sum <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">add</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 5</span>

function add(x, y) {

console.log(x + y);

}

let sum = new add(2, 3);

// 5

Tuy nhiên, các arrow function không bao giờ có thể được sử dụng như các hàm khởi tạo. Do đó, chúng không bao giờ có thể được gọi với keyword new

<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-name">add</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <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>

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

const sum = new add(2, 4);

// TypeError: add is not a constructor

5. paramaters không được đặt tên trùng lặp

Trong function bình thường, chúng ta có thể làm điều này:

<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><span class="token punctuation">}</span>

<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><span class="token punctuation">}</span>
<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

Các arrow function không bao giờ được có các tham số được đặt tên trùng lặp, cho dù ở chế độ strict mode hay 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

Trong function thông thường, function được hoisting lên ở đầu.

<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"

Trong arrow function, hàm được hoisting vào nơi bạn khai báo nó. Vì vậy, nếu bạn gọi hàm trước khi khai báo, bạn sẽ nhận được 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">{</span>
  <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>

arrowFunc();

return "Arrow Function";

};

// ReferenceError: Cannot access 'arrowFunc' before initializati

7. Methods

Bạn có thể xác định các hàm trong lớp bằng cách sử dụng hàm thông thường.

<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-name">FullName</span><span class="token punctuation">(</span><span class="token string">"Suprabha"</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>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// FullName {name: "Suprabha"}</span>

class FullName {

constructor(name) {

this.name = name;

}

result() {

}

let name = new FullName("Suprabha");

console.log(name);

// FullName {name: "Suprabha"}

Bạn cũng cần áp dụng 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 ""

Nhưng nếu bạn ràng buộc 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><span class="token function">bind</span><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

Bằng ví dụ trên, bạn có thể thấy rằng bạn phải liên kết contexts this với context của chúng.

Trong arrow function, bạn không cần phải ràng buộc với 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 = () => {

};

}

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

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

Điểm khác nhau giữa Regular Function vs Arrow Function

1. Syntax – Cú pháp

2. Arguments binding – Ràng buộc đối số

3. this

4. eyword: new

5. Không có parameters được đặt tên trùng lặp

6. Function Hoisting

7. Method

1️. Syntax – Cú pháp

Implicit Return – Return ngầm định

`{}`không bắt buộc nếu nó chỉ có một dòng tuyên bố

`()`không bắt buộc nếu bạn chỉ có một đối số

Nếu không có đối số

2️. Arguments binding – Đối số ràng buộc

3. this

4. new

5. paramaters không được đặt tên trùng lặp

6. Function Hoisting

7. Methods

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

Tham khảo

Tóm tắt

Ref

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript

1. Syntax – Cú pháp

2. Arguments binding – Ràng buộc đối số

3. this

4. eyword: new

5. Không có parameters được đặt tên trùng lặp

6. Function Hoisting

7. Method

1️. Syntax – Cú pháp

Implicit Return – Return ngầm định

{}không bắt buộc nếu nó chỉ có một dòng tuyên bố

()không bắt buộc nếu bạn chỉ có một đối số

Nếu không có đối số

2️. Arguments binding – Đối số ràng buộc

3. this

4. new

5. paramaters không được đặt tên trùng lặp

6. Function Hoisting

7. Methods

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

Tham khảo

Tóm tắt

Ref

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript

`{}`không bắt buộc nếu nó chỉ có một dòng tuyên bố

`()`không bắt buộc nếu bạn chỉ có một đối số