Một số JavaScript Shorthand giúp code ngắn gọn, clear hơn

Kỹ thuật shorthand giúp code của chúng ta rõ ràng, tối ưu, giúp các bạn viết đoạn code theo ý mình với sự ngắn gọn khi triển khai các dòng code. Cùng mình tìm hiểu về những kỹ thuật thông qua ví dụ dưới đây nhé 😄.

Nullish coalescing operator ??

Đây là một toán tử logic gồm 2 phần - giá trị bên trái ?? và giá trị bên phải ??.

Toán tử này khi áp dụng sẽ trả về giá trị bên phải khi giá trị bên trái nó là undefined hoặc null.

Cùng xem một ví dụ sau nhé:

Mình sẽ viết theo cách thông thường trước tiên:

// longhand
let value;
let age;

if (value) {
    age = value;
} else {
    age = 24;
}

Khi tạo 2 biến value và age ban đầu sẽ có giá trị undefined. Như vậy trong trường hợp này ta có thể sử dụng toán tử ?? 🔥.

Sau đây là shorthand sử dụng ??:

let value;
const age = value ?? 24;
console.log(age); // 24

Ta thấy bên trái ?? là value có giá trị undefined nên toán tử ?? sẽ trả về giá trị bên phải lúc này là 24.

Giả sử ta cho value có giá trị là 15 ta được như sau:

let value = 15;
const age = value ?? 24;
console.log(age); // 15

Conditional (ternary) operator

Đây có lẽ là kỹ thuật chúng ta thường sử dụng nhất với cú pháp ngắn gọn có thể thay cho if else. Mình sẽ tận dụng lại ví dụ trên và sử dụng toán tử này nhé 🎉.

let value;
const age = value ? value : 24;
console.log(age);

Nếu sử dụng toán tử này đúng lúc, đúng chỗ thì quả là rất nhanh, gọn và dễ đọc đúng không nào 😃.

Optional chaining (?.)

Toán tử này mình thường sử dụng khi ta muốn kiểm tra xem các thuộc tính chỉ định có tồn tại bên trong 1 object không, sau đó ta sẽ lấy giá trị trả về và sử dụng.

// Optional chaining (?.)
const user = {
    name: 'john',
    age: 18,
    class: {
        name: 'CN18X',
    },
};
// longhand
console.log(user.class && user.class.name);
// longhand
if (user.class) {
    console.log(user.class.name);
}

//shorthand
console.log(user.class?.name); // return CN18X

Nếu thuộc tính không tồn tại toán tử ?. sẽ return undefined.

Ví dụ:

const country = {
    name: 'VietNam',
    capital: 'HaNoi',
};

console.log(country?.capital); // return HaNoi
console.log(country?.president); // return undefined

Declaring Variable

Một cách viết ngắn gọn cho bạn nào lười sử dụng let, const, var cho từng biến nhiều lần 😅.

Thay vì viết:

let name;
let age = 24;
let country;

Ta có thể viết gọn lại như sau:

let name,
    age = 24,
    country;

String to Number Conversion

Đây là một cách để chuyển một string chứa số về một số cho trước. Thông thường chúng ta sẽ sử dụng parseFloat để chuyển về số thực và parseInt chuyển về số nguyên, thay vì thế ta sẽ sử dụng một cách ngắn gọn hơn bằng cách sử dụng toán tử + trước string.

// longhand
let intNum = parseInt('20');
let floatNum = parseFloat('20.5');
console.log(typeof intNum, typeof floatNum); //number

// shorthand
let intNum = +'20',
    floatNum = +'29.9';
console.log(typeof floatNum, typeof intNum); //number

Template Literals

Đây là cách mình thường xuyên sử dụng, thông thường ta sẽ sử dụng toán tử + để liên kết các chuỗi, các biến lại với nhau. Nhưng khi sử dụng Template Literals ta đơn giản hóa việc sử dụng biểu thức kết hợp với chuỗi.

Các đoạn text sẽ nằm trong dấu backticks (``) bên trong cặp dấu (``), nếu bạn muốn sử dụng biểu thức nào đó chỉ việc thêm ${biểu thức}

Ví dụ:

let name = 'smith';
let country = 'United States';

// longhand
console.log("hi, i'm " + name + ' and i come from ' + country);
// shorthand
console.log(`hi, i'm ${name} and i come from ${country}`);

Exponentiation (**)

Để tìm lũy thừa của một số theo cách ngắn hơn, thay vì sử dụng Math.pow(), ta chỉ cần sử dụng toán tử (**).

Ví dụ :

// longhand
console.log(Math.pow(5, 2)); //return 25
// shorthand
console.log(5 ** 2); //return 25

Max and min number in array

Để tìm max và min của number trong một mảng có nhiều cách, nhưng đây là cách mình thấy ngắn gọn và dễ triển khai ^^:

const arr = [2, 5, 6, 0.9];
console.log(Math.max(...arr)); // return 6
console.log(Math.min(...arr)); // return 0.9

Cách này sử dụng hàm Math.max(values) để tìm max của number. các giá trị được lấy bằng cách sử dụng spread operator

🔥🌈 Trên đây là một số kỹ thuật shorthand giúp cho code của chúng ta gọn, đẹp hơn. Mình sẽ tìm hiểu thêm các kỹ thuật hay và update trong bài viết này. Hy vọng bài viết này sẽ hữu ích cho các bạn.

Chúc các bạn học tốt 😁.