Javascript: Tìm hiểu về arrow function

Arrow function là một tính năng mới trong ES6. Vậy tại sao chúng ta phải cần arrow function? Theo tôi, nguyên nhân chính là:
– Cú pháp gọn hơn, dễ hiểu hơn 🙂
– Hạn chế ảnh hưởng this trong một scope. Vì mỗi khi chúng ta dùng một function thì một this mới sẽ sinh ra.

Đầu tiên, chúng ta nhìn một chút về code trước đây nhé!

const names = ['wes', 'kait', 'lux'];
const fullNames = names.map(function(name) {
 return `${name} nguyen`;
});

Sau khi dùng arrow function, code sẽ thành vậy nè:

const names = ['wes', 'kait', 'lux'];
const fullNames = names.map((name) => {
 return `${name} nguyen`;
});

Rõ ràng ta thấy cú pháp đẹp hơn một xíu rồi. Ban đầu, có thể bạn chưa quen nên code sẽ hay quên cú pháp. Nhưng khi code quen rồi, thực sự code rất thích, đơn giản, gọn nhẹ.
Arrow function có nhiều cú pháp khác nhau. Chúng ta cùng học một số cách viết khác nhé 🙂

const names = ['wes', 'kait', 'lux'];
const fullNames2 = names.map(name => {
 return `${name} nguyen`;
});
const fullNames4 = names.map(name => `${name} nguyen`);
const fullNames5 = names.map(() => `dan nguyen`);
const sayMyName = (name) => {
 alert(`Hello ${name}!`)
}

Tiếp theo, chúng ta xem ví dụ sau:

const box = document.querySelector('.box');
box.addEventListener('click', function() {
 this.classList.toggle('opening');
 setTimeout(function(){
 this.classList.toggle('open');//this ở đây bị thay đổi,
 //this = Window
 });
});

Để code này chạy đúng như kỳ vọng, ta viết lại như sau:

const box = document.querySelector('.box');
box.addEventListener('click', function() {
 const self = this;
 self.classList.toggle('opening');
 setTimeout(function(){
 self.classList.toggle('open');//dùng biến self để lưu this
 //của box
 });
});

Bạn thấy code khá dài và phức tạp chưa. Ví dụ trên được với arrow function như sau:

const box = document.querySelector('.box');
box.addEventListener('click', function() {
 this.classList.toggle('opening');
 setTimeout(() => {
 this.classList.toggle('open');// this được kế thừa từ scope cha,
 //ở đây là this = box
 });
});

Cool 🙂

Nhưng có phải khi nào arrow function cũng tốt hơn function thông thường. Không phải vậy. Có một vài trường hợp chúng ta không cần arrow function.

const button = document.querySelector('#button');
button.addEventListener('click', function() {
 //we need this here
 console.log(this);
});

const objLiteral = {
 scores: 0,
 add: function() {// need regular function
 this.scores ++;
 }
}