Sự khác biệt giữa function declaration, function expression và arrow function là gì?

Ba cách viết hàm, khác nhau ở hoisting, this, và những gì hàm có sẵn.

javascript

// 1. Function declaration — hoist cả thân hàm
sum(1, 2)                       // chạy được, dù đứng trước khai báo
function sum(a, b) { return a + b }

// 2. Function expression — chỉ gọi được sau khi gán
const sub = function (a, b) { return a - b }

// 3. Arrow function — không có this riêng
const mul = (a, b) => a * b

	declaration	expression	arrow
Hoist cả thân hàm	có	không	không
`this` riêng	có	có	không (lấy từ scope ngoài)
`arguments`	có	có	không
Dùng với `new`	được	được	không
Làm method của object	được	được	tránh

Hệ quả quan trọng nhất là this:

javascript

const counter = {
  count: 0,
  incBad: () => { this.count++ },      // this lấy từ ngoài → KHÔNG phải counter
  incGood() { this.count++ },          // shorthand method → đúng
}

Ngược lại, chính việc không có this riêng khiến arrow function là lựa chọn đúng cho callback:

javascript

class Timer {
  start() {
    setInterval(() => this.tick(), 1000)   // this vẫn là instance
  }
}

Chốt: arrow cho callback và hàm ngắn; shorthand method cho method của object/class; declaration khi cần hàm dùng ở nhiều nơi trong file.

Xem toàn bộ JavaScript cùng filter theo level & chủ đề con.

Mở danh sách JavaScript

Ba cách viết hàm, khác nhau ở hoisting, this, và những gì hàm có sẵn.

javascript

// 1. Function declaration — hoist cả thân hàm
sum(1, 2)                       // chạy được, dù đứng trước khai báo
function sum(a, b) { return a + b }

// 2. Function expression — chỉ gọi được sau khi gán
const sub = function (a, b) { return a - b }

// 3. Arrow function — không có this riêng
const mul = (a, b) => a * b

	declaration	expression	arrow
Hoist cả thân hàm	có	không	không
`this` riêng	có	có	không (lấy từ scope ngoài)
`arguments`	có	có	không
Dùng với `new`	được	được	không
Làm method của object	được	được	tránh

Hệ quả quan trọng nhất là this:

javascript

const counter = {
  count: 0,
  incBad: () => { this.count++ },      // this lấy từ ngoài → KHÔNG phải counter
  incGood() { this.count++ },          // shorthand method → đúng
}

Ngược lại, chính việc không có this riêng khiến arrow function là lựa chọn đúng cho callback:

javascript

class Timer {
  start() {
    setInterval(() => this.tick(), 1000)   // this vẫn là instance
  }
}

Chốt: arrow cho callback và hàm ngắn; shorthand method cho method của object/class; declaration khi cần hàm dùng ở nhiều nơi trong file.