Thuộc tính động

Trong JavaScript, khi làm việc với đối tượng (object), bạn có thể cần truy cập hoặc gán giá trị cho các thuộc tính (property) của đối tượng một cách động, tức là tên của thuộc tính không cố định mà có thể thay đổi trong quá trình chạy chương trình. Có hai cách chính để truy cập và gán giá trị cho thuộc tính động của một đối tượng:

1. Truy cập và gán giá trị bằng dấu chấm (.)

Cách này được sử dụng khi bạn biết trước tên thuộc tính và nó không thay đổi.

const person = {
    name: 'John',
    age: 30
};

// Truy cập giá trị
console.log(person.name); // 'John'

// Gán giá trị mới
person.age = 31;
console.log(person.age); // 31

2. Truy cập và gán giá trị bằng dấu ngoặc vuông ([])

Cách này hữu ích khi bạn không biết trước tên thuộc tính hoặc tên thuộc tính là một biến, và cần phải truy cập hoặc gán giá trị một cách động.

const person = {
    name: 'John',
    age: 30
};

// Truy cập giá trị bằng tên thuộc tính động
const propName = 'name';
console.log(person[propName]); // 'John'

// Gán giá trị mới cho thuộc tính động
const newPropName = 'age';
person[newPropName] = 31;
console.log(person.age); // 31

2.1. Truy cập thuộc tính động

Truy cập thuộc tính động rất hữu ích khi bạn cần lặp qua các thuộc tính của đối tượng, hoặc khi tên thuộc tính được xác định ở thời gian chạy.

const car = {
    brand: 'Toyota',
    model: 'Corolla',
    year: 2020
};

function getCarInfo(prop) {
    return car[prop];
}

console.log(getCarInfo('brand')); // 'Toyota'
console.log(getCarInfo('model')); // 'Corolla'

2.2. Gán giá trị động

Bạn có thể thêm hoặc cập nhật thuộc tính của đối tượng một cách động.

const user = {};

function addUserProperty(propName, value) {
    user[propName] = value;
}

addUserProperty('name', 'Alice');
addUserProperty('age', 25);

console.log(user); // { name: 'Alice', age: 25 }

2.3. Truy cập thuộc tính với tên chứa khoảng trắng hoặc ký tự đặc biệt

Khi tên thuộc tính chứa khoảng trắng hoặc các ký tự đặc biệt, bạn phải sử dụng cú pháp dấu ngoặc vuông ([]).

const book = {
    'book title': 'JavaScript: The Good Parts',
    'author-name': 'Douglas Crockford'
};

console.log(book['book title']); // 'JavaScript: The Good Parts'
console.log(book['author-name']); // 'Douglas Crockford'

3. Sử dụng biểu thức trong tên thuộc tính

Cú pháp dấu ngoặc vuông ([]) còn cho phép bạn sử dụng biểu thức trong tên thuộc tính, tạo ra các tên thuộc tính một cách linh hoạt.

const prefix = 'data-';
const user = {
    [`${prefix}name`]: 'Alice',
    [`${prefix}age`]: 25
};

console.log(user['data-name']); // 'Alice'
console.log(user['data-age']); // 25

4. Gán thuộc tính động trong khi khởi tạo đối tượng

Bạn cũng có thể sử dụng biểu thức để tạo thuộc tính động ngay trong quá trình khởi tạo đối tượng.

const key1 = 'username';
const key2 = 'email';

const user = {
    [key1]: 'john_doe',
    [key2]: 'john@example.com'
};

console.log(user); // { username: 'john_doe', email: 'john@example.com' }

5. Truy cập và gán giá trị vào đối tượng lồng nhau (nested objects)

• Khi làm việc với các đối tượng lồng nhau, bạn có thể cần truy cập hoặc gán giá trị vào thuộc tính của đối tượng con.

const company = {
    name: 'BigAppTech',
    location: {
        city: 'New York',
        country: 'USA'
    }
};

// Truy cập giá trị trong đối tượng lồng nhau
console.log(company.location.city); // 'New York'

// Gán giá trị vào đối tượng lồng nhau
company.location.city = 'San Francisco';
console.log(company.location.city); // 'San Francisco'

• Với thuộc tính động trong đối tượng lồng nhau:

const propName = 'city';
console.log(company.location[propName]); // 'San Francisco'

company.location[propName] = 'Los Angeles';
console.log(company.location.city); // 'Los Angeles'

Kết luận

• Truy cập và gán giá trị cho thuộc tính động của đối tượng giúp tăng tính linh hoạt khi làm việc với đối tượng trong JavaScript.
• Sử dụng cú pháp dấu chấm (.) khi tên thuộc tính cố định và đơn giản.
• Sử dụng cú pháp dấu ngoặc vuông ([]) khi tên thuộc tính động, chứa khoảng trắng, hoặc khi bạn cần sử dụng biểu thức để xác định tên thuộc tính.