Hàm trong JavaScript: function declaration, expression và arrow function

JavaScript có 3 cách định nghĩa hàm. Mỗi cách có đặc điểm riêng. Bài viết này giải thích rõ ràng sự khác nhau và khi nào nên dùng cái nào.

Function Declaration

function tinh_tong(a, b) {
    return a + b;
}
console.log(tinh_tong(3, 4));    // 7

// Đặc điểm: Hoisting — Gọi được TRƯỚC khi khai báo!
console.log(xin_chao("Minh"));    // "Xin chào, Minh!"
function xin_chao(ten) {
    return `Xin chào, ${ten}!`;
}

Function Expression

const tinh_tong = function(a, b) {
    return a + b;
};

// Không có hoisting:
console.log(tinh_tich(3, 4));    // TypeError!
const tinh_tich = function(a, b) { return a * b; };

Arrow Function (ES6)

// Đầy đủ
const tinh_tong = (a, b) => {
    return a + b;
};

// Rút gọn (1 biểu thức)
const tinh_tong_ngan = (a, b) => a + b;
const nhan_doi = x => x * 2;
const xin_chao = () => "Xin chào!";

So sánh 3 loại hàm

map, filter, reduce — 3 hàm quan trọng nhất

const diem = [8.5, 6.0, 9.2, 7.8, 5.5];

const lam_tron = diem.map(d => Math.round(d));
// [9, 6, 9, 8, 6]

const diem_gioi = diem.filter(d => d >= 8.0);
// [8.5, 9.2]

const tong = diem.reduce((acc, d) => acc + d, 0);
// 37.0

Closures

function tao_bo_dem(bat_dau = 0) {
    let dem = bat_dau;
    return {
        tang: () => ++dem,
        xem: () => dem
    };
}

const counter = tao_bo_dem(10);
console.log(counter.tang());    // 11
console.log(counter.tang());    // 12

Kết luận

3 kiểu hàm JavaScript: Declaration cho hàm độc lập, Expression cho hàm gán vào biến, Arrow cho callback và hàm ngắn.