Computed property names trong JavaScript là gì? Tạo dynamic key trong JavaScript

Trước đây, Khi muốn thêm một property cho object, chúng ta có thể thực hiện bằng 2 cách sau:

// 1. Bracket notation
const animal = {};
animal['dog'] = '🐶';

// 2. Dot notation
const animal = {dog: '🐶'};

console.log(animal.dog); // 🐶

Trong một số trường hợp, có thể chúng ta muốn tạo hay chỉnh sửa các dynamic property names trong object. Chúng ta phải tạo một object và sau đó sử dụng bracket notation [] rồi gán giá trị cho nó. Dưới đây là một ví dụ:

const key = 'name';
const value = 'bear'; // 🐻

const animal = {};
animal[key] = value;

console.log(animal.name); // bear 

Với ES6, feature Computed property names cho phép chúng ta có thể dễ dàng tạo các dynamic property names ở ngay trong một object sử dụng object literal notation {} mà không cần khởi tạo object như ví dụ trên👍.

Chúng ta chỉ cần sử dụng [Tên thuộc tính] trong object là xong.

const key = 'name';
const value = 'bear'; // 🐻

const animal = {
  [key]: value
};

console.log(animal.name); // bear 

Với việc sử dụng Computed property names, chúng ta có thể truyền vào key này một expression. Mình lấy ví dụ như sau:

const animal = {
  ['animal_' + 1]: '🐇',
};

console.log(animal.animal_1); // 🐇

Chúng ta còn có thể sử dụng template literals trong []:

const number = 2;
const animal = {
  [`animal_${number}`]: '🦄',
};

console.log(animal[`animal_${number}`]); // 🦄

Một trường hợp sử dụng computed property names nữa mình muốn giới thiệu trong bài viết này, đó là khi chúng ta update state với value của input trong React 😁.

Giả sử mình có hai input sau:

<form>
  <label> Email: </label>
  <input type="email" name="email" />
  <label> Password: </label>
  <input type="password" name="password" />
</form>

Khi không sử dụng computed property names chúng ta sẽ phải tạo 2 function như sau:

handleChangeEmail(event) {
  this.setState({email: event.target.value});
}
handleChangePassword(event) {
  this.setState({password: event.target.value});
}

<form>
  <label> Email: </label>
  <input onChange={this.handleChangeEmail} name="email" />
  <label> Password: </label>
  <input onChange={this.handleChangePassword} name="password" />
</form>

Giả sử chúng ta phải xử lý một form đăng ký tài khoản với các input là username, password, email, address. Nếu làm theo cách này ta phải tạo bấy nhiêu function handleChange 🤷‍♂️ rất mất thời gian.

Việc xử lý multiple input sẽ nhanh chóng hơn với computed property names. Ta sẽ chỉ cần tạo một function để xử lý toàn bộ input trên như sau:

handleChange = (e) => {
    const { value, name } = e.target;

    this.setState({ [name]: value });
};

Ở đoạn code trên name và value là các thuộc tính của một input các bạn có thể console.log(e.target) và xem thử.

Trong hai input mình đã đặt name="email" và name="password" trùng với key trong state. Nhờ đó nếu ta nhập giá trị vào input password nó sẽ update giá trị cho property là password.

Bằng cách này ta có thể viết một hàm và sử dụng cho nhiều input ^^.

<form>
  <label> Email: </label>
  <input onChange={this.handleChange} name="email" />
  <label> Password: </label>
  <input onChange={this.handleChange} name="password" />
</form>

Hy vọng bài viết giúp ích cho các bạn😁. Chúc các bạn học tốt!