Video học lập trình mỗi ngày

Một lỗi thường thấy ở các bạn mới học javascript hay những bạn bắt đầu làm việc với js mà thường gặp đó là sử dụng name function không đúng cách. Ví dụ như sau...

Trong bài viết này tôi sẽ làm việc với 3 chủ đề đó là map, name function và cuối cùng là callback. Ai chưa hiểu 3 loại đó thì có thể đi đến bài viết đó để biết và hiểu nó như thế nào. Tiếp theo là chủ đề chính của bài viết thuộc Series - Mẹo viết js

Ví dụ về sửa đổi một array

Để mô phỏng quá trình lỗi phổ biến tôi đi từ đơn giản nhất. Ví dụ tôi có một list danh sách các cầu thủ bóng đá dưới đây:

let players = ['cr7', 'rooney', 'valencia'];

Giờ tôi muốn chỉnh sửa và photocopy nó ra một list khác, ví dụ như:

players.map( player => `${player} đang chơi cho thằng nào vậy?`)

Thì chúng tôi nhận được kết quả sau:

["cr7 đang chơi cho thằng nào vậy?", 
"rooney đang chơi cho thằng nào vậy?",
"valencia đang chơi cho thằng nào vậy?"]

So cool! Giờ đến lúc sử dụng name function cho tình huống này bạn sẽ thấy cực kỳ sai lầm chỗ nào?

Name function vs callback

Để tái cấu trúc mã và tối ưu code của mình, có nhiều lập trình viên sử dụng hàm được đặt tên thay vì hàm ẩn danh như ví dụ trên, như dưới đây:

function photocopy (player){
    return `${player} đang chơi cho thằng nào vậy?`
}
let players = ['cr7', 'rooney', 'valencia']; 

// Modify the array
console.log(players.map(photocopy(player)));

Thoạt nhìn vào các bạn không thấy vấn đề gì nhưng hầu như đó là lỗi phổ biến của các bạn mới học js. Khi bạn sử dụng () là đang tham chiếu vào function đó, có nghĩa là bạn đang chạy nó. Cụ thể hơn trong trường hợp này players.map(photocopy(player)) là bạn chạy photocopy(player) trước khi chạy players.map(). Chính vì vậy, chúng ta sẽ nhận được một error: player is not defined như trong hình.

Để khắc phục lỗi trên, chỉ đơn giản không dùng dấu ngoặc () trong trường hợp này.

// Modify the array
console.log(players.map(photocopy);
//Output 
[//"cr7 đang chơi cho thằng nào vậy?", 
"rooney đang chơi cho thằng nào vậy?", 
"valencia đang chơi cho thằng nào vậy?"]

Khi sử dụng hàm không có dấu ngoặc thì các đối số sẽ tự động được chuyển vào khi chạy callback function. Nhớ đấy...