JavaScript - hoisting không áp dụng cho hàm mũi tên

TIL

763

@100daysTIL

72

Minh-Trung Nguyễn viết ngày 24/04/2018

JavaScript - hoisting không áp dụng cho hàm mũi tên

Day 43:

Một ngày đẹp giời, copy code được code của người khác về hý hửng chạy thấy ngon, nhưng chưa hài lòng vì thấy vẫn dùng khai báo hàm theo ES5, nhanh nhảu sửa lại thành hàm mũi tên cho đúng chuẩn ES6.

Code ban đầu: Mỗi lần sự kiện "zoom" được lắng nghe (on), thì hàm zoomed() sẽ được gọi.

var zoom = d3.zoom()
    .scaleExtent([1, 10])
    .on("zoom", zoomed);

function zoomed() {
 // làm việc gì đấy
}

Code sửa theo ES6, biến khai báo zoomed() thành hàm mũi tên.

var zoom = d3.zoom()
    .scaleExtent([1, 10])
    .on("zoom", zoomed);

const zoomed = () => {
 // làm việc gì đấy
}

Kết quả? Báo lỗi zoomed undefined.

Lý do? Quên mất là hàm mũi tên không được hoisted vì nó đơn giản là một dạng của function expression. Cho nên hoặc là đổi nó lên trên trước phần var zoom, hoặc lại chuyển lại khai báo hàm như cách ban đầu.

Về vấn đề hoisting trong JavaScript, có thể đọc thêm ở đây (dịch lại từ quyển You Don't Know JS của Kyle Simpson).

ngminhtrung 25-04-2018