Xin chào các bạn, hôm nay mình xin giới thiệu tới các bạn 10 best practices theo mình có thể giúp code Javascript của bạn clean hơn.
Như chúng ta đã biết, JS bắt đầu từ một ngôn ngữ kịch bản - scripting language, đến nay đã phát triển vượt bậc trờ thành một ngôn ngữ hỗ trợ server-side và có một cộng đồng cực kì nhiệt tình và phong phú.
Bên cạnh đó, một lập trình viên chuyển nghiệp sẽ viết code cho “other guy” đọc và hiểu được chứ không phải chỉ riêng máy hiểu. Và code như thế được gọi là “clean code”.

OK, giới thiệu như vậy cũng đã đủ, let’s begin!

1. Variable Naming

Hãy đặt tên biến mà nó thể hiện được ý nghĩa đang sau đó, để dễ dàng tìm kiếm và hiểu được mục đích của nó

// BAD
let dob = new Date()
let y = new Date().getFullYear()
let ok
if (y > 30) {
 ok = true
}

// GOOD
const MAX_AGE =  30
let dateOfBirth = new Date()
let year = new Date().getFullYear()
let isOlderThanMaxAge = user.age > MAX_AGE

Sẽ tốt hơn nếu bạn đặt tên biến dễ phát âm, khi đó sẽ giúp bạn cũng như đồng nghiệp dễ dàng đọc và review code hơn
Khi đọc code thì việc đọc “year” sẽ dễ dàng hơn đọc “y y y y” rất nhiều.

// BAD
const yyyy = new Date().getFullYear()

// GOOD
const year = new Date().getFullYear()

2. Functions parameters

Khi khai báo 1 hàm, nên ưu tiên chọn có ít tham số và nếu nó là object thì nên khai báo đầy đủ parameter thay vì chỉ 1 object parameter. Điều này sẽ giúp bạn biết chính xác cần truyền tham số gì vào hàm ngay khi bạn đọc đến nó


// BAD
function displayUserName(user) {
 console.log(`Hello my name is ${user.firstName} ${user.lastName}. And I am ${user.age} years old`)
}

// GOOD
function displayUserName({firstName, lastName, age}){
 console.log(`Hello my name is ${firstName} ${lastName}. And I am ${age} years old`)
}

3. Conditionals

Trong khi code, hãy tránh sử dụng điều kiện phủ định.


// BAD
function isUserNotBlocked(user) {
 // Code here
}
if (!isUserNotBlocked(user)) {
 // Do something
}

// GOOD
function isUserBlocked(user) {
 // Code here
}
if (isUserBlocked(user)) {
 // Do something
}

Hãy sử dụng điều kiện short hand thay cho các biến boonlean nếu bạn đảm bảo giá trị của nó khác undefined và null


// BAD
if (isLoading === true) {
 // Do Something
}
if (isLoading === false) {
 // Do Something
}

// GOOD
if (isLoading) {
 // Do Something
}
if (!isLoading) {
 // Do Something
}

4. Destructuring assignments

Đây là tính năng được giới thiệu ở ES6, giúp gán giá trị từ mảng hoặc các thuộc tính của object vào một biến nào đó

// BAD
const arr = ['foo', 'bar', 'baz']
const foo = arr[0]
const bar = arr[0]
const baz = arr[0]

// GOOD
const [foo, bar, baz] =  ['foo', 'bar', 'baz']


const data = {
 firstAttr: "first",
 secondAttr: {
  thirdAttr: 123
 }
}
// BAD
const fisrtArrt = data.fisrtArrt
const thirdAttr =  data.secondAttr.thirdAttr

// GOOD
const {fisrtAttr, secondAttr: {thirdAttr}} = data

5. Default function parameter

Cho phép khởi tạo một giá trị mặc định cho tham số trong hàm khi không có giá trị nào hoặc undefined được truyền vào trong hàm


// BAD
function getListOfUserID(users) {
 return users.maps(function(user){ return user.id})
}

console.log(getListOfUserID()) // Throws Error

// GOOD
function getListOfUserID(users = []) {
 return users.maps(function(user){ return user.id})
}

console.log(getListOfUserID()) // display empty array []

6. Each function should do one things

Đây cũng là một nguyên tắc quan trọng trong software engineering. Khi một function thực hiện nhiều chức năng thì nó rất khó để viết cũng như test đồng thời nếu bạn có thể tách biệt một function với chỉ 1 chức năng duy nhất thì code của bạn rất dễ maintain, refactor và dễ đọc dễ hiểu bởi developer khác
Thay vì viết


// BAD
function sendEmailToActiveUsers() {
 const users = database.findUser();
 const activeUsers = users.filter(user => user.isActive)
 activeUsers.forEach(user} => {
  sendEmail(user.email)
 })
}

Hãy viết


// GOOD
function getActiveUsers() {
 const users = database.findUser()
 return users.filter(user => user.isActive)
}

const activeUsers = getActiveUsers()
activeUsers.forEach(user} => {
 sendEmail(user.email)
})

7. Giảm thiểu side effect

Để tránh những lỗi xảy ra do side effect hãy sử dụng pure function bất cứ khi nào bạn có thể dùng chúng, đồng thời code của bạn sẽ dễ test hơn


// BAD
function addNewUserToList(usersList, newUser){
 return usersList.push(newUser)
}

//GOOD
function addNewUserToList(usersList, newUser){
 return [...usersList, newUser]
}

Kết

Hi vọng qua các tips nhỏ trên có thể giúp code JS của các bạn trở nên sạch hơn và giúp bạn làm việc tốt hơn trên con đường trở thành master Javascript của mình. Nếu các bạn có những tips thú vị hơn, hãy để lại comment bên dưới để chia sẻ cho mọi người cùng biết nhé.
Thanks

Reference

https://github.com/ryanmcdermott/clean-code-javascript