Anonystick

anonystick@gmail.com

10 kỹ thuật shorthand sử dụng nhiều nhất javascript

Việc sử dụng shorthand coding đương nhiên là được trú trọng nhiều trong mỗi lập trình viên, vì nó giúp chúng ta tiết kiệm được nhiều thời gian gõ code, tất nhiên là việc debug cũng dễ dàng hơn. Bài viết này sẽ giới thiệu 10 kỹ thuật viết code nhanh và gọn được sử dụng nhiều đối với tôi.

1. Multiple condition checking

Việc kiểm tra nhiều điều kiện khác nhau thông thường chúng ta mất nhiều code hơn, sau này có indexOf() nhưng ES6 đã giới thiệu một phương pháp khác đó là includes

//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 
}

Chú ý: Tất nhiên là hiện đại nhưng kèm theo đó là hại điện trong phương pháp sử dụng includes đó là việc phải khởi tạo một array mới, liệu có tốt hay không???

2. Object Property Assignment

Nếu như chúng ta đặt tên biến và key Object giống nhau thì thay vì:

let firstname = 'Amitav';
let lastname = 'Mishra';

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

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

Cách này rất hay, và thật sự bạn cảm thấy hay nhất khi viết RestFul APi.

3. Repeat a string for multiple times

Lúc trước khi Repeat thì chúng ta ai cũng nghĩ đến việc sử dụng for(), nhưng việc sử dụng Repeat() ngắn và gọn hơn rất nhiều.

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

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

4. Merging of arrays

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]

5. Get character from string

let str = 'jscurious.com';

//Longhand
str.charAt(2); // c

//Shorthand
str[2]; // c

6. Remove properties from object

Nếu như lúc xưa chúng ta sử dụng delete để remove Object. Điều đó không sai, và để tiếp tục sử dụng code một cách ngắn gọn thì tôi khuyên bạn sử dụng Rest parameter với destructuring assignment.

let obj = {x: 45, y: 72, z: 68, p: 98};

// Longhand
delete obj.x;
delete obj.p;
console.log(obj); // {y: 72, z: 68}

// Shorthand
let {x, p, ...newObj} = obj;
console.log(newObj); // {y: 72, z: 68}

7. AND(&&) Short circuit evaluation

Nếu bạn chỉ cần check một điều kiện true hay false để gọi tiếp một function thì có thể sử dụng AND(&&) là đủ.

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

//Shorthand
isLoggedin && goToHomepage();

Cũng như ai học React rồi thì cú pháp này cũng quen thuộc

{ this.state.isLoading && }

8. Assigning values to multiple variables

Chúng ta có thể gán giá trị cho nhiều biến trong một dòng bằng cách sử dụng array destructuring

//Longhand
let a, b, c;

a = 5;
b = 8;
c = 12;

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

9. Multi-line String

Thay vì mỗi lần xuống dòng thì phải thêm dấu +. Thì bây giờ đương nhiên là dễ dàng với việc sử dụng `

 //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. For loop

Kỹ thuật thứ 10 này là nói về for loop. Thay vì sử dụng for truyền thống thì thay bằng việc sử dụng for...of hay for...in cũng có kết quả tương tự nhưng code lại ngắn gọn hơn nhiều so với cách truyền thống.

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]);
}

Reference: Sự khác biệt khi sử dụng for...of đó là viên ngọc quý.

Tóm lại

Việc sử dụng cách viết code ngắn gọn có rất nhiều ưu điểm chính vì thế đây là một kỹ thuật được khuyến khích được áp dụng trong mỗi lập trình viên hiện nay. Đó cũng là một điểm cộng khi nhìn vào mã code của mỗi người. Nhìn vào mà sáng sủa dễ đọc là sướng rồi. Chứ nhìn vào mà rối thì thôi rồi lượm ơi.