Một Số Kỹ Thuật Rút Gọn Code Javascript - Kaopiz Kipalog

1. Sử dụng toán tử 3 ngôi (Ternary Operator)

Câu điều kiện if () ... else ... luôn được sử dụng rất nhiều trong khi code, ko chỉ Javascript mà còn ở tất cả các ngôn ngữ khác. Việc sử dụng toán tử 3 ngôi sẽ giúp chúng ta rút ngắn được rất nhiều code.

const x = 100; let result; if (x < 1000) { result = "nhỏ hơn 1000"; } else { result = "lớn hơn hoặc bằng 1000"; }

Ta có thể rút ngắn đoạn code trên thành:

const x = 100; const result = (x < 1000) ? "nhỏ hơn 1000" : "lớn hơn hoặc bằng 1000";

2. Rút gọn khai báo biến

Thường thì chúng ta có thói quen khai báo mỗi biến ở một dòng

let x; let y; let z = 3;

Cách viết sau sẽ giúp bạn tiết kiệm được thời gian cũng như số dòng khi khai báo biến:

let x, y, z = 3;

3. Rút gọn toán tử so sánh ngang bằng trong if

Khi điều kiện là so sánh ngang bằng bằng, trong trường hợp biến đã được định nghĩa trước và quy ước kiểu là Boolean, ta có thể bỏ qua toán tử so sánh == hoặc ===

let a; if (a === true) { // làm gì đó }

Ta có thể thay bằng:

let a; if (a) { // làm gì đó }

Hoặc trong trường hợp cần so sánh với false

let a; if (!a) { // làm gì đó }

4. Rút gọn vòng lặp for

Thay vì:

for (let i = 0; i < sampleArr.length; i++)

ta có thể rút gọn thành:

for (let item in sampleArr)

5. Sử dụng số thực dấu phẩy động

Để biểu diễn các số lớn lên tới hàng triệu, hàng tỉ (dạo này thấy Việt Nam xây cái gì cũng nghìn tỉ với chục nghìn tỉ, nhiều số 0 quá chả đếm nổi -_-), thay vì viết một đống con số 0, ta có thể viết thành kiểu là số thực phẩy động. Thay vì:

for (let i = 0; i < 100000; i++) {}

ta có thể rút gọn thành:

for (let i = 0; i < 1e5; i++) {}

Giá trị các biểu thức sau đều là true:

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

6. Rút gọn khai báo function

Kiểu khai báo function cũ thì dễ đọc, dễ viết, nhưng nó sẽ trở nên rối khi nằm chung với những lời gọi hàm khác. Thay vì

function sayHello(name) { console.log('Hello', name); } setTimeout(function() { console.log('Loaded') }, 2000); list.forEach(function(item) { console.log(item); });

có thể dùng cú pháp arrow để khai báo function:

sayHello = name => console.log('Hello', name); setTimeout(() => console.log('Loaded'), 2000); list.forEach(item => console.log(item));

7. Rút gọn khi gán chuỗi nhiều dòng cho biến

Để gán giá trị cho một biến là một chuối nhiều dòng, thay vì:

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'

đơn giản ta wrap tất cả text trong cặp backtick ``

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.`

8. Sử dụng Array.find()

Nếu bạn đã từng phải viết hàm tìm kiếm bằng Javascript thuần, hẳn sẽ nghĩ ngay đến việc dùng vòng lặp for lặp qua từng phần tử và kiểm tra điều kiện tìm kiếm. Tuy nhiên trong ES6, function find sẽ giúp cho việc tìm phần tử trong array ngắn gọn hơn. Thay vì

const employees = [ { name: 'Emp A', age: 25 }, { name: 'Emp B', age: 28 }, { name: 'Emp C', age: 35 } ] function findEmp(name) { for(let i = 0; i<employees.length; ++i) { if(employees[i].name === name) { return employees[i]; } } } const name = 'Emp A' emp = findEmp(name)

ta có thể rút gọn thành:

const name = 'Emp A' emp = employees.find(item => item.name === name)

9. Sử dụng Obj['key']

Để get property của object trong Javascript ngoài cách dùng Obj.prop còn có thể viết Obj['prop']. Nhìn qua thì dùng cả 2 cách đều cho kết quả như nhau. Tuy nhiên để viết được những đoạn code có thể tái sử dụng, thì cần sử dụng cách thứ 2: Xem xét ví dụ 1 hàm validate:

function validate(fullName) { if(!fullName.firstName) return false; if(!fullName.lastName) return false; return true; } console.log(validate({firstName:'Hoàng',lastName:'Nguyễn'})); // true

Đoạn code trên hoạt động rất tốt, tuy nhiên nó lại chỉ áp dụng được với duy nhất trường hợp object có đúng 2 property firstName, lastName. Để có thể áp dụng được với những object có property khác, validation rule khác thì ta cần viết tổng quát hơn:

const rule = { firstName: { required:true }, lastName: { required:true } } const validate = (rule, values) => { for(prop in rule) { if(rule[prop].required) { if(!values[prop]) { return false; } } } return true; } console.log(validate(rule, {firstName:'Hoàng'})); // false console.log(validate(rule, {firstName:'Hoàng',lastName:'Nguyễn'})); // true

Giờ thì hàm validate đã tổng quát hơn và có khả năng tái sử dụng nhờ cách gọi property Obj['prop']

10. Sử dụng Spread Operator

Trong ES6 spec có giới thiệu một chức năng mới khá là lợi hại mà không phải ai cũng hay dùng, đó là Spread Operator. Spread Operator cho phép chuyển đổi một chuỗi thành nhiều argument (trong trường hợp gọi với hàm) hoặc thành nhiều phần tử (cho array). Thêm vào nữa nó cũng cho phép làm nhiệm vụ destructure. Operator này có cú pháp là 3 dấu chấm ...

Spread Operator với array

// 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()

Ngắn gọn hơn:

// joining arrays const odd = [1, 3, 5 ]; const nums = [2 ,4 , 6, ...odd]; // cloning arrays const arr = [1, 2, 3, 4]; const arr2 = [...arr];

Không như hàm concat(), dùng spread operator, ta có thể chèn 1 array vào vị trí bất kì nào trong array cần chèn tới:

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

Spread operator trong gọi hàm:

Nếu có 1 hàm như sau:

function sayHello(firstName, lastName, nickName) {}

vả array chứa thông tin sẽ dùng làm tham số truyền vào:

var names = ['Hùng', 'Nguyễn', 'mặt sắt']

để truyền tham số vào hàm thì cần làm như sau:

sayHello(names[0], names[1], names[2])

Hoặc có cách khác hay hơn nếu chúng ta ko biết rõ biến names dài bao nhiêu với Function.prototype.apply

sayHello.apply(null, names)

Với ES6, ta có thể áp dụng spread operator như sau:

sayHello(...names)

Kết luận

Trên đây mình đã tổng hợp một số kỹ thuật khiến code Javascript trở nên ngắn gọn, rõ ràng hơn. Hy vọng bài viết sẽ giúp được phần nào các bạn trong quá trình làm việc với Javascript.

Tham khảo

• Sitepoint
• ES6