Style code trong Javascript, Nodejs Phần 2

Tiếp theo bài Style code trong Javascript, Nodejs mình tiếp tục hướng dẫn các bạn các đối tượng khác trong javascript, Nodejs

Các bạn chưa theo dõi phần 1 hãy xem lại để nắm bắt thêm những thông tin bổ ích

I. Arrays

1. Sử dụng [] để khai báo một mảng

// Không tốt
const items = new Array();

// Tốt
const items = [];

2. Dùng Array#push để thêm một phần từ vào mảng thay vì thêm trực tiếp

const someStack = [];

// Không tốt
someStack[someStack.length] = 'abracadabra';

// Tốt
someStack.push('abracadabra');

3. Dùng ... (Spreads) để sao chép mảng

// Không tốt
const len = items.length;
const itemsCopy = [];
let i;

for (i = 0; i < len; i++) {
  itemsCopy[i] = items[i];
}

// Tốt
const itemsCopy = [...items];

4. Dùng Array#from để chuyển đổi từ đối tượng sang mảng

const foo = document.querySelectorAll('.foo');
const nodes = Array.from(foo);

II. Destructuring

1. Dùng Destructuring để chuyển giá trị từng thuộc tính của đối tượng vào một biến.

Điều này giúp giảm bớt việc dùng các biến tạm thời để lưu các thuộc tính trong đối tượng.

// Không tốt
function getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;

  return `${firstName} ${lastName}`;
}

// Tốt
function getFullName(obj) {
  const { firstName, lastName } = obj;
  return `${firstName} ${lastName}`;
}

// Tốt nhất
function getFullName({ firstName, lastName }) {
  return `${firstName} ${lastName}`;
}

2. Dùng destructuring cho mảng

const arr = [1, 2, 3, 4];

// Không tốt
const first = arr[0];
const second = arr[1];

// Tốt
const [first, second] = arr;

3. Dùng destructuring cho nhiều giá trị trả về, không dùng destructuring array.

Cách dùng này giúp chúng ta có thể thêm một thuộc tính mới hoặc sắp xếp thứ tự trả về mà không gây ảnh hưởng cho các hàm khác.

```javascript
// Không tốt
function processInput(input) {
  // then a miracle occurs
  return [left, right, top, bottom];
}

// the caller needs to think about the order of return data
const [left, __, top] = processInput(input);

// Tốt
function processInput(input) {
  // then a miracle occurs
  return { left, right, top, bottom };
}

// the caller selects only the data they need
const { left, right } = processInput(input);
```

III. Strings

1. Sử dụng dầu nháy đơn '' đối với chuỗi.

// Không tốt
const name = "Capt. Janeway";

// Tốt
const name = 'Capt. Janeway';

2. Khi chuỗi dài hơn 100 kí tự nên chia nhiều dòng và nối chuỗi đó lại

3. Ghi chú: Việc áp dụng nối chuỗi nhiều sẽ gây ảnh hưởng tới hiệu năng

// Không tốt
const errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';

// Không tốt
const errorMessage = 'This is a super long error that was thrown because \
of Batman. When you stop to think about how Batman had anything to do \
with this, you would get nowhere \
fast.';

// Tốt
const errorMessage = 'This is a super long error that was thrown because ' +
  'of Batman. When you stop to think about how Batman had anything to do ' +
  'with this, you would get nowhere fast.';

4. Dùng template thay vì dùng cách nối chuỗi.

Dùng template sẽ giúp chúng ta dể đọc, cú pháp ngắn gọn.

```javascript
// Không tốt
function sayHi(name) {
  return 'How are you, ' + name + '?';
}

// Không tốt
function sayHi(name) {
  return ['How are you, ', name, '?'].join();
}

// Tốt
function sayHi(name) {
  return `How are you, ${name}?`;
}
```

5. Không bao giờ sử dụng eval() cho chuỗi.

Loạt bài hướng dẫn:

• Style code trong Javascript, Nodejs Phần 1
• Style code trong Javascript, Nodejs Phần 3