Javascript - function declaration vs function expression

📅 September 16, 2020 - ⏱️ 3 mins read

Post này chỉ là 1 note nhỏ của mình cho những dev hay quên về 2 khái niệm function declaration và function expression để mỗi lần nhắc đến chỉ việc vào đây xem lại chứ không cần phải google nữa 😅😅

Take note

Chắc hẳn anh em ngày ngày làm việc với javascript sẽ viết rất nhiều function với các cú pháp như:

function doSomething() {} // function declaration

// hoặc
const doSomething = function() {} // function expression

// hoặc
const doSomething = () => {} // function expression

Cách viết đầu tiên chính là function declaration, và 2 cách sau là function expression, vậy chúng khác gì nhau và sử dụng như thế nào?

Definition

Khác biết đầu tiên chính là cách định nghĩa function

Function declaraion được khai báo với từ khóa function và luôn bao gồm tên của function đó

function doSomething() {}

Function expression được khai báo tương tự như function declaraion nhưng được gán vào 1 biến và sẽ chạy khi được gọi qua biến đó, tên của function có thể bỏ đi (anonymous function)

const doSomething = function() {}

// Anonymous function in ES6 syntax
const doSomething = () => {}

Hoisting

Hoisting là 1 cơ chế của Javascript thể hiện việc đưa function và variable lên trên cùng của scope trước khi code được thực thi.

Hoisting chỉ áp dụng function declarations, không áp dụng cho function expressions

Có thế hiểu đơn giản qua ví dụ sau:

sayHello() // => "Hello"

function sayHello() {
  console.log("Hello")
}

Bạn có thể call function declaration ở bất cứ đâu trong scope nó khởi tạo

Tuy nhiên function expression chỉ có thể gọi sau khi định nghĩa

sayHello() // => Uncaught ReferenceError: Cannot access 'sayHello' before initialization

const sayHello = function() {
  console.log("Hello")
}

Tùy theo thói quen của dev và rule của project hoặc team leader đặt ra mà có thể sử dụng 1 trong 2 cách define function này.

Tuy nhiên có 1 số trường hợp đặc biệt để sử dụng function expression

IIFE

Immediately Invoked Function Expressions hay 1 anonymous function được chạy ngay sau khi khởi tạo

(function() {
    console.log('Code runs!')
})();

// ES6
(() => {
    console.log('Code runs!')
})();

Callback

1 trường hợp sử dụng function expression nữa đó là dùng làm callback

buttonElement.addEventListener('click', function(e) {
    console.log('button is clicked!')
})

hoặc

array.map(item => {
  // do stuff to an item
})

Đây là trường hợp phổ biến sử dụng function expression vì chúng ta không cần biết đến function này trong toàn bộ scope

Tóm lại, có thể sử dụng linh hoạt 2 cách define function trên, nếu muốn 1 function có thể sử dụng linh hoạt nhiều nơi trong scope thì sử dụng function declaration còn nếu chỉ cần giới hạn trong 1 thời điểm sử dụng thì dùng function expression

Tham khảo

Bạn muốn bình luận? Công khai 😎 hoặc Ẩn danh 👻 đều được nhé!

Loading comments ...