Tự học JavaScript - Module 7: Hàm (Functions) và Arrow Functions (ES6)

Open Table of contents

1. Khai báo và Gọi Hàm (Declaration & Invocation)
- Khai báo hàm:
- Gọi hàm (Invoke):
2. Tham số và Đối số (Parameters & Arguments)
- Tại sao lại dùng return?
3. Biểu thức Hàm (Function Expressions)
4. Hàm Mũi Tên (Arrow Functions - ES6)
- Cú pháp cơ bản:
- Rút gọn tối đa:
5. Sự khác biệt quan trọng của Arrow Functions
Lời kết Module 7

1. Khai báo và Gọi Hàm (Declaration & Invocation)

Khai báo hàm:

Sử dụng từ khóa function, theo sau là tên hàm và cặp ngoặc đơn ().

function myFunction(p1, p2) {
  return p1 * p2; // Hàm trả về tích của p1 và p2
}

Gọi hàm (Invoke):

Hàm sẽ không tự chạy. Bạn phải gọi tên nó kèm cặp ngoặc đơn.

let x = myFunction(4, 3); // x sẽ là 12

2. Tham số và Đối số (Parameters & Arguments)

Tham số (Parameters): Là các tên biến được liệt kê trong định nghĩa hàm (như p1, p2 ở trên).
Đối số (Arguments): Là các giá trị thực tế mà hàm nhận được khi bạn gọi nó (như 4, 3).

Tại sao lại dùng `return`?

Khi JavaScript gặp từ khóa return, hàm sẽ dừng lại và trả về giá trị cho nơi gọi nó. Nếu không có return, hàm sẽ trả về undefined.

3. Biểu thức Hàm (Function Expressions)

Bạn có thể lưu một hàm vào trong một biến. Sau khi đã lưu, biến đó có thể được dùng như một hàm.

const x = function (a, b) { return a + b };
let z = x(4, 3); // z = 7

4. Hàm Mũi Tên (Arrow Functions - ES6)

Đây là cú pháp hiện đại và cực kỳ phổ biến trong JS ngày nay. Nó giúp việc viết hàm trở nên ngắn gọn hơn rất nhiều.

Cú pháp cơ bản:

const hello = () => "Hello World!";

Rút gọn tối đa:

Nếu hàm chỉ có một câu lệnh và trả về một giá trị, bạn có thể bỏ cả dấu ngoặc nhọn { } và từ khóa return.

// Thay vì:
// const multiply = (a, b) => { return a * b };

// Bạn có thể viết:
const multiply = (a, b) => a * b;

5. Sự khác biệt quan trọng của Arrow Functions

Không có this riêng: Arrow function kế thừa this từ phạm vi cha bao quanh nó. Do đó, không nên dùng arrow function để làm phương thức của Object.
Không được Hoisting: Bạn phải khai báo arrow function trước khi gọi nó (khác với function declaration thông thường).

Lời kết Module 7

Hàm là “đơn vị xử lý” của chương trình. Việc làm chủ cả cách viết truyền thống và Arrow Function sẽ giúp bạn đọc hiểu mã nguồn hiện đại một cách dễ dàng.

Trong Module 8, chúng ta sẽ tìm hiểu về cách JavaScript tổ chức mã nguồn theo hướng đối tượng với Classes.

Hẹn gặp lại các bạn!

Table of contents