JavaScript Shorthand

Cải thiện code bằng JavaScript Shorthand

Table of Content

Trong bài viết này, mình sẽ giới thiệu về JavaScript Shorthand – một cách hữu ích giúp viết ngắn gọn cho việc tối ưu code trong lập trình JavaScript. Có rất nhiều shorthand, mình sẽ chia sẻ những về những mình thường sử dụng nhất. Những cú pháp này sẽ áp dụng được cho TypeScript hay những thư viện, framework của JavaScript như React, Angular, NodeJS,…

JavaScript Shorthand là gì?

Về cơ bản, đúng như tên gọi thì JavaScript Shorthand là những cú pháp ngắn gọn giúp lập trình viên viết nhanh hơn, rõ ràng hơn từ đó giúp giảm code, tăng tốc độ compile, load page.

Shorthand cũng như việc thay vì mình lên Google search Facebook của bạn gái mới quen thì hãy hỏi bạn của cô gái ấy hoặc chính cô ấy. Không cần phải mất thời gian lòng vòng mà kết quả lại chính xác hơn, kết quả ở đây dựa vào độ đẹp trai của bạn… Có lẽ không liên quan lắm, mà thôi kệ!

The Ternary Operator (Toán tử điều kiện)

Đây là một cách tiết kiệm code rất hay khi bạn muốn viết câu lệnh if..else chỉ trong một dòng. Có thể gọi là toán tử bậc ba, vì nó gồm ba phần:

  1. Điều kiện
  2. Điều kiện xảy ra nếu đúng (if)
  3. Điều kiện xảy ra nếu sai (else)

Longhand

const age = 20;
let message;

if (age >= 18) {
    message = "Welcome to the world!";
} else {
    message =  "Close your browser's tab, boy!";
}

Shorthand

const message = age > 18 ? "Welcome to the world!" : "Close your browser's tab, boy!";

Kiểm tra empty, underfined, null (falsy)

Longhand

let someVariable = '';
if (anyVariable !== null || anyVariable !== undefined || anyVariable !== '') {
  someVariable = anyVariable;
}

Shorthand

const someVariable = anyVariable  || '';

Kiểm tra giá trị đúng (truthy)

Trong trường hợp bạn muốn kiểm tra giá trị của một biến có phải là true hay không?

Longhand

if (isHandsome === true) {
  // Do something
}

Shorthand

if (isHandsome) {
  // Do something
}

Tương tự bạn cũng có thể kiểm tra những giá trị truthy hoặc falthy. Theo định nghĩa:

In JavaScript, a truthy value is a value that is considered true when encountered in a Boolean context. All values are truthy unless they are defined as falsy (i.e., except for false, 0, -0, 0n, "", null, undefined, and NaN).

Nói nôm na trong JavaScript những giá trị falsy0, -0, 0n, "", null, undefinedNaN còn lại là truthy.

Kiểm tra truthy

if (anyVairalbe) {
  // Do something
}

Kiểm tra falsy

if (!anyVariable) {
  // Do something
}

Bạn có thể tìm hiểu thêm tại đây

Bonus

Bạn có thể áp dụng điều kiện if bằng cách dùng một dòng duy nhất

Longhand

if (anyVariable) {
    doSomething();
}

Shorthand

if (isHandsome) doSomething();

// Or
(isHandsome) && doSomething();

For Loop Shorthand

Longhand

const fruits = ['mango', 'peach', 'banana'];
for (let i = 0; i < fruits.length; i++)

Shorthand

for (let fruit of fruits)

# More example for object
const obj = {continent: 'Africa', country: 'Kenya', city: 'Nairobi'}
for (let key in obj):
  console.log(key); // Get key
  console.log(obj[key]); // Get key value

Function calling

Chúng ta có thể sử dụng các toán tử bậc ba như trên để gọi các hàm trực tiếp dựa trên biểu thức điều kiện.

Longhand

const isTrue = true;
if (isTrue) {
  functionA();
} else {
  functionB();
}

Shorthand

(isTrue ? functionA : functionB)();

Spread Operator

Trong JavaScript, chúng ta có thể sử dụng toán tử spread trong nhiều trường hợp để làm cho code hiệu quả và rõ ràng hơn.

Concat

Longhand

const fruits = ['mango', 'peach', 'banana'];
let newFruits = ['orange'].concat(fruits)

Shorthand

const fruits = ['mango', 'peach', 'banana'];
let newFruits = ['orange', ...fruits]

Slice

Longhand

const fruits = ['mango', 'peach', 'banana'];
const newFruits = fruits.slice()

Shorthand

const fruits = ['mango', 'peach', 'banana'];
const newFruits = [...fruits];

Arrow Functions

Longhand

fruits.forEach(function(item) {
    console.log(item);
});

Shorthand

fruits.forEach(item => console.log(item));

Object Property

ES6 cung cấp một cách dễ dàng hơn để gán property cho các object. Nếu tên biến giống với key, bạn có thể tận dụng ở đây.

Longhand

const name = 'Huy Chau', age = 18;
const obj = { name: name, age: age };

Shorthand

const obj = { name, age };

Array.find

Bạn có thể dùng hàm find() trong ES6 để tìm kiếm theo điều kiện thay vì dùng vòng lặp for.

const students = [
  { id:1, name: 'Max'},
  { id: 2, name: 'John'},
  { id:3, name: 'Tommy'},
]

# Assuming that name is unique
function findStudentByName(name) {
  for(let i = 0; i <students.length; ++i) {
    if (students[i].name === name) {
      return students[i];
    }
  }
}
const students = [
  { id:1, name: 'Max'},
  { id: 2, name: 'John'},
  { id:3, name: 'Tommy'},
]

# Assuming that name is unique
function findStudentByName(name) {
  return students.find(student => student.name === name;
}

Kết luận

Trên đây là một trong những Shorthand mình thường sử dụng nhất, ngoài những hiệu quả đem lại như mình nói ở trên thì shorthand còn giúp bạn viết test coverage tốt hơn. Hãy thử và cho mình ý kiến của bạn. Các bạn có thể đóng góp để mình cập nhật thêm những shorthand hữu ích.

Happy coding!

Bình luận bằng Facebook