Định hướng Lối viết JavaScript của Airbnb() {

Một cách tiếp cận hợp lý đối với JavaScript

Lưu ý của người dịch: Bản dịch này, với nỗ lực truyền đạt nội dung bằng tiếng Việt nhiều nhất có thể, đã dịch sang tiếng Việt các thuật ngữ, và/hoặc các từ, cụm từ mà thông thường không được dịch, như: "style guide", "object", "polyfill", v.v. Nếu bạn cảm thấy không quen thuộc hoặc khó khăn trong việc hiểu một số từ trong bản dịch này, hoặc muốn biết các từ tương ứng trong Tiếng Anh, vui lòng tham khảo phần Danh mục các Thuật ngữ.

Lưu ý: Định hướng này giả định bạn đang sử dụng Babel, và đòi hỏi bạn sử dụng babel-preset-airbnb hoặc một bộ tương đương. Nó cũng giả định rằng bạn đang cài bộ trợ năng cho ứng dụng của bạn, như airbnb-browser-shims hoặc một bộ tương đương.

Định hướng này cũng được dịch sang các ngôn ngữ khác. Xem phần Dịch.

Các Định hướng Lối viết Khác

Mục lục

Các Kiểu giá trị
Các Tham chiếu
Các Đối tượng
Các Mảng
Trích xuất
Các Chuỗi
Các Hàm
Các Hàm mũi tên
Các Lớp & các Hàm tạo
Các Mô-đun
Các Đối tượng duyệt and các Hàm sinh trị
Các Thuộc tính
Các Biến
Sự kéo lên
Các Toán tử So sánh và Sự bằng nhau
Các Khối
Các Câu lệnh Điều khiển
Các Chú thích
Khoảng trắng
Các Dấu phẩy
Các Dấu chấm phẩy
Sự ép kiểu
Các Quy ước Đặt tên
Các Hàm truy cập
Các Sự kiện
jQuery
Tính tương thích của ECMAScript 5
Lối viết ECMAScript 6+ (ES 2015+)
Thư viện Tiêu chuẩn
Sự kiểm thử
Hiệu suất
Các Tài nguyên
Thực tế Áp dụng
Danh mục các Thuật ngữ
Dịch
Về Hướng dẫn Lối viết JavaScript
Nói chuyện với Chúng tôi về JavaScript
Những Người đóng góp
Giấy phép
Các Sửa đổi

Các Kiểu giá trị

1.1 Kiểu nguyên thủy: Khi bạn truy cập một giá trị kiểu nguyên thủy, bạn làm việc trực tiếp trên giá trị của nó.
- string
- number
- boolean
- null
- undefined
- symbol
- bigint
```
const foo = 1;
let bar = foo;

bar = 9;

console.log(foo, bar); // => 1, 9
```
- Sự thiếu hỗ trợ cho các Symbol và BigInt không thể được lấp đầy bởi các bộ trợ năng một cách toàn diện, do đó, chúng không nên được sử dụng khi hướng đến các trình duyệt/môi trường không có hỗ trợ sẵn.

1.2 Kiểu phức tạp: Khi bạn truy cập một giá trị kiểu phức tạp, bạn làm việc trên tham chiếu giá trị của nó.
- object
- array
- function
```
const foo = [1, 2];
const bar = foo;

bar[0] = 9;

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

⬆ về đầu trang

Các Tham chiếu

2.1 Sử dụng const đối với tất cả các tham chiếu; tránh sử dụng var. eslint: prefer-const, no-const-assign

Tại sao? Điều này đảm bảo rằng bạn không thể gán lại các tham chiếu, việc có thể gây ra các lỗi và gây khó khăn cho sự đọc hiểu mã nguồn.
```
// không tốt
var a = 1;
var b = 2;

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

2.2 Nếu bạn bắt buộc phải gán lại các tham chiếu, sử dụng let, thay vì var. eslint: no-var

Tại sao? let thuộc phạm vi khối mà nó được khởi tạo, thay vì thuộc phạm vi hàm như var.
```
// không tốt
var count = 1;
if (true) {
  count += 1;
}

// tốt, sử dụng let.
let count = 1;
if (true) {
  count += 1;
}
```

2.3 Lưu ý rằng cả let và const đều thuộc phạm vi khối, còn var thuộc phạm vi hàm.
```
// const và let chỉ tồn tại trong phạm vi khối tạo ra chúng.
{
  let a = 1;
  const b = 1;
  var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // In ra 1
```
Trong đoạn mã trên, bạn có thể thấy rằng lỗi ReferenceError xảy ra khi truy cập a và b, trong khi c vẫn là số đã gán. Nguyên nhân là vì a và b thuộc phạm vi khối, còn c thuộc phạm vi hàm chứa đoạn mã trên.

⬆ về đầu trang

Các Đối tượng

3.1 Sử dụng cú pháp nguyên văn {} để khởi tạo đối tượng. eslint: no-new-object
```
// không tốt
const item = new Object();

// tốt
const item = {};
```

3.2 Sử dụng các tên được tính của thuộc tính [key()] khi tạo các đối tượng có các tên của thuộc tính là động.

Tại sao? Chúng cho phép bạn định nghĩa tất cả các thuộc tính của một đối tượng cùng một chỗ.

function getKey(k) {
  return `tên của thuộc tính là ${k}`;
}

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

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

3.3 Sử dụng cú pháp định nghĩa phương thức rút gọn để định nghĩa các phương thức của đối tượng. eslint: object-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;
  },
};

3.4 Sử dụng cú pháp định nghĩa thuộc tính rút gọn để định nghĩa các thuộc tính của đối tượng. eslint: object-shorthand

Tại sao? Nó ngắn gọn và súc tích.
```
const lukeSkywalker = 'Luke Skywalker';

// không tốt
const obj = {
  lukeSkywalker: lukeSkywalker,
};

// tốt
const obj = {
  lukeSkywalker,
};
```

3.5 Gom tất cả các thuộc tính rút gọn ở trên cùng khi khai báo đối tượng.

Tại sao? Điều này giúp bạn dễ dàng biết được thuộc tính nào sử dụng cú pháp rút gọn.

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,
  anakinSkywalker,
  episodeOne: 1,
  twoJediWalkIntoACantina: 2,
  episodeThree: 3,
  mayTheFourth: 4,
};

3.6 Chỉ sử dụng dấu lược ' ' cho các thuộc tính có định danh không hợp lệ. eslint: quote-props

Tại sao? Nhìn chung, chúng ta sẽ thấy nó dễ đọc hơn nhiều. Nó cải thiện nhấn mạnh cú pháp, và nó cũng giúp việc tối ưu hóa bằng các trình thực thi JS hiệu quả hơn.
```
// không tốt
const bad = {
  'foo': 3,
  'bar': 4,
  'một-cái-tên': 5,
};

// tốt
const good = {
  foo: 3,
  bar: 4,
  'một-cái-tên': 5,
};
```

3.7 Không gọi các phương thức Object.prototype một cách trực tiếp, ví dụ như hasOwnProperty, propertyIsEnumerable, và isPrototypeOf. eslint: no-prototype-builtins

Tại sao? Những phương thức này có thể bị thay thế bởi các thuộc tính của một đối tượng - như { hasOwnProperty: false } - hoặc, đối tượng có thể là một đối tượng rỗng (Object.create(null)).

// không tốt
console.log(object.hasOwnProperty(key));

// tốt
console.log(Object.prototype.hasOwnProperty.call(object, key));

// tốt nhất
const has = Object.prototype.hasOwnProperty; // lưu tạm phương thức một lần, dùng cho cả mô-đun.
console.log(has.call(object, key));
/* hoặc */
import has from 'has'; // https://www.npmjs.com/package/has
console.log(has.call(object, key));

3.8 Ưu tiên sử dụng cú pháp liệt kê ... so với Object.assign để tạo bản sao nhanh của một đối tượng. Sử dụng toán tử còn-lại ... để tạo một đối tượng mới với một số thuộc tính đã bị loại bỏ. eslint: prefer-object-spread

// rất không tốt
const original = { a: 1, b: 2 };
const copy = Object.assign(original, { c: 3 }); // cái này làm biến đổi `original` ಠ_ಠ
delete copy.a; // cái này cũng vậy

// không tốt
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }

// tốt
const original = { a: 1, b: 2 };
const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 }

const { a, ...noA } = copy; // noA => { b: 2, c: 3 }

⬆ về đầu trang

Các Mảng

4.1 Sử dụng cú pháp nguyên văn [] để khởi tạo mảng. eslint: no-array-constructor
```
// không tốt
const items = new Array();

// tốt
const items = [];
```

4.2 Sử dụng Array#push, thay vì phép gán, để thêm các mục cho một mảng.

const someStack = [];

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

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

4.3 Sử dụng toán tử liệt kê ... để sao nhanh một mảng.

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

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

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

4.4 Để chuyển đổi một đối tượng khả duyệt thành một mảng, sử dụng toán tử liệt kê ... thay vì Array.from.

const foo = document.querySelectorAll('.foo');

// tốt
const nodes = Array.from(foo);

// tốt nhất
const nodes = [...foo];

4.5 Sử dụng Array.from để chuyển đổi một đối tượng giống-mảng thành một mảng.

const arrLike = { 0: 'foo', 1: 'bar', 2: 'baz', length: 3 };

// không tốt
const arr = Array.prototype.slice.call(arrLike);

// tốt
const arr = Array.from(arrLike);

4.6 Sử dụng Array.from, thay vì toán tử liệt kê ..., để ánh xạ một đối tượng khả duyệt, vì nó không tạo ra một mảng trung gian.
```
// không tốt
const baz = [...foo].map(bar);

// tốt
const baz = Array.from(foo, bar);
```

4.7 Sử dụng các lệnh return cho các hàm gọi lại dùng cho các phương thức của mảng. Được phép bỏ qua return nếu phần thân hàm chỉ gồm một câu lệnh trả về một biểu thức không có hiệu ứng phụ, theo quy tắc 8.2. eslint: array-callback-return

// tốt
[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
});

// tốt
[1, 2, 3].map((x) => x + 1);

// không tốt - không có giá trị trả về đồng nghĩa với `acc` sẽ trở thành undefined sau lượt duyệt đầu tiên
[[0, 1], [2, 3], [4, 5]].reduce((acc, item, index) => {
  const flatten = acc.concat(item);
});

// tốt
[[0, 1], [2, 3], [4, 5]].reduce((acc, item, index) => {
  const flatten = acc.concat(item);
  return flatten;
});

// không tốt
inbox.filter((msg) => {
  const { subject, author } = msg;
  if (subject === 'Con chim nhại') {
    return author === 'Harper Lee';
  } else {
    return false;
  }
});

// tốt
inbox.filter((msg) => {
  const { subject, author } = msg;
  if (subject === 'Con chim nhại') {
    return author === 'Harper Lee';
  }

  return false;
});

4.8 Sử dụng dấu ngắt dòng trước và sau các dấu đóng và mở ngoặc vuông nếu một mảng nằm trên nhiều dòng.

// không tốt
const arr = [
  [0, 1], [2, 3], [4, 5],
];

const objectInArray = [{
  id: 1,
}, {
  id: 2,
}];

const numberInArray = [
  1, 2,
];

// tốt
const arr = [[0, 1], [2, 3], [4, 5]];

const objectInArray = [
  {
    id: 1,
  },
  {
    id: 2,
  },
];

const numberInArray = [
  1,
  2,
];

⬆ về đầu trang

Trích xuất

5.1 Sử dụng trích xuất đối tượng khi truy cập và sử dụng nhiều thuộc tính của một đối tượng. eslint: prefer-destructuring

Tại sao? Trích xuất giúp việc tạo các tham chiếu đến các thuộc tính trở nên dễ dàng hơn và hạn chế việc truy cập một đối tượng lặp đi lặp lại. Việc truy cập đối tượng lặp đi lặp lại tạo ra nhiều đoạn mã trùng lặp hơn, cần phải đọc nhiều hơn, và tăng khả năng xảy ra nhầm lẫn. Trích xuất đối tượng cũng tạo nên một ý tưởng về cấu trúc của đối tượng được sử dụng trong khối, thay vì cần phải đọc toàn bộ khối để xác định những thuộc tính được sử dụng.
```
// không tốt
function getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;

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

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

// best
function getFullName({ firstName, lastName }) {
  return `${firstName} ${lastName}`;
}
```

5.2 Hãy sử dụng trích xuất mảng. eslint: prefer-destructuring

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

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

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

5.3 Sử dụng trích xuất đối tượng khi có nhiều giá trị trả về, thay vì trích xuất mảng.

Tại sao? Bạn có thể thêm các thuộc tính mới qua thời gian hay thay đổi thứ tự các thứ mà không lo làm hỏng các phép gọi trước đó.

// không tốt
function processInput(input) {
  // khi một phép màu xảy ra
  return [left, right, top, bottom];
}

// người gọi cần nghĩ về thứ tự của giá trị trả về
const [left, __, top] = processInput(input);

// tốt
function processInput(input) {
  // khi một phép màu xảy ra
  return { left, right, top, bottom };
}

// người gọi chỉ cần chọn giá trị mà họ muốn
const { left, top } = processInput(input);

⬆ về đầu trang

Các Chuỗi

6.1 Sử dụng dấu lược cho các chuỗi. eslint: quotes

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

// không tốt - các nguyên văn mẫu nên chứa sự biến đổi chuỗi hoặc ngắt dòng
const name = `Capt. Janeway`;

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

6.2 Các chuỗi, dù khiến cho độ dài của dòng lớn hơn 100 ký tự, không nên được viết thành nhiều dòng sử dụng ghép chuỗi.

Tại sao? Các chuỗi bị chia nhỏ rất khó để làm việc cùng và khiến việc tìm kiếm trong mã nguồn trở nên khó hơn.

// không tốt
const errorMessage = 'Đây là một lỗi rất dài mà được ném ra bởi \
Người Dơi. Khi bạn ngừng nghĩ về việc tại sao Người Dơi chẳng có liên \
quan gì với thứ này, bạn sẽ vẫn chẳng đi đến đâu với \
đâu.';

// không tốt
const errorMessage = 'Đây là một lỗi rất dài mà được ném ra bởi' +
    'Người Dơi. Khi bạn ngừng nghĩ về việc tại sao Người Dơi chẳng có liên' +
    'quan gì với thứ này, bạn sẽ vẫn chẳng đi đến đâu với' +
    'đâu.';

// tốt
const errorMessage = 'Đây là một lỗi rất dài mà được ném ra bởi Người Dơi. Khi bạn ngừng nghĩ về việc tại sao Người Dơi chẳng có liên quan gì với thứ này, bạn sẽ vẫn chẳng đi đến đâu với đâu.';

6.3 Khi xây dựng các chuỗi theo một chu trình, sử dụng mẫu chuỗi thay vì ghép chuỗi. eslint: prefer-template template-curly-spacing

Tại sao? Các mẫu chuỗi cho bạn một cú pháp súc tích, dễ đọc với các ngắt dòng và các tính năng ghép chuỗi phù hợp.

// không tốt
function sayHi(name) {
  return 'Bạn có khỏe không, ' + name + '?';
}

// không tốt
function sayHi(name) {
  return ['Bạn có khỏe không, ', name, '?'].join();
}

// tốt
function sayHi(name) {
  return `Bạn có khỏe không, ${name}?`;
}

6.4 Không bao giờ sử dụng eval() cho một chuỗi, điều đó mở ra rất nhiều các lỗ hổng và rủi ro. eslint: no-eval

6.5 Không sử dụng các ký tự thoát trong một chuỗi khi không cần thiết. eslint: no-useless-escape

Tại sao? Các dấu chéo ngược làm giảm tính khả đọc, vì thế chúng chỉ nên xuất hiện khi cần.
```
// không tốt
const foo = '\'cái này\' \đư\ợc \"cho trong ngoặc\"';

// tốt
const foo = '\'cái này\' được "cho trong ngoặc"';
const foo = `tên của tôi là '${name}'`;
```

⬆ về đầu trang

Các Hàm

7.1 Sử dụng biểu thức hàm hữu danh thay vì khai báo hàm. eslint: func-style

Tại sao? Các khai báo hàm đều được kéo lên, đồng nghĩa với việc một hàm rất dễ có khả năng được sử dụng trước cả khi nó được định nghĩa trong tệp. Điều này làm giảm tính khả đọc và khả năng bảo trì. Nếu bạn thấy một hàm đủ lớn hoặc phức tạp đến mức ảnh hưởng đến việc đọc hiểu phần còn lại của tệp thì, có lẽ, nó nên được tách ra thành một mô-đun riêng! Đừng quên đặt tên cho biểu thức một cách rõ ràng, cho dù tên hàm có thể được suy ra từ tên biến chứa hàm đó (thường gặp ở các trình duyệt mới nhất hoặc các trình biên dịch như Babel). Điều này loại bỏ các nhận định liên quan đến ngăn xếp của một lỗi. (Cuộc thảo luận)
```
// không tốt
function foo() {
  // ...
}

// không tốt
const foo = function () {
  // ...
};

// tốt
// tên riêng của hàm, phân biệt với tên tham chiếu được gọi khi cần sử dụng
const short = function longUniqueMoreDescriptiveLexicalFoo() {
  // ...
};
```

7.2 Đặt các biểu thức hàm gọi tức thời trong ngoặc. eslint: wrap-iife

Tại sao? Một biểu thức hàm gọi tức thời mà một đơn vị riêng - đặt nó và dấu ngoặc dùng để gọi nó () trong ngoặc để biểu đạt nó một cách rõ ràng. Cũng cần biết là, trong cái thế giới mà mô-đun ngập tràn mọi nơi như bây giờ, bạn cũng chả mấy khi cần dùng đến biểu thức hàm gọi tức thời.
```
// biểu thức hàm gọi tức thời
(function () {
  console.log('Xin chào đến với thế giới. Hãy đi theo tôi.');
}());
```

7.3 Không bao giờ khai báo một hàm bên trong một khối không phải hàm (if, while, v.v.). Thay vào đó, hãy gán hàm cho một biến. Các trình duyệt đều sẽ cho phép bạn làm điều đó, nhưng tiếc là, cách mà chúng diễn dịch là khác nhau. eslint: no-loop-func

7.4 Ghi chú: ECMA-262 định nghĩa một khối là tập hợp một hoặc một vài câu lệnh. Một khai báo hàm không phải là một câu lệnh.

// không tốt
if (currentUser) {
  function test() {
    console.log('Đừng!');
  }
}

// tốt
let test;
if (currentUser) {
  test = () => {
    console.log('Tốt đó.');
  };
}

7.5 Không bao giờ đặt tên một tham số là arguments. Tham số này sẽ được ưu tiên hơn đối tượng arguments được cung cấp cho mỗi phạm vi hàm.
```
// không tốt
function foo(name, options, arguments) {
  // ...
}

// tốt
function foo(name, options, args) {
  // ...
}
```

7.6 Không bao giờ sử dụng arguments, thay vào đó, hãy sử dụng cú pháp còn-lại .... eslint: prefer-rest-params

Tại sao? ... định rõ các đối số mà bạn muốn lấy. Thêm nữa, kết quả của còn-lại là một mảng đúng nghĩa, thay vì chỉ là giống-mảng như arguments.
```
// không tốt
function concatenateAll() {
  const args = Array.prototype.slice.call(arguments);
  return args.join('');
}

// tốt
function concatenateAll(...args) {
  return args.join('');
}
```

7.7 Sử dụng tham số mặc định thay vì làm biến đổi các đối số truyền vào hàm.

// rất tệ
function handleThings(opts) {
  // Không! Chúng ta không nên biến đổi các đối số.
  // Cái tệ thứ hai: Nếu opts là kiểu sai, nó sẽ bị đổi thành một đối tượng.
  // Đó có thể là điều bạn muốn, nhưng nó thi thoảng gây ra lỗi.
  opts = opts || {};
  // ...
}

// vẫn tệ
function handleThings(opts) {
  if (opts === void 0) {
    opts = {};
  }
  // ...
}

// tốt
function handleThings(opts = {}) {
  // ...
}

7.8 Tránh gây ra hiệu ứng phụ với tham số mặc định.

Tại sao? Chúng khá là rối để có thể hình dung.

var b = 1;
// không tốt
function count(a = b++) {
  console.log(a);
}
count();  // 1
count();  // 2
count(3); // 3
count();  // 3

7.9 Luôn để các tham số mặc định ở sau cùng. eslint: default-param-last

// không tốt
function handleThings(opts = {}, name) {
  // ...
}

// tốt
function handleThings(name, opts = {}) {
  // ...
}

7.10 Không bao giờ sử dụng hàm tạo Function để tạo hàm. eslint: no-new-func

Tại sao? Tạo một hàm theo cách này cũng thực thi chuỗi giống như eval() vậy, thứ mà mở ra các lỗ hổng.
```
// không tốt
var add = new Function('a', 'b', 'return a + b');

// vẫn là không tốt
var subtract = Function('a', 'b', 'return a - b');
```

7.11 Sử dụng các dấu cách giữa các bộ phận hàm. eslint: space-before-function-paren space-before-blocks

Tại sao? Sự đồng nhất vẫn cứ là tốt, và bạn không cần phải thêm hoặc bớt dấu cách khi không đặt tên hàm.
```
// không tốt
const f = function(){};
const g = function (){};
const h = function() {};

// tốt
const x = function () {};
const y = function a() {};
```

7.12 Không bao giờ làm biến đổi các tham số. eslint: no-param-reassign

Tại sao? Việc can thiệp vào các đối tượng được truyền vào dưới dạng tham số có thể gây hiệu ứng phụ không mong muốn đối với biến tại tiến trình gọi.
```
// không tốt
function f1(obj) {
  obj.key = 1;
}

// tốt
function f2(obj) {
  const key = Object.prototype.hasOwnProperty.call(obj, 'key') ? obj.key : 1;
}
```

7.13 Không bao giờ gán lại các tham số. eslint: no-param-reassign

Tại sao? Việc gán lại các tham số có thể dẫn tới hành vi không mong muốn, đặc biệt là khi truy cập đối tượng arguments. Nó cũng có thể gây ra một số vấn đề về tối ưu hóa, nhất là trong V8.
```
// không tốt
function f1(a) {
  a = 1;
  // ...
}

function f2(a) {
  if (!a) { a = 1; }
  // ...
}

// tốt
function f3(a) {
  const b = a || 1;
  // ...
}

function f4(a = 1) {
  // ...
}
```

7.14 Ưu tiên sử dụng cú pháp liệt kê ... để gọi các hàm bất định. eslint: prefer-spread

Tại sao? Nó nhìn sáng sủa hơn, bạn không cần phải đặt ngữ cảnh, và bạn cũng đâu thể dễ dàng kết hợp new với apply.

// không tốt
const x = [1, 2, 3, 4, 5];
console.log.apply(console, x);

// tốt
const x = [1, 2, 3, 4, 5];
console.log(...x);

// không tốt
new (Function.prototype.bind.apply(Date, [null, 2016, 8, 5]));

// tốt
new Date(...[2016, 8, 5]);

7.15 Các hàm với các bộ phận hàm, hoặc các phép gọi, nằm trên nhiều dòng nên được căn đầu dòng như tất cả các danh sách nhiều dòng khác trong hướng dẫn này: với mỗi mục nằm trên một dòng riêng biệt, cùng với một dấu phẩy ngay sau mục cuối cùng. eslint: function-paren-newline
```
// không tốt
function foo(bar,
             baz,
             quux) {
  // ...
}

// tốt
function foo(
  bar,
  baz,
  quux,
) {
  // ...
}

// không tốt
console.log(foo,
  bar,
  baz);

// tốt
console.log(
  foo,
  bar,
  baz,
);
```

⬆ về đầu trang

Các Hàm mũi tên

8.1 Khi bạn phải sử dụng một hàm vô danh (như khi cần truyền một hàm gọi lại trên cùng dòng), sử dụng ký pháp hàm mũi tên. eslint: prefer-arrow-callback, arrow-spacing

Tại sao? Nó tạo ra một hàm thực thi trên ngữ cảnh của this, thường là thứ bạn cần, và nó rất súc tích.

Khi nào thì không? Khi bạn có một hàm tương đối rắc rối, bạn cần phải chuyển lô-gíc của hàm đó sang biểu thức hàm hữu danh.
```
// không tốt
[1, 2, 3].map(function (x) {
  const y = x + 1;
  return x * y;
});

// tốt
[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
});
```

8.2 Nếu như phần thân hàm chỉ gồm một câu lệnh trả về một biểu thức mà không có hiệu ứng phụ, bỏ qua dấu ngoặc nhọn và sử dụng trả về ngầm định. Nếu không, giữ nguyên dấu ngoặc và sử dụng lệnh return. eslint: arrow-parens, arrow-body-style

Tại sao? Cú pháp tiện lợi. Nó dễ đọc khi nhiều hàm nối chuỗi nhau.

// không tốt
[1, 2, 3].map((number) => {
  const nextNumber = number + 1;
  `Một chuỗi có chứa số ${nextNumber}.`;
});

// tốt
[1, 2, 3].map((number) => `Một chuỗi có chứa số ${number + 1}.`);

// tốt
[1, 2, 3].map((number) => {
  const nextNumber = number + 1;
  return `Một chuỗi có chứa số ${nextNumber}.`;
});

// tốt
[1, 2, 3].map((number, index) => ({
  [index]: number,
}));

// Không dùng trả về ngầm định khi có hiệu ứng phụ
function foo(callback) {
  const val = callback();
  if (val === true) {
    // Thực hiện gì đó nếu hàm gọi lại trả về true
  }
}

let bool = false;

// không tốt
foo(() => bool = true);

// tốt
foo(() => {
  bool = true;
});

8.3 Trong trường hợp biểu thức nằm trên nhiều dòng, nhóm nó trong ngoặc để dễ đọc hơn.

Tại sao? Nó cho thấy một cách rõ ràng điểm bắt đầu và kết thúc hàm.

// không tốt
['get', 'post', 'put'].map((httpMethod) => Object.prototype.hasOwnProperty.call(
    httpMagicObjectWithAVeryLongName,
    httpMethod,
  )
);

// tốt
['get', 'post', 'put'].map((httpMethod) => (
  Object.prototype.hasOwnProperty.call(
    httpMagicObjectWithAVeryLongName,
    httpMethod,
  )
));

8.4 Luôn sử dụng ngoặc tròn xung quanh các đối số để rõ ràng và nhất quán. eslint: arrow-parens

Tại sao? Giảm thiểu sự khác biệt khi thêm và xóa các đối số.

// không tốt
[1, 2, 3].map(x => x * x);

// tốt
[1, 2, 3].map((x) => x * x);

// tốt
[1, 2, 3].map((number) => (
  `Một chuỗi thật là dài với số ${number}. Nó quá dài để chúng ta có thể viết cùng dòng với dòng .map!`
));

// không tốt
[1, 2, 3].map(x => {
  const y = x + 1;
  return x * y;
});

// tốt
[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
});

8.5 Tránh gây dễ nhầm lẫn giữa cú pháp hàm mũi tên (=>) với các toán tử so sánh (<=, >=). eslint: no-confusing-arrow

// không tốt
const itemHeight = (item) => item.height <= 256 ? item.largeSize : item.smallSize;

// không tốt
const itemHeight = (item) => item.height >= 256 ? item.largeSize : item.smallSize;

// tốt
const itemHeight = (item) => (item.height <= 256 ? item.largeSize : item.smallSize);

// tốt
const itemHeight = (item) => {
  const { height, largeSize, smallSize } = item;
  return height <= 256 ? largeSize : smallSize;
};

8.6 Cách đặt vị trí của phần thân hàm mũi tên với trả về ngầm định. eslint: implicit-arrow-linebreak

// không tốt
(foo) =>
  bar;

(foo) =>
  (bar);

// tốt
(foo) => bar;
(foo) => (bar);
(foo) => (
   bar
)

⬆ về đầu trang

Các Lớp và các Hàm tạo

9.1 Luôn sử dụng class. Tránh việc can thiệp trực tiếp vào prototype.

Tại sao? Cú pháp class súc tích, dễ hiểu và dễ hình dung.

// không tốt
function Queue(contents = []) {
  this.queue = [...contents];
}
Queue.prototype.pop = function () {
  const value = this.queue[0];
  this.queue.splice(0, 1);
  return value;
};

// tốt
class Queue {
  constructor(contents = []) {
    this.queue = [...contents];
  }
  pop() {
    const value = this.queue[0];
    this.queue.splice(0, 1);
    return value;
  }
}

9.2 Sử dụng extends cho thừa kế.

Tại sao? Nó là cách sẵn có để thừa kế nguyên mẫu mà không làm ảnh hưởng đến instanceof.

// không tốt
const inherits = require('inherits');
function PeekableQueue(contents) {
  Queue.apply(this, contents);
}
inherits(PeekableQueue, Queue);
PeekableQueue.prototype.peek = function () {
  return this.queue[0];
};

// tốt
class PeekableQueue extends Queue {
  peek() {
    return this.queue[0];
  }
}

9.3 Các phương thức, mỗi khi có thể, hãy trả về this để tiện cho việc nối chuỗi phương thức.

// không tốt
Jedi.prototype.jump = function () {
  this.jumping = true;
  return true;
};

Jedi.prototype.setHeight = function (height) {
  this.height = height;
};

const luke = new Jedi();
luke.jump(); // => true
luke.setHeight(20); // => undefined

// tốt
class Jedi {
  jump() {
    this.jumping = true;
    return this;
  }

  setHeight(height) {
    this.height = height;
    return this;
  }
}

const luke = new Jedi();

luke.jump()
  .setHeight(20);

9.4 Có thể viết phương thức toString() tùy ý, chỉ cần đảm bản nó hoạt động hoàn hảo và không gây ra các hiệu ứng phụ.

class Jedi {
  constructor(options = {}) {
    this.name = options.name || 'vô danh';
  }

  getName() {
    return this.name;
  }

  toString() {
    return `Jedi - ${this.getName()}`;
  }
}

9.5 Các lớp có một hàm tạo mặc định nếu không được chỉ định. Một hàm tạo rỗng, hoặc chỉ trỏ đến lớp cha, là không cần thiết. eslint: no-useless-constructor

// không tốt
class Jedi {
  constructor() {}

  getName() {
    return this.name;
  }
}

// không tốt
class Rey extends Jedi {
  constructor(...args) {
    super(...args);
  }
}

// tốt
class Rey extends Jedi {
  constructor(...args) {
    super(...args);
    this.name = 'Rey';
  }
}

9.6 Tránh trùng lặp các thành viên của một lớp. eslint: no-dupe-class-members

Tại sao? Với các khai báo thành viên bị lặp, khai báo cuối được tự động ưu tiên - việc có sự trùng lặp gần như chắc chắn là một lỗi.
```
// không tốt
class Foo {
  bar() { return 1; }
  bar() { return 2; }
}

// tốt
class Foo {
  bar() { return 1; }
}

// tốt
class Foo {
  bar() { return 2; }
}
```

9.7 Các phương thức của lớp nên sử dụng this hoặc được chuyển thành phương thức tĩnh, trừ trường hợp thư viện bên ngoài hoặc bộ khung phần mềm bắt buộc sử dụng phương thức không phải phương thức tĩnh. Một phương thức là phương thức của thực thể nên mang ý nghĩa rằng nó hoạt động khác nhau dựa trên những thuộc tính của đối tượng đích. eslint: class-methods-use-this
```
// không tốt
class Foo {
  bar() {
    console.log('bar');
  }
}

// tốt - this được sử dụng
class Foo {
  bar() {
    console.log(this.bar);
  }
}

// tốt - constructor là ngoại lệ
class Foo {
  constructor() {
    // ...
  }
}

// tốt - phương thức tĩnh không nên sử dụng this
class Foo {
  static bar() {
    console.log('bar');
  }
}
```

⬆ về đầu trang

Các Mô-đun

10.1 Luôn sử dụng mô-đun (import/export) thay vì một hệ thống mô-đun phi chuẩn. Bạn luôn có thể dịch mã sang hệ thống mô-đun mà bạn thích.

Tại sao? Mô-đun là tương lai, hãy cùng sử dụng tương lai ngay lúc này.

// không tốt
const AirbnbStyleGuide = require('./AirbnbStyleGuide');
module.exports = AirbnbStyleGuide.es6;

// ok
import AirbnbStyleGuide from './AirbnbStyleGuide';
export default AirbnbStyleGuide.es6;

// best
import { es6 } from './AirbnbStyleGuide';
export default es6;

10.2 Không sử dụng ký tự đại diện để nhập.

Tại sao? Điều này đảm bảo bạn chỉ xuất mặc định một giá trị.
```
// không tốt
import * as AirbnbStyleGuide from './AirbnbStyleGuide';

// tốt
import AirbnbStyleGuide from './AirbnbStyleGuide';
```

10.3 Và không xuất trực tiếp từ một lệnh nhập.

Tại sao? Mặc dù cấu trúc một dòng là súc tích, việc nhập một cách rõ ràng và xuất một cách rõ ràng làm cho mọi thứ nhất quán.
```
// không tốt
// tên tệp es6.js
export { es6 as default } from './AirbnbStyleGuide';

// tốt
// tên tệp es6.js
import { es6 } from './AirbnbStyleGuide';
export default es6;
```

10.4 Chỉ nhập từ một đường dẫn ở chung một chỗ. eslint: no-duplicate-imports

Tại sao? Có nhiều dòng nhập từ cùng một đường dẫn khiến mã nguồn trở nên khó bảo trì hơn.

// không tốt
import foo from 'foo';
// … và nhập một vài thứ nữa … //
import { named1, named2 } from 'foo';

// tốt
import foo, { named1, named2 } from 'foo';

// tốt
import foo, {
  named1,
  named2,
} from 'foo';

10.5 Không xuất các ràng buộc có thể bị biến đổi. eslint: import/no-mutable-exports

Tại sao? Sự biến đổi, nói chung, nên được tránh, nhưng đặc biệt là đối với trường hợp xuất các giá trị có thể bị biến đổi. Trong khi kỹ thuật này có thể là cần thiết trong một số trường hợp đặc biệt, nhìn chung, chỉ nên xuất các giá trị là hằng.
```
// không tốt
let foo = 3;
export { foo };

// tốt
const foo = 3;
export { foo };
```

10.6 Trong các mô-đun chỉ có một địa chỉ xuất, ưu tiên xuất mặc định thay vì xuất hữu danh. eslint: import/prefer-default-export

Tại sao? Nhằm khuyến khích các tệp chỉ xuất một giá trị, giúp mã nguồn dễ đọc và dễ bảo trì.
```
// không tốt
export function foo() {}

// tốt
export default function foo() {}
```

10.7 Đặt tất cả các lệnh import trên cùng. eslint: import/first

Tại sao? Vì các lệnh import được kéo lên, việc đặt tất cả chúng ở trên cùng nhằm ngăn chặn các hành vi không đáng có.
```
// không tốt
import foo from 'foo';
foo.init();

import bar from 'bar';

// tốt
import foo from 'foo';
import bar from 'bar';

foo.init();
```

10.8 Các lệnh nhập nhiều dòng nên được căn đầu dòng giống như các mảng hay đối tượng nguyên văn nhiều dòng. eslint: object-curly-newline

Tại sao? Các đấu ngoặc nhọn đều có cùng các quy tắc căn đầu dòng như tất cả mọi khối ngoặc nhọn trong bản định hướng này, cùng với như dấu phẩy ở cuối.
```
// không tốt
import {longNameA, longNameB, longNameC, longNameD, longNameE} from 'path';

// tốt
import {
  longNameA,
  longNameB,
  longNameC,
  longNameD,
  longNameE,
} from 'path';
```

10.9 Không cho phép cú pháp bộ tải Webpack trong các lệnh nhập mô-đun. eslint: import/no-webpack-loader-syntax

Tại sao? Vì sử dụng cú pháp Webpack trong các lệnh nhập gom mã thành một bộ tổng hợp mô-đun. Ưu tiên sử dụng cú pháp bộ tải trong webpack.config.js.
```
// không tốt
import fooSass from 'css!sass!foo.scss';
import barCss from 'style!css!bar.css';

// tốt
import fooSass from 'foo.scss';
import barCss from 'bar.css';
```

10.10 Không thêm phần mở rộng của tên tệp JavaScript. eslint: import/extensions

Tạo sao? Việc thêm phần mở rộng của tệp khiến cho việc cải tiến mã nguồn trở nên khó khăn hơn, và tạo nên những chi tiết không cần thiết trong lệnh nhập mô-đun mỗi khi bạn sử dụng.
```
// không tốt
import foo from './foo.js';
import bar from './bar.jsx';
import baz from './baz/index.jsx';
// tốt
import foo from './foo';
import bar from './bar';
import baz from './baz';
```

⬆ về đầu trang

Các Đối tượng duyệt và các Hàm sinh trị

11.1 Không sử dụng các đối tượng duyệt. Ưu tiên sử dụng các hàm bậc cao hơn của JavaScript thay vì các vòng lặp như for-in hay for-of. eslint: no-iterator no-restricted-syntax

Tại sao? Điều này đảm bảo việc thực hiện quy tắc bất biến. Làm việc với các hàm thuần mà trả về các giá trị sẽ dễ tưởng tượng hơn so với các hiệu ứng phụ.

Sử dụng map() / every() / filter() / find() / findIndex() / reduce() / some() / ... để duyệt qua một mảng, và Object.keys() / Object.values() / Object.entries() để tạo một mảng để bạn có thể duyệt qua một đối tượng.

const numbers = [1, 2, 3, 4, 5];

// không tốt
let sum = 0;
for (let num of numbers) {
  sum += num;
}
sum === 15;

// tốt
let sum = 0;
numbers.forEach((num) => {
  sum += num;
});
sum === 15;

// tốt nhất, sử dụng hàm
const sum = numbers.reduce((total, num) => total + num, 0);
sum === 15;

// không tốt
const increasedByOne = [];
for (let i = 0; i < numbers.length; i++) {
  increasedByOne.push(numbers[i] + 1);
}

// tốt
const increasedByOne = [];
numbers.forEach((num) => {
  increasedByOne.push(num + 1);
});

// tốt nhất, vẫn là sử dụng hàm
const increasedByOne = numbers.map((num) => num + 1);

11.2 Không sử dụng các hàm sinh trị function* vào thời điểm này.

Tại sao? Nó không thể được dịch mã sang ES5 một cách hoàn hảo.

11.3 Nếu bạn bắt buộc phải dùng các hàm sinh trị, hoặc bạn bỏ qua khuyến nghị của chúng tôi, hãy đảm bảo rằng bạn sử dụng dấu cách giữa các bộ phận hàm một cách hợp lý. eslint: generator-star-spacing

Tại sao? function và * là tạo thành một từ khóa riêng - * không phải là từ khóa điều chỉnh cho function, function* là một cấu tạo riêng biệt, khác với function.

// không tốt
function * foo() {
  // ...
}

// không tốt
const bar = function * () {
  // ...
};

// không tốt
const baz = function *() {
  // ...
};

// không tốt
const quux = function*() {
  // ...
};

// không tốt
function*foo() {
  // ...
}

// không tốt
function *foo() {
  // ...
}

// rất tệ
function
*
foo() {
  // ...
}

// rất rất tệ
const wat = function
*
() {
  // ...
};

// tốt
function* foo() {
  // ...
}

// tốt
const foo = function* () {
  // ...
};

⬆ về đầu trang

Các Thuộc tính

12.1 Sử dụng ký pháp chấm . để truy cập các thuộc tính. eslint: dot-notation

const luke = {
  jedi: true,
  age: 28,
};

// không tốt
const isJedi = luke['jedi'];

// tốt
const isJedi = luke.jedi;

12.2 Sử dụng ký pháp ngoặc [] để truy cập thuộc tính với một biến.

const luke = {
  jedi: true,
  age: 28,
};

function getProp(prop) {
  return luke[prop];
}

const isJedi = getProp('jedi');

12.3 Sử dụng toán tử lũy thừa ** để tính các lũy thừa. eslint: no-restricted-properties.
```
// không tốt
const binary = Math.pow(2, 10);

// tốt
const binary = 2 ** 10;
```

⬆ về đầu trang

Các Biến

13.1 Luôn sử dụng const hoặc let để khai báo biến. Không làm như vậy sẽ dẫn đến các biến toàn cục. Chúng ta muốn tránh việc làm ô nhiễm không gian tên toàn cục. Đội trưởng Hành tinh đã cảnh báo chúng ta. eslint: no-undef prefer-const
```
// không tốt
superPower = new SuperPower();

// tốt
const superPower = new SuperPower();
```

13.2 Sử dụng một const hoặc let khai báo cho mỗi biến hoặc phép gán. eslint: one-var

Tại sao? Khai báo theo cách này giúp dễ thêm các khai báo mới, và bạn chẳng phải nghĩ về việc phải dùng ; hay ,. Bạn còn có thể bước qua mỗi khai báo trong trình gỡ lỗi, thay vì nhảy qua toàn bộ chúng trong một bước.

// không tốt
const items = getItems(),
    goSportsTeam = true,
    dragonball = 'z';

// không tốt
// (so sánh với trên kia và thử tìm ra lỗi ở đây)
const items = getItems(),
    goSportsTeam = true;
    dragonball = 'z';

// tốt
const items = getItems();
const goSportsTeam = true;
const dragonball = 'z';

13.3 Nhóm tất cả các const và rồi nhóm tất cả các let.

Tại sao? Điều này hữu ích khi, sau đó, bạn sẽ cần gán lại một biến dựa trên các biến đã gán trước đó.

// không tốt
let i, len, dragonball,
    items = getItems(),
    goSportsTeam = true;

// không tốt
let i;
const items = getItems();
let dragonball;
const goSportsTeam = true;
let len;

// tốt
const goSportsTeam = true;
const items = getItems();
let dragonball;
let i;
let length;

13.4 Chỉ gán biến khi cần, nhưng nhớ đặt chúng ở một nơi hợp lý.

Tại sao? let và const thuộc phạm vi khối, không phải phạm vi hàm.

// không tốt - phép gọi hàm không cần thiết
function checkName(hasName) {
  const name = getName();

  if (hasName === 'thí nghiệm') {
    return false;
  }

  if (name === 'thí nghiệm') {
    this.setName('');
    return false;
  }

  return name;
}

// tốt
function checkName(hasName) {
  if (hasName === 'thí nghiệm') {
    return false;
  }

  const name = getName();

  if (name === 'thí nghiệm') {
    this.setName('');
    return false;
  }

  return name;
}

13.5 Đừng nối chuỗi các phép gán. eslint: no-multi-assign

Tại sao? Việc nối chuỗi các phép gán tạo ra các biến toàn cục ngầm định.

// không tốt
(function example() {
  // JavaScript diễn giải điều này như
  // let a = ( b = ( c = 1 ) );
  // Từ khóa let chỉ áp dụng đối với biến a; các biến b và c sẽ trở thành
  // các biến toàn cục.
  let a = b = c = 1;
}());

console.log(a); // ném ra ReferenceError
console.log(b); // 1
console.log(c); // 1

// tốt
(function example() {
  let a = 1;
  let b = a;
  let c = a;
}());

console.log(a); // ném ra ReferenceError
console.log(b); // ném ra ReferenceError
console.log(c); // ném ra ReferenceError

// điều tương tự áp dụng với `const`

13.6 Tránh việc sử dụng các phép tăng và giảm một ngôi (++, --). eslint no-plusplus

Tại sao? Theo như tài liệu của eslint, các phép tăng hoặc giảm một ngôi phụ thuộc vào Quy tắc thêm dấu chấm phẩy tự động và có thể gây ra các lỗi câm trong việc tăng hoặc giảm các giá trị trong một ứng dụng. Sự diễn đạt cũng trở nên rõ ràng hơn khi bạn biến đổi các giá trị với các lệnh, như num += 1, thay vì num++ hay num ++. Việc không cho phép các lệnh tăng hoặc giảm một ngôi cũng giúp bạn tránh được các sự tiền tăng/tiền giảm các giá trị một cách không chủ ý, điều có thể cũng gây ra những hành vi không mong muốn cho chương trình của bạn.
```
// không tốt

const array = [1, 2, 3];
let num = 1;
num++;
--num;

let sum = 0;
let truthyCount = 0;
for (let i = 0; i < array.length; i++) {
  let value = array[i];
  sum += value;
  if (value) {
    truthyCount++;
  }
}

// tốt

const array = [1, 2, 3];
let num = 1;
num += 1;
num -= 1;

const sum = array.reduce((a, b) => a + b, 0);
const truthyCount = array.filter(Boolean).length;
```

13.7 Tránh các dấu ngắt dòng trước và sau = trong một phép gán. Nếu phép gán của bạn vi phạm max-len, hãy đặt giá trị trong ngoặc tròn. eslint operator-linebreak.

Tại sao? Các dấu ngắt dòng quanh = có thể làm mờ nhạt giá trị trong phép gán.

// không tốt
const foo =
  superLongLongLongLongLongLongLongLongFunctionName();

// không tốt
const foo
  = 'một chuỗi rất rất rất rất rất rất rất rất rất rất là dài';

// tốt
const foo = (
  superLongLongLongLongLongLongLongLongFunctionName()
);

// tốt
const foo = 'một chuỗi rất rất rất rất rất rất rất rất rất rất là dài';

13.8 Không cho phép các biến không được sử dụng. eslint: no-unused-vars

Tại sao? Các biến được khai báo nhưng không được sử dụng ở khắp mọi nơi trong mã gần như chắc chắn là một lỗi do sự cải tiến mã nguồn chưa hoàn thiện. Những biến như vậy chiếm chỗ trong mã và có thể gây ra sự khó hiểu cho người đọc.

// không tốt

var some_unused_var = 42;

// Các biến chỉ-viết không được coi là đã được sử dụng.
var y = 10;
y = 5;

// Một phép đọc để sửa chính nó không được coi là đã sử dụng.
var z = 0;
z = z + 1;

// Đối số không được sử dụng.
function getX(x, y) {
    return x;
}

// tốt

function getXPlusY(x, y) {
  return x + y;
}

var x = 1;
var y = a + 2;

alert(getXPlusY(x, y));

// 'type' được bỏ qua kể cả khi nó không được sử dụng vì còn có
// các thuộc tính đồng đẳng còn-lại.
// Đây là một cách để trích xuất một đối tượng mà bỏ qua một vài thuộc tính.
var { type, ...coords } = data;
// 'coords' bây giờ là 'data' đã loại bỏ thuộc tính 'type'.

⬆ về đầu trang

Sự kéo lên

14.1 Các khai báo bằng var được kéo lên đầu của phạm vi hàm gần nhất, còn phép gán thì không. Các khai báo bằng const và let thì mang trên mình một đặc tính khác là Giai đoạn chết. Điều này là quan trọng để biết tại sao typeof không còn an toàn.

// chúng ta biết thứ này sẽ không hoạt động (giả định rằng
// không có biến toàn cục nào tên là notDefined)
function example() {
  console.log(notDefined); // => ném ra ReferenceError
}

// việc khai báo một biến sau khi bạn
// sử dụng biến đó vẫn sẽ chạy bởi vì
// sự nổi lên của biến. Lưu ý: phép gán
// giá trị `true` không được kéo lên.
function example() {
  console.log(declaredButNotAssigned); // => undefined
  var declaredButNotAssigned = true;
}

// trình biên dịch sẽ kéo khai báo biến
// lên trên đầu của phạm vi hàm,
// điều này có nghĩa là ví dụ trên có thể được viết là:
function example() {
  let declaredButNotAssigned;
  console.log(declaredButNotAssigned); // => undefined
  declaredButNotAssigned = true;
}

// dùng const và let
function example() {
  console.log(declaredButNotAssigned); // => ném ra ReferenceError
  console.log(typeof declaredButNotAssigned); // => ném ra ReferenceError
  const declaredButNotAssigned = true;
}

14.2 Các biểu thức hàm vô danh sẽ được kéo tên biến lên, nhưng không được kéo phép gán hàm.

function example() {
  console.log(anonymous); // => undefined

  anonymous(); // => TypeError anonymous is not a function

  var anonymous = function () {
    console.log('biểu thức hàm vô danh');
  };
}

14.3 Biểu thức hàm hữu danh sẽ được kéo tên biến lên, nhưng không được kéo tên hàm và thân hàm.

function example() {
  console.log(named); // => undefined

  named(); // => TypeError named is not a function

  superPower(); // => ReferenceError superPower is not defined

  var named = function superPower() {
    console.log('Nhìn tui đang bay nè');
  };
}

// điều tương tự cũng đúng nếu
// tên hàm là trùng với tên biến.
function example() {
  console.log(named); // => undefined

  named(); // => TypeError named is not a function

  var named = function named() {
    console.log('named');
  };
}

14.4 Khai báo hàm được kéo cả tên và thân hàm lên.

function example() {
  superPower(); // => Nhìn tui đang bay nè

  function superPower() {
    console.log('Nhìn tui đang bay nè');
  }
}

Để tìm hiểu thêm, tham khảo bài viết JavaScript Scoping & Hoisting bởi Ben Cherry.

⬆ về đầu trang

Các Toán tử So sánh và Sự bằng nhau

15.1 Sử dụng === và !== thay vì == và !=. eslint: eqeqeq

15.2 Các câu lệnh điều kiện như lệnh if xét biểu thức của chúng bằng cách ép kiểu bằng một phương thức ảoToBoolean và đều tuân theo những quy tắc đơn giản sau:
- Các đối tượng tương đương với true
- Undefined tương đương với false
- Null tương đương với false
- Các boolean tương đương với giá trị của boolean
- Các số tương đương với false nếu là +0, -0, hoặc NaN, còn không sẽ là true
- Các chuỗi tương đương vớivfalse nếu là một chuỗi rỗng '', còn không sẽ là true
```
if ([0] && []) {
  // true
  // một mảng (dù là mảng rỗng) là một đối tượng,
  // mà đối tượng luôn tương đương với true
}
```

15.3 Sử dụng dạng rút gọn cho các boolean, nhưng dùng dạng so sánh cụ thể đối với chuỗi và số.

// không tốt
if (isValid === true) {
  // ...
}

// tốt
if (isValid) {
  // ...
}

// không tốt
if (name) {
  // ...
}

// tốt
if (name !== '') {
  // ...
}

// không tốt
if (collection.length) {
  // ...
}

// tốt
if (collection.length > 0) {
  // ...
}

15.4 Để biết thêm chi tiết, xem bài viết Truth Equality and JavaScript bởi Angus Croll.

15.5 Sử dụng các dấu ngoặc cho các khối của mệnh đề case và default nếu nó có chứa các khai báo (như let, const, function, và class). eslint: no-case-declarations

Tại sao? Các khai báo tồn tại trong cả khối switch nhưng chỉ được khởi tạo khi được gán, mà nó chỉ xảy ra khi case của nó xảy ra. Điều này gây ra các lỗi khi mà nhiều mệnh đề case muốn định nghĩa cùng một thứ.

// không tốt
switch (foo) {
  case 1:
    let x = 1;
    break;
  case 2:
    const y = 2;
    break;
  case 3:
    function f() {
      // ...
    }
    break;
  default:
    class C {}
}

// tốt
switch (foo) {
  case 1: {
    let x = 1;
    break;
  }
  case 2: {
    const y = 2;
    break;
  }
  case 3: {
    function f() {
      // ...
    }
    break;
  }
  case 4:
    bar();
    break;
  default: {
    class C {}
  }
}

15.6 Các toán tử ba ngôi không nên được đặt trong ngoặc và thường được viết trên một dòng riêng. eslint: no-nested-ternary

// không tốt
const foo = maybe1 > maybe2
  ? "hi hi"
  : value1 > value2 ? "hi hi" : null;

// chia thành hai biểu thức ba ngôi riêng biệt
// là tốt nhất
const maybeNull = value1 > value2 ? 'hi hi' : null;
const foo = maybe1 > maybe2 ? 'hi hi' : maybeNull;

15.7 Tránh các câu lệnh ba ngôi không đáng có. eslint: no-unneeded-ternary

// không tốt
const foo = a ? a : b;
const bar = c ? true : false;
const baz = c ? false : true;

// tốt
const foo = a || b;
const bar = !!c;
const baz = !c;

15.8 Khi kết hợp các toán tử, nhớ đóng chúng trong ngoặc. Ngoại lệ duy nhất là các toán tử tiêu chuẩn: +, - và ** vì chúng có thứ tự ưu tiên mà ai ai cũng hiểu. Chúng tôi khuyến khích việc sử dụng đóng ngoặc cho / và * vì thứ tự ưu tiên của chúng có thể bị nhầm lẫn khi chúng được sử dụng gần nhau. eslint: no-mixed-operators

Tại sao? Điều này cả thiện tính khả đọc và làm rõ ý định của nhà phát triển.

// không tốt
const foo = a && b < 0 || c > 0 || d + 1 === 0;

// không tốt
const bar = a ** b - 5 % d;

// không tốt
// ai đó có thể bị rối và nghĩ nó là (a || b) && c
if (a || b && c) {
  return d;
}

// không tốt
const bar = a + b / c * d;

// tốt
const foo = (a && b < 0) || c > 0 || (d + 1 === 0);

// tốt
const bar = a ** b - (5 % d);

// tốt
if (a || (b && c)) {
  return d;
}

// tốt
const bar = a + (b / c) * d;

⬆ về đầu trang

Các Khối

16.1 Sử dụng các dấu ngoặc cho các khối nhiều dòng. eslint: nonblock-statement-body-position

// không tốt
if (test)
  return false;

// tốt
if (test) return false;

// tốt
if (test) {
  return false;
}

// không tốt
function foo() { return false; }

// tốt
function bar() {
  return false;
}

16.2 Nếu bạn đang sử dụng các khối nhiều dòng với if và else, đặt else trên cùng dòng với dấu đóng ngoặc của khối if. eslint: brace-style

// không tốt
if (test) {
  thing1();
  thing2();
}
else {
  thing3();
}

// tốt
if (test) {
  thing1();
  thing2();
} else {
  thing3();
}

16.3 Nếu một khối if luôn thực hiện lệnh return, những khối else tiếp theo là không cần thiết. Một lệnh return trong một khối else if theo sau một khối if mà có chứa return có thể được tách thành nhiều khối if. eslint: no-else-return

// không tốt
function foo() {
  if (x) {
    return x;
  } else {
    return y;
  }
}

// không tốt
function cats() {
  if (x) {
    return x;
  } else if (y) {
    return y;
  }
}

// không tốt
function dogs() {
  if (x) {
    return x;
  } else {
    if (y) {
      return y;
    }
  }
}

// tốt
function foo() {
  if (x) {
    return x;
  }

  return y;
}

// tốt
function cats() {
  if (x) {
    return x;
  }

  if (y) {
    return y;
  }
}

// tốt
function dogs(x) {
  if (x) {
    if (z) {
      return y;
    }
  } else {
    return z;
  }
}

⬆ về đầu trang

Các Câu lệnh Điều khiển

17.1 Nếu trong trường hợp lệnh điều khiển (if, while, v.v.) của bạn trở lên quá dài và vượt quá giới hạn độ dài dòng, mỗi (nhóm) điều kiện có thể được đặt ở một dòng mới. Toán tử lô-gíc nên được đặt ở đầu dòng.

Tại sao? Việc đặt các toán tử ở đầu dòng giúp các toán tử được căn đều và tuân theo cùng một mô hình với việc nối chuỗi phương thức. Điều này cũng cải thiện tính khả đọc vì khiến cho việc theo dõi một lô-gíc phức tạp trở nên đơn giản hơn.

// không tốt
if ((foo === 123 || bar === 'abc') && doesItLookGoodWhenItBecomesThatLong() && isThisReallyHappening()) {
  thing1();
}

// không tốt
if (foo === 123 &&
  bar === 'abc') {
  thing1();
}

// không tốt
if (foo === 123
  && bar === 'abc') {
  thing1();
}

// không tốt
if (
  foo === 123 &&
  bar === 'abc'
) {
  thing1();
}

// tốt
if (
  foo === 123
  && bar === 'abc'
) {
  thing1();
}

// tốt
if (
  (foo === 123 || bar === 'abc')
  && doesItLookGoodWhenItBecomesThatLong()
  && isThisReallyHappening()
) {
  thing1();
}

// tốt
if (foo === 123 && bar === 'abc') {
  thing1();
}

17.2 Không sử dụng toán tử lựa chọn thay cho các câu lệnh điều khiển.

// không tốt
!isRunning && startRunning();

// tốt
if (!isRunning) {
  startRunning();
}

⬆ về đầu trang

Các Chú thích

18.1 Sử dụng /** ... */ cho các chú thích nhiều dòng.

// không tốt
// make() trả về một phần tử
// dựa trên tag được truyền vào
//
// @param {String} tag
// @return {Element} element
function make(tag) {

  // ...

  return element;
}

// tốt
/**
 * make() trả về một phần tử
 * dựa trên tag được truyền vào
 */
function make(tag) {

  // ...

  return element;
}

18.2 Sử dụng // cho các chú thích một dòng. Đặt các chú thích một dòng ở một dòng riêng, bên trên chủ đề của chú thích. Để một dòng trống trước chú thích trừ khi chú thích là dòng đầu tiên của một khối.

// không tốt
const active = true;  // là thẻ hiện tại

// tốt
// là thẻ hiện tại
const active = true;

// không tốt
function getType() {
  console.log('đang lấy loại...');
  // đặt loại mặc định là 'không phân loại'
  const type = this.type || 'không phân loại';

  return type;
}

// tốt
function getType() {
  console.log('đang lấy loại...');

  // đặt loại mặc định là 'không phân loại'
  const type = this.type || 'không phân loại';

  return type;
}

// như này cũng tốt
function getType() {
  // đặt loại mặc định là 'không phân loại'
  const type = this.type || 'không phân loại';

  return type;
}

18.3 Bắt đầu tất cả các chú thích bằng một dấu cách để dễ đọc hơn. eslint: spaced-comment

// không tốt
//là thẻ hiện tại
const active = true;

// tốt
// là thẻ hiện tại
const active = true;

// không tốt
/**
 *make() trả về một phần tử
 *dựa trên tag được truyền vào
 */
function make(tag) {

  // ...

  return element;
}

// tốt
/**
 * make() trả về một phần tử
 * dựa trên tag được truyền vào
 */
function make(tag) {

  // ...

  return element;
}

18.4 Thêm FIXME hoặc TODO vào đầu chú thích giúp các nhà phát triển dễ dàng biết được rằng bạn đang chỉ ra một vấn đề cần được xem lại, hoặc bạn đang đề xuất cách giải quyết cho vấn đề nên mà được áp dụng. Các hành động có thể như FIXME: -- cần xem xét về thứ này hoặc TODO: -- cần áp dụng.

18.5 Sử dụng // FIXME: để chú giải các vấn đề.

class Calculator extends Abacus {
  constructor() {
    super();

    // FIXME: không nên dùng biến toàn cục ở đây
    total = 0;
  }
}

18.6 Sử dụng // TODO: để chú giải các cách giải quyết cho các vấn đề.

class Calculator extends Abacus {
  constructor() {
    super();

    // TODO: giá trị của total nên được chuyển thành tham số
    this.total = 0;
  }
}

⬆ về đầu trang

Khoảng trắng

19.1 Sử dụng các tab ngắn (dấu cách) đặt về 2 dấu cách. eslint: indent

// không tốt
function foo() {
∙∙∙∙let name;
}

// không tốt
function bar() {
∙let name;
}

// tốt
function baz() {
∙∙let name;
}

19.2 Đặt 1 cách trước dấu mở ngoặc. eslint: space-before-blocks

// không tốt
function test(){
  console.log('ví dụ');
}

// tốt
function test() {
  console.log('ví dụ');
}

// không tốt
dog.set('attr',{
  age: '1 năm',
  breed: 'Chó núi Bern',
});

// tốt
dog.set('attr', {
  age: '1 năm',
  breed: 'Chó núi Bern',
});

19.3 Đặt 1 dấu cách trước dấu mở ngoặc tròn của các lệnh điều khiển (if, while, v.v.). Không đặt dấu cách giữa danh sách đối số và tên hàm trong các phép gọi và khai báo hàm. eslint: keyword-spacing
```
// không tốt
if(isJedi) {
  fight ();
}

// tốt
if (isJedi) {
  fight();
}

// không tốt
function fight () {
  console.log ('Uiiiiii!');
}

// tốt
function fight() {
  console.log('Uiiiiii!');
}
```

19.4 Đặt dấu cách trước và sau các toán tử. eslint: space-infix-ops
```
// không tốt
const x=y+5;

// tốt
const x = y + 5;
```

19.5 Kết thúc tệp với một dấu ngắt dòng. eslint: eol-last

// không tốt
import { es6 } from './AirbnbStyleGuide';
  // ...
export default es6;

// không tốt
import { es6 } from './AirbnbStyleGuide';
  // ...
export default es6;↵
↵

// tốt
import { es6 } from './AirbnbStyleGuide';
  // ...
export default es6;↵

19.6 Căn đầu dòng khi tạo các chuỗi phương thức (nhiều hơn 2 chuỗi phương thức). Đặt dấu chấm ở đầu, để nhấn mạnh dòng này là một phép gọi phương thức, không phải là một câu lệnh mới. eslint: newline-per-chained-call no-whitespace-before-property

// không tốt
$('#items').find('.selected').highlight().end().find('.open').updateCount();

// không tốt
$('#items').
  find('.selected').
    highlight().
    end().
  find('.open').
    updateCount();

// tốt
$('#items')
  .find('.selected')
    .highlight()
    .end()
  .find('.open')
    .updateCount();

// không tốt
const leds = stage.selectAll('.led').data(data).enter().append('svg:svg').classed('led', true)
    .attr('width', (radius + margin) * 2).append('svg:g')
    .attr('transform', `translate(${radius + margin},${radius + margin})`)
    .call(tron.led);

// tốt
const leds = stage.selectAll('.led')
    .data(data)
  .enter().append('svg:svg')
    .classed('led', true)
    .attr('width', (radius + margin) * 2)
  .append('svg:g')
    .attr('transform', `translate(${radius + margin},${radius + margin})`)
    .call(tron.led);

// tốt
const leds = stage.selectAll('.led').data(data);
const svg = leds.enter().append('svg:svg');
svg.classed('led', true).attr('width', (radius + margin) * 2);
const g = svg.append('svg:g');
g.attr('transform', `translate(${radius + margin},${radius + margin})`).call(tron.led);

19.7 Để một dòng trống sau mỗi khối và trước câu lệnh tiếp theo.

// không tốt
if (foo) {
  return bar;
}
return baz;

// tốt
if (foo) {
  return bar;
}

return baz;

// không tốt
const obj = {
  foo() {
  },
  bar() {
  },
};
return obj;

// tốt
const obj = {
  foo() {
  },

  bar() {
  },
};

return obj;

// không tốt
const arr = [
  function foo() {
  },
  function bar() {
  },
];
return arr;

// tốt
const arr = [
  function foo() {
  },

  function bar() {
  },
];

return arr;

19.8 Không kê các khối với các dòng trống. eslint: padded-blocks

// không tốt
function bar() {

  console.log(foo);

}

// không tốt
if (baz) {

  console.log(qux);
} else {
  console.log(foo);

}

// không tốt
class Foo {

  constructor(bar) {
    this.bar = bar;
  }
}

// tốt
function bar() {
  console.log(foo);
}

// tốt
if (baz) {
  console.log(qux);
} else {
  console.log(foo);
}

19.9 Do not use multiple blank lines to pad your code. eslint: no-multiple-empty-lines

// không tốt
class Person {
  constructor(fullName, email, birthday) {
    this.fullName = fullName;


    this.email = email;


    this.setAge(birthday);
  }


  setAge(birthday) {
    const today = new Date();


    const age = this.getAge(today, birthday);


    this.age = age;
  }


  getAge(today, birthday) {
    // ..
  }
}

// tốt
class Person {
  constructor(fullName, email, birthday) {
    this.fullName = fullName;
    this.email = email;
    this.setAge(birthday);
  }

  setAge(birthday) {
    const today = new Date();
    const age = getAge(today, birthday);
    this.age = age;
  }

  getAge(today, birthday) {
    // ..
  }
}

19.10 Không thêm các dấu cách trong dấu ngoặc tròn. eslint: space-in-parens

// không tốt
function bar( foo ) {
  return foo;
}

// tốt
function bar(foo) {
  return foo;
}

// không tốt
if ( foo ) {
  console.log(foo);
}

// tốt
if (foo) {
  console.log(foo);
}

19.11 Không thêm các dấu cách trong các dấu ngoặc vuông. eslint: array-bracket-spacing

// không tốt
const foo = [ 1, 2, 3 ];
console.log(foo[ 0 ]);

// tốt
const foo = [1, 2, 3];
console.log(foo[0]);

19.12 Thêm các dấu cách giữa các dấu ngoặc nhọn. eslint: object-curly-spacing

// không tốt
const foo = {clark: 'kent'};

// tốt
const foo = { clark: 'kent' };

19.13 Tránh các dòng mã có nhiều hơn 100 ký tự (kể cả khoảng trắng). Lưu ý: theo như trên đây, các chuỗi được loại trừ bởi quy tắc này, và bạn không nên chia chúng ra. eslint: max-len

Tại sao? Điều này đảm bảo tính khả đọc và khả năng bảo trì.

// không tốt
const foo = jsonData && jsonData.foo && jsonData.foo.bar && jsonData.foo.bar.baz && jsonData.foo.bar.baz.quux && jsonData.foo.bar.baz.quux.xyzzy;

// không tốt
$.ajax({ method: 'POST', url: 'https://airbnb.com/', data: { name: 'John' } }).done(() => console.log('Chúc mừng!')).fail(() => console.log('You have failed this city.'));

// tốt
const foo = jsonData
  && jsonData.foo
  && jsonData.foo.bar
  && jsonData.foo.bar.baz
  && jsonData.foo.bar.baz.quux
  && jsonData.foo.bar.baz.quux.xyzzy;

// tốt
$.ajax({
  method: 'POST',
  url: 'https://airbnb.com/',
  data: { name: 'John' },
})
  .done(() => console.log('Chúc mừng!'))
  .fail(() => console.log('You have failed this city.'));

19.14 Đảm bảo sự nhất quán về dấu cách sau dấu mở ngoặc và trước ký tự đầu tiên sau nó trên cùng một dòng. Quy tắc này cũng yêu cầu sự nhất quán về dấu cách trước dấu đóng ngoặc và sau ký tự cuối cùng trước nó trên cùng một dòng. eslint: block-spacing
```
// không tốt
function foo() {return true;}
if (foo) { bar = 0;}

// tốt
function foo() { return true; }
if (foo) { bar = 0; }
```

19.15 Không sử dụng dấu cách trước dấu phẩy và phải sử dụng dấu cách sau dấu phẩy. eslint: comma-spacing

// không tốt
var foo = 1,bar = 2;
var arr = [1 , 2];

// tốt
var foo = 1, bar = 2;
var arr = [1, 2];

19.16 Không đặt dấu cách bên trong dấu ngoặc của thuộc tính được tính. eslint: computed-property-spacing

// không tốt
obj[foo ]
obj[ 'foo']
var x = {[ b ]: a}
obj[foo[ bar ]]

// tốt
obj[foo]
obj['foo']
var x = { [b]: a }
obj[foo[bar]]

19.17 Tránh sử dụng dấu cách giữa các hàm và phép gọi chúng. eslint: func-call-spacing
```
// không tốt
func ();

func
();

// tốt
func();
```

19.18 Đặt dấu cách giữa các tên và giá trị của các thuộc tính nguyên văn. eslint: key-spacing

// không tốt
var obj = { foo : 42 };
var obj2 = { foo:42 };

// tốt
var obj = { foo: 42 };

19.19 Tránh các dấu cách ở cuối các dòng. eslint: no-trailing-spaces

19.20 Tránh để nhiều dòng trống liên tiếp, chỉ để một dòng trống ở cuối tệp, và không để dòng trống ở đầu tệp. eslint: no-multiple-empty-lines

// không tốt - nhiều dòng trống liên tiếp
var x = 1;


var y = 2;

// bad - 2+ dòng trống ở cuối tệp
var x = 1;
var y = 2;


// không tốt - 1+ dòng trống ở đầu tệp

var x = 1;
var y = 2;

// tốt
var x = 1;
var y = 2;

⬆ về đầu trang

Các Dấu phẩy

20.1 Các dấu phẩy ở đầu: Đừng! eslint: comma-style

// không tốt
const story = [
    once
  , upon
  , aTime
];

// tốt
const story = [
  once,
  upon,
  aTime,
];

// không tốt
const hero = {
    firstName: 'Ada'
  , lastName: 'Lovelace'
  , birthYear: 1815
  , superPower: 'máy tính'
};

// tốt
const hero = {
  firstName: 'Ada',
  lastName: 'Lovelace',
  birthYear: 1815,
  superPower: 'máy tính',
};

20.2 Thêm một dấu phẩy ở cuối: Đúng đó! eslint: comma-dangle

Tại sao? Điều này làm cho các so sánh git gọn gàng hơn. Ngoài ra, các trình dịch mã như Babel sẽ xóa các dấu phẩy ở cuối trong mã được dịch, có nghĩa là bạn không cần lo lắng về vấn đề của dấu phẩy ở cuối trên các trình duyệt cũ.

// không tốt - so sánh git khi không có dấu phẩy ở cuối
const hero = {
     firstName: 'Florence',
-    lastName: 'Nightingale'
+    lastName: 'Nightingale',
+    inventorOf: ['coxcomb chart', 'modern nursing']
};

// tốt - so sánh git khi có các dấu phẩy ở cuối
const hero = {
     firstName: 'Florence',
     lastName: 'Nightingale',
+    inventorOf: ['coxcomb chart', 'modern nursing'],
};

// không tốt
const hero = {
  firstName: 'Dana',
  lastName: 'Scully'
};

const heroes = [
  'Batman',
  'Superman'
];

// tốt
const hero = {
  firstName: 'Dana',
  lastName: 'Scully',
};

const heroes = [
  'Batman',
  'Superman',
];

// không tốt
function createHero(
  firstName,
  lastName,
  inventorOf
) {
  // không làm gì cả
}

// tốt
function createHero(
  firstName,
  lastName,
  inventorOf,
) {
  // không làm gì cả
}

// tốt (lưu ý là không được đặt dấu phẩy sau phần từ "còn-lại")
function createHero(
  firstName,
  lastName,
  inventorOf,
  ...heroArgs
) {
  // không làm gì cả
}

// không tốt
createHero(
  firstName,
  lastName,
  inventorOf
);

// tốt
createHero(
  firstName,
  lastName,
  inventorOf,
);

// tốt (lưu ý là không được đặt dấu phẩy sau phần từ "còn-lại")
createHero(
  firstName,
  lastName,
  inventorOf,
  ...heroArgs
);

⬆ về đầu trang

Các Dấu chấm phẩy

21.1 Dĩ nhiên. eslint: semi

Tại sao? Khi JavaScript gặp một dấu ngắt dòng mà không có dấu chấm phẩy, nó sử dụng một bộ quy tắc gọi là Quy tắc thêm dấu chấm phẩy tự động để xác định xem dấu ngắt dòng có phải là kết thúc của một câu lệnh hay không, và (như cái tên gợi ý) đặt một dấu chấn phẩy vào mã của bạn, trước dấu ngắt dòng, nếu nó cho rằng nên làm vậy. Quy tắc thêm dấu chấm phẩy tự động có một vài hành vi lập dị, và mã của bạn sẽ hỏng nếu JavaScript hiểu sai dấu ngắt dòng của bạn. Những quy tắc này ngày càng trở nên phức tạp khi các tính năng mới được bổ sung vào JavaScript. Việc kết thúc các câu lệnh một cách rõ ràng và thiết lập trình phân tích mã của bạn bắt các lỗi thiếu dấu phẩy sẽ giúp bạn tránh được các vấn đề.

// không tốt - ném ra một ngoại lệ
const luke = {}
const leia = {}
[luke, leia].forEach((jedi) => jedi.father = 'vader')

// không tốt - ngém ra một ngoại lệ
const reaction = "Không! Không thể nào!"
(async function meanwhileOnTheFalcon() {
  // xử lý `leia`, `lando`, `chewie`, `r2`, `c3p0`
  // ...
}())

// không tốt - trả về `undefined` thay vì giá trị ở dòng tiếp theo - điều luôn xảy ra khi `return` nằm một mình một dòng, do Quy tắc thêm dấu chấm phẩy tự động!
function foo() {
  return
    'search your feelings, you know it to be foo'
}

// tốt
const luke = {};
const leia = {};
[luke, leia].forEach((jedi) => {
  jedi.father = 'vader';
});

// tốt
const reaction = "Không! Không thể nào!";
(async function meanwhileOnTheFalcon() {
  // xử lý `leia`, `lando`, `chewie`, `r2`, `c3p0`
  // ...
}());

// tốt
function foo() {
  return 'search your feelings, you know it to be foo';
}

Đọc thêm.

⬆ về đầu trang

Sự ép kiểu

22.1 Thực hiện ép kiểu ở đầu mỗi câu lệnh.

22.2 Đối với các chuỗi: eslint: no-new-wrappers

// => this.reviewScore = 9;

// không tốt
const totalScore = new String(this.reviewScore); // typeof totalScore là "object", không phải "string"

// không tốt
const totalScore = this.reviewScore + ''; // cái này gọi this.reviewScore.valueOf()

// không tốt
const totalScore = this.reviewScore.toString(); // không chắc chắn sẽ thu được một chuỗi

// tốt
const totalScore = String(this.reviewScore);

22.3 Đối với các số: Sử dụng Number để ép kiểu và parseInt luôn phải được dùng với một cơ số. eslint: radix no-new-wrappers

Tại sao? Hàm parseInt sinh ra một số nguyên bằng cách diễn giải nội dung của một chuỗi dựa trên một cơ số đã định. Ký tự trống ở đầu chuỗi được bỏ qua. Nếu cơ số là undefined hoặc 0, cơ số đó được ngầm định là 10, trừ trường hợp số trong chuỗi bắt đầu bằng cặp ký tự 0x hoặc 0X, khi đó cơ số 16 được sử dụng. Điều này khác với ECMAScript 3, khi nó chỉ không khuyến khích (nhưng cho phép) sử dụng diễn giải số theo hệ bát phân. Nhiều trình duyệt chưa áp dụng theo điều trên kể từ 2013. Và, vì những trình duyệt cũ cũng cần được hỗ trợ, hãy luôn sử dụng một cơ số.

``` javascript
const inputValue = '4';

// không tốt
const val = new Number(inputValue);

// không tốt
const val = +inputValue;

// không tốt
const val = inputValue >> 0;

// không tốt
const val = parseInt(inputValue);

// tốt
const val = Number(inputValue);

// tốt
const val = parseInt(inputValue, 10);
```

22.4 Nếu, vì bất cứ lý do gì, bạn đang làm một điều gì đó thật điên và bạn gặp nghẽn cổ chai do parseInt, và bạn cần sử dụng phép dịch chuyển bit vì các lý do hiệu suất, nhớ để lại một chú thích để giải thích về thứ bạn đang làm và tại sao bạn làm vậy.
```
// tốt
/**
 * parseInt là lý do khiến mã của tôi chạy chậm.
 * Việc áp dụng phép dịch chuyển bit cho một chuỗi
 * để ép nó sang kiểu số nhanh hơn nhiều.
 */
const val = inputValue >> 0;
```

22.5 Lưu ý: Cẩn thận khi sử dụng các phép dịch chuyển bit. Các số được biểu diễn dưới dạng các giá trị 64-bit, nhưng các phép dịch chuyển bit luôn trả về một số nguyên 32-bit (nguồn). Phép dịch chuyển bit cũng có thể dẫn đến các hành vi không mong đợi đối với các giá trị lớn hơn 32 bit. Cuộc thảo luận. Số nguyên có dấu 32-bit lớn nhất là 2,147,483,647:
```
2147483647 >> 0; // => 2147483647
2147483648 >> 0; // => -2147483648
2147483649 >> 0; // => -2147483647
```

22.6 Đối với các boolean: eslint: no-new-wrappers

const age = 0;

// không tốt
const hasAge = new Boolean(age);

// tốt
const hasAge = Boolean(age);

// tốt nhất
const hasAge = !!age;

⬆ về đầu trang

Các Quy ước Đặt tên

23.1 Tránh sử dụng các tên chỉ có một chữ cái. Hãy đặt những cái tên thật ý nghĩa. eslint: id-length
```
// không tốt
function q() {
  // ...
}

// tốt
function query() {
  // ...
}
```

23.2 Sử dụng camelCase khi đặt tên các đối tượng, các hàm và các thực thể. eslint: camelcase

// không tốt
const OBJEcttsssss = {};
const this_is_my_object = {};
function c() {}

// tốt
const thisIsMyObject = {};
function thisIsMyFunction() {}

23.3 Sử dụng PascalCase chỉ khi đặt tên các hàm tạo hay các lớp. eslint: new-cap

// không tốt
function user(options) {
  this.name = options.name;
}

const bad = new user({
  name: 'đừnggg',
});

// tốt
class User {
  constructor(options) {
    this.name = options.name;
  }
}

const good = new User({
  name: 'đúng nè',
});

23.4 Không sử dụng các dấu gạch dưới ở đằng trước hoặc đằng sau. eslint: no-underscore-dangle

Tại sao? JavaScript không có khái niệm về tính riêng tư khi nói đến các thuộc tính hay các phương thức. Tuy rằng một dấu gạch dưới đặt ở đằng trước là một quy ước chung mang nghĩa “riêng tư”, thực tế, các thuộc tính trên đều hoàn toàn công khai, và vì vậy, là các thành phần trong API của bạn. Quy ước này có thể khiến các nhà phát triển nghĩ, một cách sai lầm, rằng một sự thay đổi chẳng làm hỏng điều gì, hoặc không cần thiết phải kiểm thử. tl;dr: nếu bạn muốn thứ gì đó thật “riêng tư”, sự tồn tại của nó phải được giấu đi.
```
// không tốt
this.__firstName__ = 'Panda';
this.firstName_ = 'Panda';
this._firstName = 'Panda';

// tốt
this.firstName = 'Panda';

// tốt, đối với các môi trường hỗ trợ WeakMap
// xem https://kangax.github.io/compat-table/es6/#test-WeakMap
const firstNames = new WeakMap();
firstNames.set(this, 'Panda');
```

23.5 Đừng lưu các tham chiếu đến this. Hãy sử dụng hàm mũi tên hoặc Function#bind.

// không tốt
function foo() {
  const self = this;
  return function () {
    console.log(self);
  };
}

// không tốt
function foo() {
  const that = this;
  return function () {
    console.log(that);
  };
}

// tốt
function foo() {
  return () => {
    console.log(this);
  };
}

23.6 Phần tên của một tên tệp nên giống với địa chỉ xuất mặc định của tệp đó.

// file 1 contents
class CheckBox {
  // ...
}
export default CheckBox;

// file 2 contents
export default function fortyTwo() { return 42; }

// file 3 contents
export default function insideDirectory() {}

// in some other file
// không tốt
import CheckBox from './checkBox'; // nhập PascalCase, tên camelCase
import FortyTwo from './FortyTwo'; // nhập/tên PascalCase, xuất camelCase
import InsideDirectory from './InsideDirectory'; // nhập/tên PascalCase, xuất camelCase

// không tốt
import CheckBox from './check_box'; // nhập/xuất PascalCase, tên snake_case
import forty_two from './forty_two'; // nhập/tên snake_case, xuất camelCase
import inside_directory from './inside_directory'; // nhập snake_case, xuất camelCase
import index from './inside_directory/index'; // ghi tên tệp index
import insideDirectory from './insideDirectory/index'; // ghi tên tệp index

// tốt
import CheckBox from './CheckBox'; // xuất/nhập/tên PascalCase
import fortyTwo from './fortyTwo'; // xuất/nhập/tên camelCase
import insideDirectory from './insideDirectory'; // xuất/nhập/tên camelCase; ngầm định "index"
// ^ hỗ trợ cả insideDirectory.js và insideDirectory/index.js

23.7 Sử dụng camelCase khi xuất mặc định một hàm. Tên tệp nên trùng với tên hàm.
```
function makeStyleGuide() {
  // ...
}

export default makeStyleGuide;
```

23.8 Sử dụng PascalCase khi xuất mặc định một hàm tạo / lớp / đối tượng độc nhật / một thư viện các hàm / đối tượng trần.
```
const AirbnbStyleGuide = {
  es6: {
  },
};

export default AirbnbStyleGuide;
```

23.9 Các từ viết tắt nên được viết hoa hoặc viết thường toàn bộ.

Tại sao? Các tên dùng để đọc, không phải để giải thích thuật toán.

// không tốt
import SmsContainer from './containers/SmsContainer';

// không tốt
const HttpRequests = [
  // ...
];

// tốt
import SMSContainer from './containers/SMSContainer';

// tốt
const HTTPRequests = [
  // ...
];

// như này cũng tốt
const httpRequests = [
  // ...
];

// tốt nhất
import TextMessageContainer from './containers/TextMessageContainer';

// tốt nhất
const requests = [
  // ...
];

23.10 Bạn có chọn viết hoa một hằng chỉ khi hằng đó (1) được xuất, và (2) một lập trình viên có thể tin tưởng rằng nó (và các thuộc tính của nó) là bất biến.

Tại sao? Đây là một công cụ khác để hỗ trợ chúng ta trong các hoàn cảnh mà một lập trình viên có thể không chắc chắn là một biến có bị thay đổi hay chưa. UPPERCASE_VARIABLES đang cho lập trình viên đó biết là biến này (và thuộc tính của nó) không có thay đổi gì hết.
- Thế còn các const? - Điều này là không cần thiết, vì việc viết hoa không nên được sử dụng cho các hằng ở trong cùng một tệp. Nó chỉ nên dùng cho các hằng được xuất.
- Thế còn một đối tượng được xuất thì sao? - Chỉ viết hoa ở hàng cao nhất của đối tượng xuất (kiểu như: EXPORTED_OBJECT.key) và đảm bảo rằng những thuộc tính của nó không thay đổi.
```
// không tốt
const PRIVATE_VARIABLE = 'không nên viết hoa bừa bãi các biến trong một tệp';

// không tốt
export const THING_TO_BE_CHANGED = 'rõ ràng không nên viết hoa';

// không tốt
export let REASSIGNABLE_VARIABLE = 'đừng có sử dụng let với tên viết hóa';

// ---

// được cho phép, nhưng không không rõ về mặt ngữ nghĩa
export const apiKey = 'SOMEKEY';

// tốt hơn hầu hết các trường hợp khác
export const API_KEY = 'SOMEKEY';

// ---

// không tốt - viết hoa không cần thiết chẳng cung cấp gì trị gì về mặt ngữ nghĩa
export const MAPPING = {
  KEY: 'giá trị'
};

// tốt
export const MAPPING = {
  key: 'giá trị'
};
```

⬆ về đầu trang

Các Hàm truy cập

24.1 Các hàm truy cập cho các thuộc tình là không bắt buộc.

24.2 Không sử dụng hàm đọc/hàm ghi của JavaScript vì chúng gây ra các hiệu ứng phụ không mong muốn và khó để kiểm thử, bảo trì, và hình dung. Thay vào đó, nếu bạn muốn tạo hàm truy cập, sử dụng getVal() và setVal('hello').
```
// không tốt
class Dragon {
  get age() {
    // ...
  }

  set age(value) {
    // ...
  }
}

// tốt
class Dragon {
  getAge() {
    // ...
  }

  setAge(value) {
    // ...
  }
}
```

24.3 Nếu thuộc tính/phương thức là một boolean, dùng isVal() hoặc hasVal().

// không tốt
if (!dragon.age()) {
  return false;
}

// tốt
if (!dragon.hasAge()) {
  return false;
}

24.4 Có thể dùng các hàm get() và set(), nhưng nhớ là phải nhất quán.

class Jedi {
  constructor(options = {}) {
    const lightsaber = options.lightsaber || 'xanh dương';
    this.set('lightsaber', lightsaber);
  }

  set(key, val) {
    this[key] = val;
  }

  get(key) {
    return this[key];
  }
}

⬆ về đầu trang

Các Sự kiện

25.1 Khi gắn các trọng tải dữ liệu cho các sự kiện (dù là các sự kiện DOM hay thứ gì đó tư hữu hơn như các sự kiện trong Backbone), hãy truyền vào một đối tượng nguyên văn (hay còn gọi là "giá trị băm") thay vì giá trị gốc. Điều này cho phép những người đóng góp sau này có thể thêm dữ liệu vào trọng tải mà không cần phải tìm và cập nhật mỗi hàm xử lý cho sự kiện. Ví dụ, thay vì:
```
// không tốt
$(this).trigger('listingUpdated', listing.id);

// ...

$(this).on('listingUpdated', (e, listingID) => {
  // làm gì đó với listingID
});
```
hãy dùng:
```
// tốt
$(this).trigger('listingUpdated', { listingID: listing.id });

// ...

$(this).on('listingUpdated', (e, data) => {
  // làm gì đó với listingID
});
```

⬆ về đầu trang

jQuery

26.1 Bắt đầu các biến lưu các đối tượng jQuery với $.

// không tốt
const sidebar = $('.sidebar');

// tốt
const $sidebar = $('.sidebar');

// tốt
const $sidebarBtn = $('.sidebar-btn');

26.2 Lưu tạm các truy vấn jQuery.

// không tốt
function setSidebar() {
  $('.sidebar').hide();

  // ...

  $('.sidebar').css({
    'background-color': 'pink',
  });
}

// tốt
function setSidebar() {
  const $sidebar = $('.sidebar');
  $sidebar.hide();

  // ...

  $sidebar.css({
    'background-color': 'pink',
  });
}

26.3 Với các truy vấn, hãy sử dụng truy vấn xếp tầng $('.sidebar ul') hoặc cha > con $('.sidebar > ul'). jsPerf

26.4 Sử dụng find với một phạm vi đối tượng jQuery cho các truy vấn.

// không tốt
$('ul', '.sidebar').hide();

// không tốt
$('.sidebar').find('ul').hide();

// tốt
$('.sidebar ul').hide();

// tốt
$('.sidebar > ul').hide();

// tốt
$sidebar.find('ul').hide();

⬆ về đầu trang

Tính tương thích của ECMAScript 5

27.1 Tham khảo bảng tính tương thích ES5 của Kangax.

⬆ về đầu trang

Lối viết ECMAScript 6+ (ES 2015+)

28.1 Đây là một bộ sưu tập các liên kết tới các tính năng khác nhau của ES6+.

Các Hàm mũi tên
Các Lớp
Cú pháp Định nghĩa Phương thức Rút gọn
Cú pháp Định nghĩa Thuộc tính Rút gọn
Các Tên Được tính của Thuộc tính
Các Mẫu chuỗi
Trích xuất
Các Tham số Mặc định
Còn-lại
Liệt kê Mảng
Let và Const
Toán tử Lũy thừa
Các Đối tượng duyệt và các Hàm sinh trị
Các Mô-đun

28.2 Không sử dụng các đề xuất TC39 mà chưa đến giai đoạn 3.

Tại sao? Chúng chưa được hoàn thiện, và chúng có thể thay đổi bất cứ lúc nào hoặc bị rút lại hoàn toàn. Chúng ta muốn sử dụng JavaScript, mà các đề xuất thì chưa phải là JavaScript.

⬆ về đầu trang

Thư viện Tiêu Chuẩn

Thư viện tiêu chuẩn chứa các hàm tiện ích không hoạt động đúng lắm nhưng vẫn tồn tại vì các lý do cũ.

29.1 Sử dụng Number.isNaN thay vì hàm toàn cục isNaN. eslint: no-restricted-globals

Tại sao? Hàm toàn cục isNaN ép các giá trị không phải số thành số và trả về true cho tất cả những gì mà bị ép thành NaN. Nếu đây là hành vi mong muốn, hãy khiến nó được biểu đạt rõ ràng.
```
// không tốt
isNaN('1.2'); // false
isNaN('1.2.3'); // true

// tốt
Number.isNaN('1.2.3'); // false
Number.isNaN(Number('1.2.3')); // true
```

29.2 Sử dụng Number.isFinite thay vì hàm toàn cục isFinite. eslint: no-restricted-globals

Tại sao? Hàm toàn cục isFinite ép các giá trị không phải số thành số và trả về true cho tất cả những gì bị ép thành một số mà không phải là vô hạn. Nếu đây là hành vi mong muốn, hãy khiến nó được biểu đạt rõ ràng.
```
// không tốt
isFinite('2e3'); // true

// tốt
Number.isFinite('2e3'); // false
Number.isFinite(parseInt('2e3', 10)); // true
```

⬆ về đầu trang

Sự kiểm thử

30.1 Có chứ.
```
function foo() {
  return true;
}
```

30.2 Không, nhưng nghiêm túc này:
- Dù bạn dùng nền tảng kiểm thử nào thì bạn cũng nên viết các kiểm thử!
- Cố gắng viết thật nhiều các hàm thuần, nhỏ và giảm thiểu số các sự biến đổi.
- Cẩn thận với các giả lập mô-đun và đối tượng - chúng có thể khiến các chương trình kiểm thử của bạn dễ vỡ.
- Chúng tôi chủ yếu sử dụng mocha và jest tại Airbnb. tape cũng đôi khi được sử dụng cho các mô-đun nhỏ và tách biệt.
- 100% độ bao phủ kiểm thử là một mục tiêu tốt để phấn đấu, dù không phải lúc nào cũng khả thi.
- Mỗi khi bạn sửa một lỗi, viết một kiểm thử hồi quy. Một lỗi được sửa nhưng không được viết kiểm thử lại gần như chắc chắn sẽ lại hỏng trong tương lai.

⬆ về đầu trang

Hiệu suất

⬆ về đầu trang

Các Tài nguyên

Học ES6+

Đọc cái này đi

Standard ECMA-262

Các công cụ

Trình phân tích lối viết mã
- ESlint - Lối viết của Airbnb .eslintrc
- JSHint - Lối viết của Airbnb .jshintrc
Gói Neutrino - @neutrinojs/airbnb

Các Định hướng Lối viết Khác

Các Lối viết Khác

Naming this in nested functions - Christian Johansen
Conditional Callbacks - Ross Allen
Popular JavaScript Coding Conventions on GitHub - JeongHoon Byun
Multiple var statements in JavaScript, not superfluous - Ben Alman

Đọc thêm

Understanding JavaScript Closures - Angus Croll
Basic JavaScript for the impatient programmer - Dr. Axel Rauschmayer
You Might Not Need jQuery - Zack Bloom & Adam Schwartz
ES6 Features - Luke Hoban
Frontend Guidelines - Benjamin De Cock

Các Tựa sách

JavaScript: The Good Parts - Douglas Crockford
JavaScript Patterns - Stoyan Stefanov
Pro JavaScript Design Patterns - Ross Harmes and Dustin Diaz
High Performance Web Sites: Essential Knowledge for Front-End Engineers - Steve Souders
Maintainable JavaScript - Nicholas C. Zakas
JavaScript Web Applications - Alex MacCaw
Pro JavaScript Techniques - John Resig
Smashing Node.js: JavaScript Everywhere - Guillermo Rauch
Secrets of the JavaScript Ninja - John Resig and Bear Bibeault
Human JavaScript - Henrik Joreteg
Superhero.js - Kim Joar Bekkelund, Mads Mobæk, & Olav Bjorkoy
JSBooks - Julien Bouquillon
Third Party JavaScript - Ben Vinegar and Anton Kovalyov
Effective JavaScript: 68 Specific Ways to Harness the Power of JavaScript - David Herman
Eloquent JavaScript - Marijn Haverbeke
You Don’t Know JS: ES6 & Beyond - Kyle Simpson

Các Bài viết

Các Bản phát thanh

⬆ về đầu trang

Thực tế Áp dụng

Đây là danh sách những tổ chức sử dụng định hướng lối viết này. Gửi cho chúng tôi một yêu cầu kéo và chúng tôi sẽ thêm bạn vào danh sách.

123erfasst: 123erfasst/javascript
4Catalyzer: 4Catalyzer/javascript
Aan Zee: AanZee/javascript
Airbnb: airbnb/javascript
AloPeyk: AloPeyk
AltSchool: AltSchool/javascript
Apartmint: apartmint/javascript
Ascribe: ascribe/javascript
Avant: avantcredit/javascript
Axept: axept/javascript
Billabong: billabong/javascript
Bisk: bisk
Bonhomme: bonhommeparis/javascript
Brainshark: brainshark/javascript
CaseNine: CaseNine/javascript
Cerner: Cerner
Chartboost: ChartBoost/javascript-style-guide
Coeur d'Alene Tribe: www.cdatribe-nsn.gov
ComparaOnline: comparaonline/javascript
Compass Learning: compasslearning/javascript-style-guide
DailyMotion: dailymotion/javascript
DoSomething: DoSomething/eslint-config
Digitpaint digitpaint/javascript
Drupal: www.drupal.org
Ecosia: ecosia/javascript
Evernote: evernote/javascript-style-guide
Evolution Gaming: evolution-gaming/javascript
EvozonJs: evozonjs/javascript
ExactTarget: ExactTarget/javascript
Flexberry: Flexberry/javascript-style-guide
Gawker Media: gawkermedia
General Electric: GeneralElectric/javascript
Generation Tux: GenerationTux/javascript
GoodData: gooddata/gdc-js-style
GreenChef: greenchef/javascript
Grooveshark: grooveshark/javascript
Grupo-Abraxas: Grupo-Abraxas/javascript
Happeo: happeo/javascript
Honey: honeyscience/javascript
How About We: howaboutwe/javascript
HubSpot: HubSpot/javascript
Hyper: hyperoslo/javascript-playbook
InterCity Group: intercitygroup/javascript-style-guide
Jam3: Jam3/Javascript-Code-Conventions
JSSolutions: JSSolutions/javascript
Kaplan Komputing: kaplankomputing/javascript
KickorStick: kickorstick
Kinetica Solutions: kinetica/javascript
LEINWAND: LEINWAND/javascript
Lonely Planet: lonelyplanet/javascript
M2GEN: M2GEN/javascript
Mighty Spring: mightyspring/javascript
MinnPost: MinnPost/javascript
MitocGroup: MitocGroup/javascript
Muber: muber
National Geographic: natgeo
NullDev: NullDevCo/JavaScript-Styleguide
Nulogy: nulogy/javascript
Orange Hill Development: orangehill/javascript
Orion Health: orionhealth/javascript
OutBoxSoft: OutBoxSoft/javascript
Peerby: Peerby/javascript
Pier 1: Pier1/javascript
Qotto: Qotto/javascript-style-guide
React: facebook.github.io/react/contributing/how-to-contribute.html#style-guide
REI: reidev/js-style-guide
Ripple: ripple/javascript-style-guide
Sainsbury’s Supermarkets: jsainsburyplc
Shutterfly: shutterfly/javascript
Sourcetoad: sourcetoad/javascript
Springload: springload
StratoDem Analytics: stratodem/javascript
SteelKiwi Development: steelkiwi/javascript
StudentSphere: studentsphere/javascript
SwoopApp: swoopapp/javascript
SysGarage: sysgarage/javascript-style-guide
Syzygy Warsaw: syzygypl/javascript
Target: target/javascript
Terra: terra
TheLadders: TheLadders/javascript
The Nerdery: thenerdery/javascript-standards
Tomify: tomprats
Traitify: traitify/eslint-config-traitify
T4R Technology: T4R-Technology/javascript
UrbanSim: urbansim
VoxFeed: VoxFeed/javascript-style-guide
WeBox Studio: weboxstudio/javascript
Weggo: Weggo/javascript
Zillow: zillow/javascript
ZocDoc: ZocDoc/javascript

⬆ về đầu trang

Danh mục các Thuật ngữ

Dưới đây là danh mục các từ tiếng Anh tương ứng của các thuật ngữ, và/hoặc các từ, cụm từ mà thông thường không được dịch, như: "style guide", "object", "polyfill", v.v. Các từ, cụm từ được dịch có thể chỉ đúng trong ngữ cảnh là bản dịch này.

Nếu bạn cảm thấy một thuật ngữ có vẻ được dịch chưa hợp lý, hoặc bạn cần sự giải thích về một thuật ngữ, bạn có thể mở một Vấn đề để thảo luận.

Nếu bạn biết một từ/cụm từ tiếng Việt thích hợp hơn cho một thuật ngữ, và nếu bạn sẵn lòng, bạn có thể mở một Đề nghị kéo cho một sửa đổi.

Tiếng Việt	English
Ánh xạ	Map/mapping
Ba ngôi	Ternary
Bản sao/sao	Copy
Bản sao nhanh/sao nhanh	Shallow-copy
Bắt	Catch
Bất biến	Immutable
Bẻ nhánh	Fork
Biến	Variable/var
Biến đổi/sự biến đổi	Mutate/mutation
Biểu thức	Expression
Biểu thức hàm	Function expression
Biểu thức hàm gọi tức thời	Immediately invoked function expression/IIFE
Bộ khung phần mềm	Framework
Bộ phận hàm	Function signature
Bộ tải	Loader
Bộ tổng hợp	Bundler
Bộ trợ năng	Shim/polyfill
Bước	Step
Cải tiến mã nguồn	Refactor code/code refactoring
Căn đầu dòng	Indent
Câu lệnh/lệnh	Statement
Cấu trúc một dòng	One-liner
Chỉ-viết	Write-only
Chuỗi	String
Chú thích	Comment
Còn-lại	Rest
Cơ số	Radix
Cú pháp	Syntax
Cú pháp tiện lợi	Syntactic sugar
Cũ	Legacy
Dấu gạch dưới	Underscore
Dấu lược/dấu nháy đơn	Single quote
Dấu ngắt dòng/dấu xuống dòng	Line break
Dấu ngoặc	Brace
Dấu ngoặc nhọn	Curly brace
Dấu ngoặc tròn	Parenthesis/parentheses
Dấu ngoặc vuông	Array bracket
Dịch mã	Transpile
Duyệt	Iterate
Đề xuất	Proposal
Đề nghị kéo	Pull request
Định danh	Identifier
Định hướng lối viết	Style guide
Định nghĩa	Define
Đối số	Argument
Đối tượng	Object
Đối tượng duyệt	Iterator/iterator object
Đối tượng đích	Receiver
Đối tượng độc nhất	Singleton
Đối tượng khả duyệt	Iterable object
Đối tượng rỗng	Null object
Đối tượng trần	Bare object
Độ bao phủ	Coverage
Đường dẫn	Path
Ép kiểu/sự ép kiểu	Coerce/coercion/cast/casting
Gán/phép gán	Assign/assignment
Gán lại	Reassign
Ghép	Concatenate/concatenation/concat
Giai đoạn chết	Temporal dead zone/TDZ
Giá trị băm	Hash/hash value
Giá trị gốc	Raw value
Giả lập đối tượng	Mock
Giả lập mô-đun	Stub
Giống-mảng	Array-like
Gọi/phép gọi	Call/invoke/invocation
Hàm	Function
Hàm bất định	Variadic function
Hàm bậc cao hơn	Higher-order function
Hàm đọc	Getter/getter function
Hàm ghi	Setter/setter function
Hàm gọi ngược	Callback/callback function
Hàm gọi tức thời	Immediately invoked function
Hàm hữu danh	Named function
Hàm mũi tên	Arrow function
Hàm sinh trị	Generator/generator function
Hàm tạo	Constructor
Hàm thuần	Pure function
Hàm tiện ích	Utility/utility function
Hàm truy cập	Accessor/accessor function
Hàm vô danh	Anonymous function
Hàm xử lý	Handler
Hằng	Constant/const
Hiệu suất	Performance/perf
Hiệu ứng phụ	Side effect
Kéo lên/sự kéo lên/nổi lên/sự nổi lên	Hoist/hoisting
Kê	Pad
Khai báo	Declare/declaration
Khoảng trắng	Whitespace
Không gian tên	Namespace
Khối	Block
Kiểm thử/sự kiểm thử	Test/testing
Kiểu giá trị	Type
Kiểu nguyên thủy	Primitive
Kiểu sai	Falsy/falsey
Ký pháp	Notation
Ký pháp chấm	Dot notation
Ký tự đại diện	Wildcard/wildcard character
Ký tự thoát	Escape character
Liên kết	Link
Liệt kê	Spread
Lô-gíc	Logic
Lỗ hổng	Vulnerability
Lỗi câm	Silent error
Lớp	Class
Lớp cha	Parent class/parent
Lũy thừa	Exponentiation
Lưu tạm	Cache
Lựa chọn	Select/selection
Mã/mã nguồn	Code/source code
Mảng	Array
Mô-đun	Module
Một ngôi	Unary
Ném ra	Throw
Ngăn xếp	Call stack/stack
Ngầm định	Implicit
Nghẽn cổ chai	Bottleneck
Ngoại lệ	Exception
Nguyên mẫu	Prototype
Nguyên văn	Literal
Ngữ cảnh	Context
Nhà phát triển	Developer/dev
Nhập/lệnh nhập	Import
Nối chuỗi	Chain/chaining
Phần tử	Element
Phép dịch chuyển bit	Bit-shift/bit-shift operation
Phép tăng	Increment
Phép giảm	Decrement
Phép tiền tăng/sự tiền tăng	Pre-increment
Phép tiền giảm/sự tiền giảm	Pre-decrement
Phi chuẩn	Non-standard
Phương thức	Method
Quy tắc chèn dấu chấm phẩy tự động	Automatic semicolon insertion/ASI
Quy ước đặt tên	Naming convention
Ràng buộc	Binding
Riêng tư	Private
Rút gọn/dạng rút gọn	Shorthand/shortcut
So sánh/sự so sánh	Compare/comparision
Sự bằng nhau	Equality
Sự kiện	Event/ev
Tên của thuộc tính	Property name/key
Tên được tính của thuộc tính	Computed property name
Tham chiếu	Reference
Tham số	Parameter
Thành viên	Member
Thân hàm	Function body
Thẻ	Tab
Thuộc phạm vi hàm	Function-scoped
Thuộc phạm vi khối	Block-scoped
Thuộc tính	Property
Thư viện	Library/lib
Thừa kế	Inherit/inheritance
Thực thể	Instance
Tiến trình gọi	Caller
Tính khả đọc	Readability
Tính tương thích	Compatibility
Toàn cục	Global
Toán tử	Operator
Trình gỡ lỗi	Debugger
Trình phân tích mã	Linter
Trình thực thi	Engine
Trích xuất/sự trích xuất	Destructure/destructuring/extract
Trọng tải	Payload
Truy cập	Access
Truy vấn	Query
Từ khóa	Keyword
Từ khóa điều chỉnh	Modifier
Ứng dụng	Application/app
Vấn đề	Issue
Xếp tầng	Cascade/cascading
Xuất/lệnh xuất	Export
Xuất hữu danh	Named export
Xuất mặc định	Default export
Xung đột khi gộp	Merge conflict

⬆ về đầu trang

Dịch

Định hướng này cũng được dịch sang các ngôn ngữ khác:

English (United States): airbnb/javascript
Brazilian Portuguese: armoucar/javascript-style-guide
Bulgarian: borislavvv/javascript
Catalan: fpmweb/javascript-style-guide
Chinese (Simplified): lin-123/javascript
Chinese (Traditional): jigsawye/javascript
French: nmussy/javascript-style-guide
German: timofurrer/javascript-style-guide
Italian: sinkswim/javascript-style-guide
Japanese: mitsuruog/javascript-style-guide
Korean: ParkSB/javascript-style-guide
Russian: leonidlebedev/javascript-airbnb
Spanish: paolocarrasco/javascript-style-guide
Thai: lvarayut/javascript-style-guide
Turkish: eraycetinay/javascript
Ukrainian: ivanzusko/javascript

Định hướng Lối viết JavaScript

Lời dẫn

Nói chuyện với Chúng tôi về JavaScript

Tìm chúng tôi trên gitter.

Những Người đóng góp

Xem những Người đóng góp

Giấy phép

(The MIT License)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

⬆ về đầu trang

Các Sửa đổi

Chúng tôi khuyến khích bạn bẻ nhánh bản định hướng này và thay đổi các quy tắc để phù hợp với định hướng lối viết của nhóm của bạn. Dưới đây, bạn có thể liệt kê các sửa đổi đối với bản định hướng này. Điều này cho phép bạn thỉnh thoảng cập nhật lối viết mà không cần giải quyết các xung đột khi gộp.

Name		Name	Last commit message	Last commit date
Latest commit History 5 Commits
LICENSE.txt		LICENSE.txt
README.md		README.md
terminology.js		terminology.js
terminology.md		terminology.md

License

dangvanduc1999/javascript-style-guide

Folders and files

Latest commit

History

Repository files navigation

};

About

Resources

License

Stars

Watchers

Forks

Languages