JS Convention

Coding

Một số quy ước giúp code JavaScript dễ đọc hơn:

Không cần dấu chấm phẩy (;) ở cuối mỗi câu lệnh.
Luôn bắt đầu một biến bằng chữ cái.
Sử dụng const cho hằng số, mảng, đối tượng và hàm. Đối với mảng, luôn dùng danh từ số nhiều.
Luôn có khoảng cách giữa các toán tử toán học, các phép gán và sau dấu phẩy.
Nếu hàm chỉ có một dòng (one-liner function), sử dụng trả về ngầm định. Ví dụ:
```
const square = (n) => n * n
```
Nên thêm dấu phẩy ở thuộc tính cuối cùng của đối tượng hoặc ở phần tử cuối cùng của mảng.
Khi sử dụng console.log, nên thêm thông tin về ngữ cảnh hoặc vị trí dòng của thông tin được in ra.

Object

Ví dụ cho ba object dưới đây:

const apple = { name: "apple", color: "red" }
const banana = { name: "banana", color: "yellow" }
const grape = { name: "grape", color: "purple" }

Khi xuất ra console, ta nên gom các object trên lại thành một object. Khi đó, ta có thể biết được tên của các object dưới dạng thuộc tính của một object khác.

// Bad ❌
console.log(apple, banana, grape)
 
// Good ✅
console.log({ apple, banana, grape })

Console

Chúng ta có thể sử dụng phương thức table của Console để hiển thị các object ra dưới dạng bảng:

console.table([apple, banana, grape])

Nếu muốn theo dõi call stack của một hàm nào đó, ta có thể dùng console.trace:

const fn = () => console.trace("Hey! I'm here")
 
fn()

Destructuring

Khi một đối tượng được dùng làm đối số, ta nên dùng destructuring để lấy ra các thuộc tính mà ta cần từ đối số đó. Kỹ thuật này còn giúp giảm số lần viết lại tên của object.

Ví dụ:

const pikachu = {
  name: "pikachu",
  color: "🟡",
  type: "⚡",
  weight: 13,
  height: 4,
}
 
// Bad ❌
function attack(pokemon) {
  console.log(`${pokemon.name} is attacking and his hp is ${pokemon.hp}`)
}
 
// Good ✅
function attack({ name, hp }) {
  console.log(`${name} is attacking and his hp is ${hp}`)
}
 
// Or
function attack(pokemon) {
  const { name, hp } = pokemon
  console.log(`${name} is attacking and his hp is ${hp}`)
}

Spreading

Giả sử có hai đối tượng sau:

const pikachu = {
  name: "pikachu",
  color: "🟡",
  type: "⚡",
}
 
const stats = {
  weight: 13,
  height: 4,
  hp: 100,
}

Ta nên sử dụng spread operator để thêm các thuộc tính của một đối tượng vào một đối tượng khác:

// Bad ❌
pikachu["weight"] = stats.weight
pikachu["height"] = stats.height
pikachu["hp"] = stats.hp
 
// Or
const lv0Pikachu = Object.assign(pikachu, stats)
 
// Good ✅
const lv0Pikachu = { ...pikachu, ...stats }

Resources

(62) JavaScript Pro Tips - Code This, NOT That - YouTube

Quartz 🪬

Explorer