Hàm khởi tạo giá trị mặc định

​

Hàm khởi tạo giá trị mặc định trong JavaScript

Trong JavaScript, việc khởi tạo giá trị mặc định có thể được thực hiện bằng nhiều cách khác nhau, tùy thuộc vào ngữ cảnh và yêu cầu cụ thể. Dưới đây là tổng quan toàn diện về các phương pháp phổ biến để khởi tạo giá trị mặc định trong JavaScript:

Khởi tạo giá trị mặc định trong constructor của lớp

Khi làm việc với các lớp (class) trong JavaScript, bạn có thể sử dụng constructor để khởi tạo giá trị mặc định cho các thuộc tính của đối tượng.

Ví dụ:

class Person {
    constructor() {
        this.name = "Unknown"; // Giá trị mặc định
        this.age = 0;          // Giá trị mặc định
    }
}

// Sử dụng
const person = new Person();
console.log(person.name); // Output: Unknown
console.log(person.age);  // Output: 0

Khởi tạo giá trị mặc định trực tiếp trong khai báo thuộc tính

JavaScript hỗ trợ khai báo thuộc tính mặc định ngay trong định nghĩa class mà không cần phải viết logic trong constructor.

Ví dụ:

class Person {
    name = "Unknown"; // Giá trị mặc định
    age = 0;          // Giá trị mặc định
}

// Sử dụng
const person = new Person();
console.log(person.name); // Output: Unknown
console.log(person.age);  // Output: 0

Khởi tạo giá trị mặc định trong hàm không có tham số

Nếu bạn muốn viết một hàm không có tham số nhưng vẫn khởi tạo giá trị mặc định, bạn có thể trả về một đối tượng chứa các giá trị mặc định.

Ví dụ:

function createDefaultPerson() {
    return {
        name: "Unknown", // Giá trị mặc định
        age: 0           // Giá trị mặc định
    };
}

// Sử dụng
const person = createDefaultPerson();
console.log(person.name); // Output: Unknown
console.log(person.age);  // Output: 0

Khởi tạo giá trị mặc định khi truyền tham số cho hàm

Nếu bạn muốn cung cấp giá trị mặc định cho các tham số của hàm, JavaScript hỗ trợ cú pháp default parameters.

Ví dụ:

function createPerson(name = "Unknown", age = 0) {
    return { name, age };
}

// Sử dụng
const person1 = createPerson(); // Không truyền tham số
console.log(person1.name); // Output: Unknown
console.log(person1.age);  // Output: 0

const person2 = createPerson("Alice", 25); // Truyền tham số
console.log(person2.name); // Output: Alice
console.log(person2.age);  // Output: 25

Khởi tạo giá trị mặc định bằng toán tử || hoặc ??

Bạn có thể sử dụng toán tử || hoặc ?? để kiểm tra và gán giá trị mặc định nếu giá trị hiện tại là null, undefined, hoặc falsy.

• Toán tử ||: Gán giá trị mặc định nếu giá trị hiện tại là falsy (null, undefined, 0, false, NaN, "").
• Toán tử ??: Gán giá trị mặc định chỉ khi giá trị hiện tại là null hoặc undefined.

Ví dụ:

function greet(name) {
    name = name || "Guest"; // Gán giá trị mặc định nếu name là falsy
    console.log(`Hello, ${name}!`);
}

greet();         // Output: Hello, Guest!
greet("Alice");  // Output: Hello, Alice!

// Sử dụng toán tử ??
function greetSafely(name) {
    name = name ?? "Guest"; // Gán giá trị mặc định nếu name là null/undefined
    console.log(`Hello, ${name}!`);
}

greetSafely(0); // Output: Hello, 0!
greetSafely(null); // Output: Hello, Guest!

Khởi tạo giá trị mặc định trong object destructuring

Khi sử dụng destructuring để lấy giá trị từ một object, bạn có thể gán giá trị mặc định nếu thuộc tính không tồn tại hoặc có giá trị undefined.

Ví dụ:

function getUserInfo(user) {
    const { name = "Unknown", age = 0 } = user;
    console.log(`Name: ${name}, Age: ${age}`);
}

// Sử dụng
getUserInfo({});               // Output: Name: Unknown, Age: 0
getUserInfo({ name: "Alice" }); // Output: Name: Alice, Age: 0
getUserInfo({ name: "Bob", age: 30 }); // Output: Name: Bob, Age: 30

Khởi tạo giá trị mặc định trong mảng

Bạn cũng có thể khởi tạo giá trị mặc định cho các phần tử trong mảng bằng cách sử dụng destructuring.

Ví dụ:

function getCoordinates(coords) {
    const [x = 0, y = 0] = coords;
    console.log(`X: ${x}, Y: ${y}`);
}

// Sử dụng
getCoordinates([]);          // Output: X: 0, Y: 0
getCoordinates([5]);         // Output: X: 5, Y: 0
getCoordinates([10, 20]);    // Output: X: 10, Y: 20

Khởi tạo giá trị mặc định trong module

Nếu bạn đang xuất/nhập dữ liệu giữa các module, bạn có thể cung cấp giá trị mặc định khi import.

Ví dụ:

// file: config.js
export const defaultConfig = {
    theme: "light",
    language: "en"
};

// file: app.js
import { defaultConfig } from './config.js';

function initializeApp(config = defaultConfig) {
    console.log(`Theme: ${config.theme}, Language: ${config.language}`);
}

initializeApp(); // Output: Theme: light, Language: en

Khởi tạo giá trị mặc định trong Promise

Khi làm việc với Promise, bạn có thể cung cấp giá trị mặc định nếu Promise bị reject hoặc không trả về giá trị mong muốn.

Ví dụ:

function fetchData() {
    return Promise.resolve(null); // Giả sử API trả về null
}

fetchData()
    .then(data => data ?? "Default Value") // Gán giá trị mặc định nếu data là null/undefined
    .then(result => console.log(result)); // Output: Default Value

Tổng kết

Dưới đây là các phương pháp phổ biến để khởi tạo giá trị mặc định trong JavaScript:

1. Constructor: Khởi tạo giá trị mặc định trong constructor của lớp.
2. Thuộc tính mặc định: Khai báo giá trị mặc định trực tiếp trong định nghĩa class.
3. Hàm không có tham số: Trả về một đối tượng chứa giá trị mặc định.
4. Default parameters: Cung cấp giá trị mặc định cho tham số của hàm.
5. Toán tử || hoặc ??: Kiểm tra và gán giá trị mặc định.
6. Object destructuring: Gán giá trị mặc định khi destructuring object.
7. Array destructuring: Gán giá trị mặc định khi destructuring array.
8. Module: Xuất/nhập giá trị mặc định giữa các module.
9. Promise: Cung cấp giá trị mặc định khi xử lý Promise.

Tùy thuộc vào ngữ cảnh và yêu cầu cụ thể, bạn có thể chọn phương pháp phù hợp nhất để khởi tạo giá trị mặc định trong JavaScript.

Lưu ý: Việc khởi tạo giá trị mặc định giúp tránh các lỗi liên quan đến việc truy cập các thuộc tính chưa được định nghĩa, đồng thời đảm bảo rằng ứng dụng luôn hoạt động ổn định.