Style code trong Javascript, Nodejs Phần 1

Trong loạt bài chia sẻ về lập trình. Đầu tiên mình xin được chia sẻ với các bạn một số lưu ý style code trong javascript hay nodejs. Những lưu ý nhỏ sẽ giúp code của bạn trong chuyên nghiệp hơn và hoạt động chính xác hơn

I. Types

1. Primitives: Khi bạn truy cập các kiểu dữ liệu nguyên thủy, bạn làm việc trực tiếp với giá trị của biến (tham trị).

  • string
  • number
  • boolean
  • null
  • undefined
const foo = 1;
let bar = foo;

bar = 9;

console.log(foo, bar); // => 1, 9

2. Complex: Khi bạn làm việc với các kiểu dữ liệu phức tạp, bạn làm việc gián tiếp với giá trị của biến thông qua địa chỉ vùng nhớ của nó (tham chiếu).

  • object
  • array
  • function
const foo = [1, 2];
const bar = foo;

bar[0] = 9;

console.log(foo[0], bar[0]); // => 9, 9

II. References

1. Sử dụng const cho khai báo hằng; tránh sử dụng var.

Khi sử dụng cost chúng ta không thể thay đổi giá trị của nó. Điều này giúp chúng ta ngăn chặn các lỗi có thể xảy ra

```javascript
// Không tốt
var a = 1;
var b = 2;

// Tốt
const a = 1;
const b = 2;
```

2. Để thay đổi các thông số, sử dụng let và tránh sử dụng var.

Vì let nó chỉ có nghĩa trong một phạm vi nhất định (Block-Scope), không giống như var có nghĩa trong một hàm (Funciton-Scope).

```javascript
// Không tốt
var count = 1;
if (true) {
  count += 1;
}

// Tốt.
let count = 1;
if (true) {
  count += 1;
}
```

3. let và const có giá trị trong một phạm vi nhất định (Block-Scope).

{
  let a = 1;
  const b = 1;
}
console.log(a); // ReferenceError Khi ngoài phạm vị của biến sẽ không thể sử dụng biến đó.
console.log(b); // ReferenceError Khi ngoài phạm vị của biến sẽ không thể sử dụng biến đó.

III. Objects

1. Dùng {} để tạo một đối tượng.

// Không tốt
const item = new Object();

// Tốt
const item = {};

2. Không sử dụng các từ khoá mặc định để làm thuộc tính.

// Không tốt
const superman = {
  default: { clark: 'kent' },
  private: true,
};

// Tốt
const superman = {
  defaults: { clark: 'kent' },
  hidden: true,
};

3. Dùng những từ ngữ đồng nghĩa với thuật ngử dành riêng.

// Không tốt
const superman = {
  class: 'alien', // `class` từ khoá của hệ thống
};

// Không tốt
const superman = {
  klass: 'alien', `klass` không có ỹ nghĩa gì trong trường hợp này
};

// Tốt
const superman = {
  type: 'alien',
};

4. Sử dụng tên thuộc tính khi tạo đối tượng với tên thuộc tính động.

Việc này giúp chúng ta định nghĩa tất cả các thuộc tính của đối tượng một lần duy nhất.

```javascript

function getKey(k) {
  return `a key named ${k}`;
}

// Không tốt
const obj = {
  id: 5,
  name: 'San Francisco',
};
obj[getKey('enabled')] = true;

// 
const obj = {
  id: 5,
  name: 'San Francisco',
  [getKey('enabled')]: true,
};
```

5. Sử dụng cách khai báo phương thức rút ngắn (Property Value Shorthand)

// Không tốt
const atom = {
  value: 1,

  addValue: function (value) {
    return atom.value + value;
  },
};

// Tốt
const atom = {
  value: 1,

  addValue(value) {
    return atom.value + value;
  },
};

6. Sử dụng cách khai báo rút ngắn cho thuộc tính (Object Method).

Cách viết ngắn gọn và dể hiểu hơn.

```javascript
const lukeSkywalker = 'Luke Skywalker';

// bad
const obj = {
  lukeSkywalker: lukeSkywalker,
};

// good
const obj = {
  lukeSkywalker,
};
```

7. Gom nhóm các thuộc tính được khai báo rút ngắn đặt lên đầu của mỗi đối tượng.

const anakinSkywalker = 'Anakin Skywalker';
const lukeSkywalker = 'Luke Skywalker';

// Không tốt
const obj = {
  episodeOne: 1,
  twoJediWalkIntoACantina: 2,
  lukeSkywalker,
  episodeThree: 3,
  mayTheFourth: 4,
  anakinSkywalker,
};

// Tốt
const obj = {
  lukeSkywalker, // Thuộc tính được khai báo ngắn gọn
  anakinSkywalker, // Thuộc tính được khai báo ngắn gọn
  episodeOne: 1,
  twoJediWalkIntoACantina: 2,
  episodeThree: 3,
  mayTheFourth: 4,
};

Trên đây mình vừa chia sẻ 3 nhóm lưu ý về Types, References, Objects. Cảm ơn các bạn đã theo dõi

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

Trả lời 4

Your email address will not be published. Required fields are marked *


Style code trong Javascript, Nodejs Phần 2 - kienthuc24.com

Style code trong Javascript, Nodejs Phần 2 - kienthuc24.com

[…] Style code trong Javascript, Nodejs Phần 1 […]

Style code trong Javascript, Nodejs Phần 3 - kienthuc24.com

Style code trong Javascript, Nodejs Phần 3 - kienthuc24.com

[…] Style code trong Javascript, Nodejs Phần 1 […]

Style code trong Javascript, Nodejs Phần 2 - kienthuc24.com

Style code trong Javascript, Nodejs Phần 2 - kienthuc24.com

[…] 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ổ […]

Style code trong Javascript, Nodejs Phần 4 - kienthuc24.com

Style code trong Javascript, Nodejs Phần 4 - kienthuc24.com

[…] Style code trong Javascript, Nodejs Phần 2 – kienthuc24.com trong Style code trong Javascript, Nodejs Phần 1 […]