key function

​

Từ khóa function trong JavaScript: Kiến thức toàn diện

Từ khóa function là một trong những thành phần cốt lõi của JavaScript, được sử dụng để định nghĩa các hàm. Hàm là khối mã có thể tái sử dụng, giúp tổ chức và quản lý mã nguồn hiệu quả hơn. Dưới đây là kiến thức toàn diện về từ khóa function trong JavaScript:

Định nghĩa và cú pháp cơ bản

a. Cú pháp Function Declaration

Đây là cách phổ biến nhất để định nghĩa một hàm bằng từ khóa function.

function functionName(parameters) {
    // Body of the function
}

Ví dụ:

function greet(name) {
    return `Hello, ${name}!`;
}

console.log(greet("Alice")); // Output: Hello, Alice!

b. Cú pháp Function Expression

Hàm có thể được gán vào một biến hoặc sử dụng như một giá trị.

const functionName = function (parameters) {
    // Body of the function
};

Ví dụ:

const greet = function (name) {
    return `Hello, ${name}!`;
};

console.log(greet("Bob")); // Output: Hello, Bob!

c. Arrow Function (ES6)

Mặc dù không sử dụng từ khóa function, arrow functions (=>) là một dạng đặc biệt của hàm và thường được so sánh với function.

const functionName = (parameters) => {
    // Body of the function
};

Ví dụ:

const greet = (name) => `Hello, ${name}!`;

console.log(greet("Charlie")); // Output: Hello, Charlie!

Hoisting

Hoisting là hành vi mặc định của JavaScript, trong đó các khai báo hàm (Function Declarations) được "nâng lên" đầu phạm vi trước khi thực thi mã.

a. Function Declaration được hoisted

Bạn có thể gọi hàm trước khi định nghĩa nó.

console.log(greet("Alice")); // Output: Hello, Alice!

function greet(name) {
    return `Hello, ${name}!`;
}

b. Function Expression không được hoisted

Nếu sử dụng Function Expression, bạn cần định nghĩa hàm trước khi gọi.

console.log(greet("Bob")); // Lỗi: greet is not a function

const greet = function (name) {
    return `Hello, ${name}!`;
};

Các loại tham số

a. Tham số bắt buộc

Hàm yêu cầu các tham số cụ thể phải được truyền vào.

function add(a, b) {
    return a + b;
}

console.log(add(2, 3)); // Output: 5

b. Tham số mặc định (Default Parameters - ES6)

Cho phép đặt giá trị mặc định cho tham số nếu không có giá trị nào được truyền vào.

function greet(name = "Guest") {
    return `Hello, ${name}!`;
}

console.log(greet()); // Output: Hello, Guest!

c. Tham số không cố định (Rest Parameters - ES6)

Cho phép nhận một số lượng không cố định các tham số dưới dạng mảng.

function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3)); // Output: 6

Phạm vi (Scope)

a. Local Scope

Biến khai báo bên trong hàm chỉ tồn tại trong phạm vi của hàm.

function test() {
    const localVar = "I am local";
    console.log(localVar);
}

test(); // Output: I am local
console.log(localVar); // Lỗi: localVar is not defined

b. Global Scope

Biến khai báo bên ngoài tất cả các hàm có thể được truy cập ở bất kỳ đâu.

const globalVar = "I am global";

function test() {
    console.log(globalVar);
}

test(); // Output: I am global

Return và Side Effects

a. Return Value

Hàm có thể trả về một giá trị bằng từ khóa return.

function multiply(a, b) {
    return a * b;
}

console.log(multiply(2, 3)); // Output: 6

b. Side Effects

Hàm có thể thay đổi trạng thái bên ngoài (global variables, DOM,...) mà không trả về giá trị.

let counter = 0;

function increment() {
    counter++;
}

increment();
console.log(counter); // Output: 1

Constructor Functions

Hàm có thể được sử dụng để tạo đối tượng thông qua từ khóa new. Đây là tiền thân của class trong ES6.

function Person(name, age) {
    this.name = name;
    this.age = age;
}

const person = new Person("Alice", 25);
console.log(person.name); // Output: Alice

IIFE (Immediately Invoked Function Expression)

Hàm được định nghĩa và thực thi ngay lập tức sau khi khai báo. Thường dùng để tạo scope riêng.

(function () {
    console.log("This runs immediately!");
})();

Generator Functions

Generator functions sử dụng cú pháp function* và có thể tạm dừng/thực thi lại bằng từ khóa yield.

function* generateSequence() {
    yield 1;
    yield 2;
    yield 3;
}

const generator = generateSequence();
console.log(generator.next().value); // Output: 1

Async Functions

Async functions được sử dụng để xử lý các tác vụ bất đồng bộ, kết hợp với từ khóa await.

async function fetchData() {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    return data;
}

Từ khóa this trong hàm

a. Function Declaration/Expression

Trong Function Declaration/Expression, this phụ thuộc vào ngữ cảnh gọi hàm.

const obj = {
    name: "Alice",
    greet: function () {
        console.log(`Hello, ${this.name}`);
    }
};

obj.greet(); // Output: Hello, Alice

b. Arrow Function

Arrow functions không có this riêng mà kế thừa từ phạm vi bên ngoài.

const obj = {
    name: "Alice",
    greet: () => {
        console.log(`Hello, ${this.name}`); // `this` trỏ đến window/global
    }
};

obj.greet(); // Output: Hello, undefined

Tối ưu hóa và Best Practices

a. Pure Functions

Hàm thuần túy (pure function) không có side effects và luôn trả về cùng một kết quả với cùng một đầu vào.

function add(a, b) {
    return a + b; // Pure function
}

b. Nguyên tắc SOLID

• S*ingle Responsibility: Một hàm chỉ nên thực hiện một nhiệm vụ duy nhất.
• Open/Closed: Hàm mở rộng nhưng đóng sửa đổi.
• Liskov Substitution: Hàm con phải thay thế được hàm cha.
• Interface Segregation: Hàm không nên phụ thuộc vào những gì nó không sử dụng.
• D*ependency Inversion: Hàm nên phụ thuộc vào abstraction thay vì implementation.

Tổng kết

Từ khóa function trong JavaScript rất linh hoạt và mạnh mẽ. Nó có thể được sử dụng để:

1. Định nghĩa hàm thông thường (Function Declaration).
2. Gán hàm vào biến (Function Expression).
3. Tạo đối tượng (Constructor Functions).
4. Xử lý bất đồng bộ (Async Functions).
5. Tạo generator (Generator Functions).

Khi sử dụng function, bạn cần lưu ý:

• Hoisting: Function Declaration được hoisted, nhưng Function Expression thì không.
• Phạm vi: Biến khai báo trong hàm chỉ tồn tại trong phạm vi hàm.
• this: Hành vi của this khác nhau giữa Function Declaration/Expression và Arrow Function.

Hy vọng bài viết này giúp bạn hiểu rõ hơn về từ khóa function và cách sử dụng nó hiệu quả trong JavaScript! 😊