6 cách viết mã nguồn Javascript ngắn gọn mà vẫn dễ hiểu

Lập trình viên là một nghề gần giống như phiên dịch viên vậy. Tức là bạn sẽ có nhiệm vụ chuyển ý hiểu của con người và viết lại bằng ngôn ngữ lập trình để cho cho máy tính hiểu được. Cùng một ý nhưng sẽ có rất nhiều cách diễn đạt khác nhau, lập trình cũng vậy. Cùng một logic nghiệp vụ, nhưng bạn có thể sử dụng các cú pháp/toán tử khác nhau để thực hiện nó.

Ở cảnh giới cao hơn, mã nguồn không chỉ cho máy tính hiểu được mà còn phải cho những lập trình viên khác đọc cũng dễ dàng hiểu được logic của nó. Đó mới là cái khó.

Bài viết hôm nay, mình sẽ chia sẻ một số cách viết code javascript ngắn gọn hơn nhưng vẫn rất dễ hiểu.

1. Sử dụng toán tử điều kiện kết hợp

Toán tử này trong tiếng Anh người ta gọi là Ternary Operator, mình cũng không biết dịch sang tiếng Việt là gì cho chuẩn nữa, bạn nào biết thì comment bên dưới nhé.

Toán tử này khá phổ biến để thay thế cho một block câu lệnh điều kiện. Cú pháp như dưới đây:

<condition> ? <what to do if true> : <what to do if false>

Mình sẽ lấy ví dụ minh họa một đoạn code điều kiện phổ biến như sau:

if(a>b){
   console.log('A lớn hơn')
} else {
   console.log('B lớn hơn')
}

Bạn có thể viết lại như sau:

a>b ? console.log('A lớn hơn') : console.log('B lớn hơn')

2. Rút gọn điều kiện

Kỹ thuật này có thể được sử dụng khi bạn sử dụng các câu điều kiện đơn giản, nó được dùng kết hợp với toán tử &&

Ví dụ:

if(a===b){
  doSomething()
}

Bạn có thể viết gọn lại thành:

a===b && doSomething ()

Nếu điều kiện (a===b) mà sai thì câu lệnh doSomething() sẽ không được thực hiện. Với cách này, chúng ta có được một câu lệnh tương đương với câu lệnh điều kiện if(…)

Phức tạp hơn một chút, bạn có thể kết hợp nhiều điều kiện để thay thế nhiều câu lệnh if(…)

Ví dụ:

a===b && x===y && executeFunction()
a===b || x===y) && executeFunction()

Chạy thử nhé:

10===10 && 1===1 && console.log('ok')  // prints ok
10===10 && 1===2 && console.log('ok')  // prints false
10===10 || 1===2) && console.log('ok') // prints ok

3. Kiểm tra thuộc tính của Object

Trong trường hợp bạn muốn kiểm tra sự tồn tại của một thuộc tính nào đó của một object, bạn có thể sử dụng toán tử Optional chaining operator.

Ví dụ bạn có object như sau:

const obj = {
  name:{
      firstName: 'Neelesh',
      lastName: 'Arora'
  }
}

Giờ để kiểm tra xem một thuộc tính nào có tồn tại trong object hay, có phải bạn hay làm như này không?

if(obj.name){
   if(obj.name.firstName){
      console.log(obj.name.firstName)
   }
}if(obj.name && obj.name.firstName){
    console.log(obj.name.firstName)
}

Có một cách viết gọn hơn hẳn, đó là:

console.log(obj.name?.firstName)

Ngạc nhiên chưa?

4. Toán tử kiểm tra Null

Ở mục 1, chúng ta đã có cách viết ngắn gọn lại câu điều kiện if(…) else. Ở phần này, mình giới thiệu cách viết còn ngắn gọn hơn nữa, bằng cách sử dụng toán tử (??)

Ví dụ một câu lệnh như sau:

return obj?.name ? obj.name : 'Name doesn't exist'

Bạn có thể viết gọn như sau:

return obj?.name ?? 'Name doesn't exist'

5. Sử dụng return chung

Cái thủ thuật này nó quá đơn giản, chắc nhiều người cũng đã sử dụng rồi. Chúng ta return kết quả cuối cùng nếu không điều kiện if(…) nào thỏa mãn. Nhìn cách viết mới này dễ hiểu hơn hẳn.

Ví dụ:

function a(arg){
   if(arg===0){
      return 'Argument is zero'
   }else if(arg>0){
       return 'Argument is a positive number
   }else{
      return 'Argument is a negative number'
   }
}

Bạn chuyển thành:

function a(arg){
   if(arg===0){
      return 'Argument is zero'
   }else if(arg>0){
       return 'Argument is a positive number
   }
   return 'Argument is a negative number'   
}

6. Tránh return new Promise() và sử dụng trực tiếp hàm trong class Promise

Về Promise, chúng ta đã có khá nhiều bài viết liên quan tới chủ đề này rồi, bạn có thể tham khảo lại.

🔥 Đọc thêm về Promise:

• Tìm hiểu cách sử dụng promise trong Javascript
• 5 thủ thuật hay với Javascript Promise

Ở phần này, mình chỉ có lời khuyên duy nhất là thay vì khởi tạo đối tượng Promise, bạn hoàn toàn có thể gọi trực tiếp các hàm của Promise (giống như cách gọi các hàm static trong java vậy)

Ví dụ:

function isPositiveNumber(num){
   return new Promise((resolve,reject)=>{
      if(num > 0){
         resolve(true)
      }
      reject(false)
   })
}

Bạn chuyển thành:

function isPositiveNumber(num){
   num > 0 ? Promise.resolve(true) : Promise.reject(false)
}

Tạm kết

Viết code javascript ngắn gọn không phải để tăng hiệu năng của ứng dụng mà mục đích chính là để cho mã nguồn dễ bảo trì hơn, người sau vào dự án sẽ dễ dàng đọc hiểu và nắm được toàn bộ code base dự án.

Hi vọng bài viết này có ích cho bạn.