Các kỹ thuật viết tắt của bất kỳ ngôn ngữ lập trình nào giúp bạn viết mã rõ ràng và tối ưu hơn, đồng thời cho phép bạn đạt được mục tiêu của mình với ít mã hóa hơn. Hãy thảo luận từng kỹ thuật viết tắt của JavaScript.

1. Khai báo biến

//Longhand 
let x; 
let y = 20; 

//Shorthand 
let x, y = 20;

2. Gán giá trị cho nhiều biến

Chúng ta có thể gán giá trị cho nhiều biến trong một dòng bằng cách cấu trúc mảng.

//Longhand 
let a, b, c; 
a = 5; 
b = 8; 
c = 12;
 
//Shorthand 
let [a, b, c] = [5, 8, 12];

3. Toán tử bậc ba

Chúng ta có thể lưu 5 dòng code ở đây với toán tử bậc ba (có điều kiện).

//Longhand 
let marks = 26; 
let result; 
if (marks >= 30){
 result = 'Pass'; 
} else { 
 result = 'Fail'; 
} 

//Shorthand 
let result = marks >= 30 ? 'Pass' : 'Fail';

4. Gán giá trị mặc định

Chúng ta có thể sử dụng toán tử OR(||) để gán giá trị mặc định cho một biến trong trường hợp giá trị mong đợi được tìm thấy là sai.

//Longhand 
let imagePath; 
let path = getImagePath(); 
if(path !== null && path !== undefined && path !== '') { 
  imagePath = path; 
} else { 
  imagePath = 'default.jpg'; 
} 

//Shorthand 
let imagePath = getImagePath() || 'default.jpg';

5. Toán tử AND(&&)

Nếu bạn chỉ gọi một hàm nếu một biến là true, thì bạn có thể sử dụng AND(&&) để thay thế cho điều này.

//Longhand 
if (isLoggedin) {
 goToHomepage(); 
} 

//Shorthand 
isLoggedin && goToHomepage();

6. Hoán đổi hai biến

Để hoán đổi hai biến, chúng ta thường sử dụng một biến thứ ba. Chúng ta có thể hoán đổi hai biến một cách dễ dàng với phép gán cấu trúc mảng.

let x = 'Hello', y = 55; 
//Longhand 
const temp = x; 
x = y; 
y = temp; 

//Shorthand 
[x, y] = [y, x];

7. Arrow Function

//Longhand 
function add(num1, num2) { 
   return num1 + num2; 
} 

//Shorthand 
const add = (num1, num2) => num1 + num2;

Reference: JavaScript Arrow function

8. Ký tự mẫu mẫu

Chúng ta thường sử dụng toán tử + để nối các giá trị chuỗi với các biến. Với các ký tự mẫu của ES6, chúng ta có thể làm điều đó theo cách đơn giản hơn.

//Longhand 
console.log('You got a missed call from ' + number + ' at ' + time); 

//Shorthand 
console.log(`You got a missed call from ${number} at ${time}`);

9. Chuỗi nhiều dòng

Đối với chuỗi nhiều dòng, chúng ta thường sử dụng toán tử + với chuỗi thoát dòng mới (\n). Chúng ta có thể làm điều đó theo cách dễ dàng hơn bằng cách sử dụng dấu gạch ngược (`)

//Longhand 
console.log('JavaScript, often abbreviated as JS, is a\n'
+ 'programming language that conforms to the \n' + 
'ECMAScript specification. JavaScript is high-level,\n' + 
'often just-in-time compiled, and multi-paradigm.' ); 

//Shorthand 
console.log(`JavaScript, often abbreviated as JS, is a programming 
language that conforms to the ECMAScript specification. JavaScript is 
high-level, often just-in-time compiled, and multi-paradigm.`);

10. Kiểm tra nhiều điều kiện

Để đối sánh nhiều giá trị, chúng ta có thể đặt tất cả các giá trị trong mảng và sử dụng phương thức indexOf() hoặc include().

//Longhand 
if (value === 1 || value === 'one' || value === 2 || value === 'two') { 
     // Execute some code 
} 

// Shorthand 1
if ([1, 'one', 2, 'two'].indexOf(value) >= 0) { 
    // Execute some code 
}
// Shorthand 2
if ([1, 'one', 2, 'two'].includes(value)) { 
    // Execute some code 
}

11. Gán thuộc tính object

Nếu tên biến và tên khóa đối tượng giống nhau thì chúng ta có thể đề cập đến tên biến trong các ký tự đối tượng thay vì cả khóa và giá trị. JavaScript sẽ tự động đặt khóa giống như tên biến và gán giá trị dưới dạng giá trị biến.

let firstname = 'Amitav'; 
let lastname = 'Mishra'; 
//Longhand 
let obj = {firstname: firstname, lastname: lastname}; 

//Shorthand 
let obj = {firstname, lastname};

12. Chuyển chuỗi thành một số

Có sẵn các phương thức như parseInt và parseFloat để chuyển đổi một chuỗi thành số. Chúng ta cũng có thể làm điều này bằng cách chỉ cần cung cấp một toán tử một ngôi (+) trước giá trị chuỗi.

//Longhand 
let total = parseInt('453'); 
let average = parseFloat('42.6'); 

//Shorthand 
let total = +'453'; 
let average = +'42.6';

13. Lặp lại một chuỗi nhiều lần

Để lặp lại một chuỗi trong một số thời gian nhất định, bạn có thể sử dụng vòng lặp for. Nhưng bằng cách sử dụng phương thức repeat(), chúng ta có thể thực hiện nó trong một dòng duy nhất.

//Longhand 
let str = ''; 
for(let i = 0; i < 5; i ++) { 
  str += 'Hello '; 
} 
console.log(str); // Hello Hello Hello Hello Hello 

// Shorthand 
'Hello '.repeat(5);

Ví dụ: Bạn muốn xin lỗi ai đó bằng cách gửi 100 lần "sorry"? Hãy thử nó với phương thức repeat(). Nếu bạn muốn lặp lại từng chuỗi trong một dòng mới, hãy thêm \n vào chuỗi.

'sorry\n'.repeat(100);

14. Lũy thừa

Chúng ta có thể sử dụng phương thức Math.pow() để tìm lũy thừa của một số. Có một cú pháp ngắn hơn để thực hiện điều đó với là (**).

//Longhand 
const power = Math.pow(4, 3); // 64 

// Shorthand 
const power = 4**3; // 64

15. Toán tử kép (~~)

Toán tử kép (~~) là một thay thế cho phương thức Math.floor() dùng để làm tròn dưới.

//Longhand 
const floor = Math.floor(6.8); // 6 

// Shorthand 
const floor = ~~6.8; // 6

Chú ý: Toán tử kép ( ~~ ) chỉ hoạt động với số nguyên 32 bit, tức là (2^31) -1 = 2147483647. Vì vậy, đối với bất kỳ số nào cao hơn 2147483647, toán tử ( ~~ ) sẽ cho kết quả sai, vì vậy nên sử dụng Math.floo() trong trường hợp đó.

16. Tìm số lớn nhất và số nhỏ nhất trong mảng

Chúng ta có thể sử dụng vòng lặp for để lặp qua từng giá trị của mảng và tìm giá trị max hoặc min. Chúng ta cũng có thể sử dụng phương thức Array.reduce() để tìm số max và min trong mảng.

Nhưng sử dụng toán tử spread, chúng ta có thể thực hiện nó trong một dòng duy nhất.

// Shorthand 
const arr = [2, 8, 15, 4]; 
Math.max(...arr); // 15 
Math.min(...arr); // 2

17. Vòng lặp for

Để lặp qua một mảng, chúng ta thường sử dụng vòng lặp for truyền thống.

Chúng ta có thể sử dụng vòng lặp for...of để lặp qua các mảng. Để truy cập index của mỗi giá trị, chúng ta có thể sử dụng vòng lặp for...in.

let arr = [10, 20, 30, 40]; 
//Longhand 
for (let i = 0; i < arr.length; i++) { 
  console.log(arr[i]); 
} 

//Shorthand 
//for of loop 
for (const val of arr) { 
  console.log(val); 
} 
//for in loop 
for (const index in arr) { 
  console.log(arr[index]); 
}

Chúng ta cũng có thể lặp qua các thuộc tính đối tượng bằng cách sử dụng vòng lặp for...in.

let obj = {x: 20, y: 50}; 
for (const key in obj) { 
  console.log(obj[key]); 
}

Reference: Different ways to iterate through objects and arrays in JavaScript

18. Merging các mảng

let arr1 = [20, 30]; 
//Longhand 
let arr2 = arr1.concat([60, 80]); 
// [20, 30, 60, 80] 

//Shorthand 
let arr2 = [...arr1, 60, 80]; 
// [20, 30, 60, 80]

19. Clone đối tượng nhiều cấp

Để clone một đối tượng nhiều cấp, chúng ta có thể lặp qua từng thuộc tính và kiểm tra xem thuộc tính hiện tại có chứa một đối tượng hay không. Nếu có, sau đó thực hiện một cuộc gọi đệ quy đến cùng một hàm bằng cách chuyển giá trị thuộc tính hiện tại (tức là đối tượng lồng nhau).

Chúng ta cũng có thể làm điều đó bằng cách sử dụng JSON.stringify() và JSON.parse() nếu đối tượng của chúng ta không chứa các function, undefined, NaN hoặc Date dưới dạng giá trị.

Nếu chúng ta có đối tượng mức đơn, tức là không có đối tượng lồng nhau nào, thì chúng ta cũng có thể clone bằng cách sử dụng toán tử spread.

let obj = {x: 20, y: {z: 30}}; 

//Longhand 
const makeDeepClone = (obj) => { 
  let newObject = {}; 
  Object.keys(obj).map(key => { 
    if(typeof obj[key] === 'object'){ 
      newObject[key] = makeDeepClone(obj[key]); 
    } else { 
      newObject[key] = obj[key]; 
    } 
  }); 
 return newObject; 
} 
const cloneObj = makeDeepClone(obj); 

//Shorthand 
const cloneObj = JSON.parse(JSON.stringify(obj));

//Shorthand for single level object
let obj = {x: 20, y: 'hello'};
const cloneObj = {...obj};

Chú ý: Kỹ thuật viết tắt JSON.parse(JSON.stringify (obj)) không hoạt động nếu thuộc tính đối tượng của bạn chứa function, undefined or NaN dưới dạng giá trị. Bởi vì khi bạn JSON.stringify đối tượng, thuộc tính chứa function, undefined or NaN dưới dạng giá trị sẽ bị xóa khỏi đối tượng.

Vì vậy, hãy sử dụng JSON.parse(JSON.stringify (obj)) khi đối tượng của bạn chỉ chứa chuỗi và số.

Reference: JSON.parse() and JSON.stringify()

20. Lấy ký tự từ chuỗi

let str = 'jscurious.com'; 
//Longhand 
str.charAt(2); // c 

//Shorthand 
str[2]; // c

Bài viết được dịch từ: https://medium.com/javascript-in-plain-english/20-javascript-shorthand-techniques-that-will-save-your-time-f1671aab405f