Một số cách viết JavaScript ngắn gọn hơn

1. Toán tử bậc ba - The Ternary Operator

• Áp dụng trong trường hợp bạn sử dụng if..else, cú pháp này sẽ giúp code bạn ngắn gọn hơn:

const x = 20;
let answer;
if (x > 10) {
   answer = "greater than 10";
} else {
   answer = "less than 10";
}

Thay bằng:

const answer = x > 10 ? "greater than 10": "less than 10"

Hoặc ta có thể lồng ghép nhiều if..else vào cùng một lúc:

const x = 20;
let answer;
if(x > 10) {
	answer = "greater than 10";
} else {
	if(x < 5) {
   	answer = "less than 5";
   } else {
   	answer = "between 5 and 10";
   }
}

Thay bằng:

const answer = x > 10 ? "greater than 10" : x < 5 ? "less than 5" : "between 5 and 10";

2. Khởi tạo nếu chưa có giá trị - Short-circuit Evaluation Shorthand

• Khi gán một giá trị của variable1 vào variable2, chúng ta cần kiểm tra variable1 có null, undefined hoặc empty không. Như sau:

let variable1;
if(variable1 !== null || variable1 !== undefined || variable1 !== "") {
	let variable2 = variable1;
}

Thay bằng:

const variable2 = variable1 || "new";

3. Định nghĩa biến ngắn gọn hơn - Declaring Variables Shorthand

• Bình thường chúng ta hay định nghĩa biến kiểu này:

let x;
let y;
let z = 3;

Thay bằng:

let x, y, z = 3;

4. Kiểm tra có giá trị không - If Presence Shorthand

let emptyString = "";
let notEmptyString = "123";

# Kiểm tra chuỗi rỗng thì thực hiện đoạn code.
if(!emptyString) {
    // Do something
}

# Kiểm tra biến có giá trị thì thực hiện đoạn code.
if(notEmptyString) {
    // Do something
}

Còn kiểm tra boolean True False thì dễ rồi:

let a = true;
if(a) {
    // Do something
}

if(!a) {
    // Do something
}

5. Vòng lặp trong JavaScript - Javscript for Loop Shorthand Thông thường ta hay sử dụng for như sau:

let array = [1,2,3];
for(let i=0; i < array.length; i++) {
    // Do something
}

Thay bằng:

let array = [1,2,3];
for(let index of array) {
 // Do something
}

Hoặc sử dụng Array.forEach():

let array = [1,2,3];
array.forEach(element, index, array => {
    // Do something
});

# Hoặc chỉ cần lấy giá trị và index:
array.forEach(element, index => {
    // Do something
});

# Hoặc chỉ cần lấy giá trị
array.forEach(element => {
    // Do something
});

6. Biểu diễn số thập phân ngắn ngọn hơn - Decimal base exponents

# Thông thường
for(let i = 0; i < 10000; i++) {
	// Do something
}

# Thay bằng:
for(let i = 0; i < 1e5; i++) {
	// Do something
}

1e0 === 1; 1e1 === 10; 1e2 === 100; 1e3 === 1000; 1e4 === 10000; 1e5 === 100000;

7. Gán property cho Object - Object Property Shorthand

# Thông thường
let object = { x: x, y: y };

# Thay bằng
let object = {x, y};

8. Arrow function

# Thông thường
function sayHello(name) {
  console.log('Hello', name);
}

setTimeout(function() {
  console.log('Loaded')
}, 2000);

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

# Thay bằng
sayHello = name => console.log('Hello', name);

setTimeout(() => console.log('Loaded'), 2000);

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

9. Rút gọn return - Implicit Return Shorthand

# Thông thường:
function calcCircumference(diameter) {
  return Math.PI * diameter
}

# Thay bằng:
calcCircumference = diameter => (
  Math.PI * diameter;
)

10. Giá trị mặc định cho tham số - Default Parameter Values

• Bạn có thể sử dụng if để định nghĩa giá trị mặt định cho các biến số.

function volume(l, w, h) {
  if (w === undefined)
    w = 3;
  if (h === undefined)
    h = 4;
  return l * w * h;
}

Thay bằng:

volume = (l, w = 3, h = 4 ) => (l * w * h);

11. Kết hợp string và biến số - Template literals

// Thông thường
let name = "Name";
let age = 24;
let result = "His/ her name is " + Name + ", age is: " + age;

// Thay bằng:
let name = "Name", age = 24,
	result = `His/ her name is: ${name}, age is: ${age}`;

12. Rút gọn khi require - Destructing Assignment Shorthand Trong AngularJS hoặc ReactJS rất hay gặp những trường hợp require thư viện hoặc lấy giá trị từ biến props trong React như sau:

const observable = require('mobx/observable');
const action = require('mobx/action');
const runInAction = require('mobx/runInAction');

const store = this.props.store;
const form = this.props.form;
const loading = this.props.loading;
const errors = this.props.errors;
const entity = this.props.entity;

Thay bằng:

import { observable, action, runInAction } from 'mobx';
const { store, form, loading, errors, entity } = this.props;

13. Rút gọn String có nhiều dòng - Multi-line String Shorthand

// Thông thường
const lorem = 'Lorem ipsum dolor sit amet, consectetur\n\t'
    + 'adipisicing elit, sed do eiusmod tempor incididunt\n\t'
    + 'ut labore et dolore magna aliqua. Ut enim ad minim\n\t'
    + 'veniam, quis nostrud exercitation ullamco laboris\n\t'
    + 'nisi ut aliquip ex ea commodo consequat. Duis aute\n\t'
    + 'irure dolor in reprehenderit in voluptate velit esse.\n\t'
// Thay bằng
const lorem = `Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse.`

14. Spread operator Shorthand

• Spread operator là kxy thuật trong ES6, có rất nhiều trường hợp để sử dụng toán tử này trong JS. Chẳng hạn như:

// joining arrays
const odd = [1, 3, 5];
const nums = [2 ,4 , 6].concat(odd);

// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = arr.slice();

Thay bằng:

// joining arrays
const odd = [1, 3, 5 ];
const nums = [2 ,4 , 6, ...odd];
console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]

// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = [...arr];

Hoặc có thể sử dụng để nối array vào giữa một array khác:

const odd = [1, 3, 5 ];
const nums = [2, ...odd, 4 , 6];

Cũng có thể sử dụng cho object:

const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a) // 1
console.log(b) // 2
console.log(z) // { c: 3, d: 4 }

Trên đây là các cách rút gọn mình hay gặp trong quá trình viết JS, cảm ơn các bạn đã theo dõi. Tài liệu tham khảo: https://www.sitepoint.com/shorthand-javascript-techniques/