11 mẹo JavaScript bạn sẽ không tìm thấy trong hầu hết các tutorial

Từ khi bắt đầu học JavaScript, mình đã lập 1 danh sách các mẹo giúp tiết kiệm thời gian mà mình tìm thấy trong code của người khác, trên các website code challenge, và bất kỳ chỗ nào khác ngoài các hướng dẫn mà mình đang dùng.

Mình đã build danh sách này từ đó, và trong bài viết này, mình sẽ chia sẻ 11 mẹo mình tự tay chọn mà mình nghĩ nó đặc biệt hữu ích. Bài viết sẽ có ích cho những bạn mới bắt đầu vào nghề, nhưng mình cũng hi vọng ngay cả những bạn lập trình viên đã có kinh nghiệm 1 thời gian cũng sẽ tìm thấy gì đó mới mẻ trong danh sách này.

Trong danh sách sẽ chia ra nhiều loại: một số mẹo dễ vận dụng trong mọi trường hợp, 1 số có thể chỉ phù hợp cho các cho code challenge / code ngắn hạn hơn là code cho production, nơi cần sự rõ ràng hơn là sức tích ngắn gọn – chính bạn sẽ là người phân loại cho nó!

Không theo trình tự đặc biệt nào, sau đây là 11 cách gọn gàng để viết code ngắn gọn và hiệu quả hơn.

1. Filter Unique Values
ARRAYS

Set type object đã được ra mắt trong ES6, cùng với , ‘spread’ operator, chúng ta có thể dùng nó để tạo 1 array mới chỉ gồm các giá trị đặc biệt (unique values).

Trước khi có ES6, các unique values độc lập sẽ đòi hỏi rất nhiều code hơn thế!

Mẹo này ứng dụng được cho các array chứa primitive types: undefined, null, boolean, stringnumber. (Nếu bạn có 1 array chứa object, function hay array bổ sung, bạn sẽ cần cách tiếp cận khác.)

2. Short-Circuit Evaluation
CONDITIONALS

Ternary operator là 1 cách nhanh gọn để viết các statement điều kiện đơn giản (và có thể đôi khi không đơn giản lắm), ví dụ như là:

Nhưng đôi khi ngay cả ternary operator cũng phức tạp hơn mức cần thiết. Thay vào đó, chúng ta có thể dùng logical operators ‘and’ && và ‘or’ || để đánh giá các expression nhất định 1 cách còn ngắn gọn hơn. Cách này thường được gọi là ‘đoản mạch – short-circuiting’ hay ‘đánh giá đoản mạch – short-circuit evaluation’.

Cách làm việc của nó
Giả sử ta muốn return chỉ 1 trong 2 hay nhiều option.

Sử dụng && sẽ return false hoặc giá trị “falsy” đầu tiên. Nếu mỗi operand đánh giá tới true, expression đã đánh giá cuối cùng sẽ được return.

Dùng || sẽ return true hoặc giá trị “truthy” đầu tiên. Nếu mỗi operand đánh giá tới false, evaluated expression cuối cùng sẽ được return.

Ví dụ 1:
Giả dụ chúng ta muốn return length của 1 variable, nhưng ta lại không biết variable type.

Chúng ta có thể dùng statement if/else để kiểm tra xem type của foo có được chấp nhận không, nhưng việc này có thể hơi dài dòng. Thay vào đó short circuit evaluation cho phép chúng ta có thể làm như thế này:

Nếu variable của foo là truthy, nó sẽ được return. Nếu không thì, length của array trống sẽ được return: 0 .

Ví dụ 2:
Đã bao giờ bạn gặp vấn đề truy cập 1 nested object property? Bạn sẽ không biết rằng liệu object hay 1 trong các sub-property có tồn tại, và điều này có thể gây ra các lỗi khó chịu.

Giả dụ chúng ta muốn truy cập vào 1 property có tên data bên trong this.state, nhưng data lại không được xác định cho tới khi chương trình của ta return thành công 1 fetch request.

Tuỳ vào nơi chúng ta sử dụng nó, call this.state.data có thể ngăn app của ta chạy. Để giải quyết vấn đề này, chúng ta có thể túm nó vào 1 lệnh điều kiện:

Nhưng điều đó cũng có vẻ hơi lặp đi lặp lại. ‘or’ operator có thể giải quyết nó nhanh gọn hơn:

Chúng ta không thể refactor phần code ở trên để bằng &&. Statement ‘Fetching Data' && this.state.data sẽ return this.state.data cho dù nó được undefined hay không. Điều này xảy ra bởi vì ‘Fetching Data' là ‘truthy’, cho nên && sẽ luôn luôn vượt qua nó khi nó được list đầu tiên.

1 tính năng mới được đề xuất: Chuỗi tùy chọn – Optional Chaining
Hiện tại đang có 1 đề nghị để cho phép ‘optional chaining’ khi thử return 1 property bên trong 1 structure ‘tree-like’. Theo đề xuất, biểu tượng dấu chấm hỏi ? có thể được sử dụng để xuất 1 property chỉ khi nó không phải null .

Ví dụ: chúng ta có thể refactor ví dụ ở trên tới this.state.data?.() ,do đó chỉ trả về data khi nó không phải là null.

Hoặc, nếu chúng ta chỉ quan tâm đến việc state có được xác định hay không, chúng ta có thể return this.state?.data.

Lệnh yêu cầu đang ở Giai đoạn 1, như là 1 feature thử nghiệm. Bạn có thể đọc về nó ở đây, và ban có thể dùng ngay trong JavaScript của bạn nhờ vào Babel, bằng cách thêm @babel/plugin-proposal-optional-chaining tới file .babelrc của bạn.

3. Chuyển đổi thành Boolean
TYPE CONVERSION

Bên cạnh các giá trị boolean thông thường truefalse trong, JavaScript cũng xử lý tất cả các value khác như là ‘truthy’ hay ‘falsy’.

Trừ khi chúng đã được xác định, tất cả các value trong JavaScript là ‘truthy’ với các ngoại lệ của 0, “”, null, undefined, NaN và dĩ nhiên false, vốn là “falsy”.

Chúng ta có thể chuyển đổi dễ dàng giữa true và false bằng cách dùng operator phủ định ! , vốn cũng sẽ chuyển đổi type thành “boolean" .

Loại chuyển đổi type này có thể khá tiện dụng trong xử lý các conditional statement, cho dù lý do duy nhất bạn sẽ chọn để xác định !1false nếu chỉ khi bạn đang “chơi” code!

4. Chuyển đổi thành String
TYPE CONVERSION

Để chuyển đổi nhanh chóng 1 số thành 1 chuỗi string, chúng ta có thể dùng concatenation operator + theo sau bởi 1 set trống của dấu ngoặc kép “” .


5. Chuyển đổi thành Số
TYPE CONVERSION

Phần đối diện có thể được nhanh chóng lấy được bằng addition operator + .

Cái này cũng có thể được dùng để chuyển các boolean thành số, như bên dưới đây:

Trường hợp + sẽ vận hành như 1 concatenation operator hơn là addition operator có thể sẽ xảy ra. Khi đó (và bạn muốn return 1 số nguyên, không phải 1 số thực) bạn có thể sử dụng 2 dấu ngã: ~~ thay vào đó.

1 dấu ngã, được biết như là ‘bitwise NOT operator’, là 1 operator tương đương với   -n - 1. Cho nên, ví dụ là ~15 sẽ bằng với -16 .

Sử dụng 2 dấu ngã liên tiếp làm điều hoà hoạt động 1 cách hiệu quả, bởi vì - ( - n - 1) - 1 = n +1 - 1 = n . Nói cách khác, ~-16 bằng 15 .

Cho dù mình không nghĩ trong hầu hết trường hợp sử dụng, bitwise này cũng có thể dùng trên các boolean: ~true = -2~false = -1 .

6. Quick Powers
OPERATIONS

Từ ES7, nó đã có thể sử dụng operator lũy thừa ** như là shorthand cho power, vốn nhanh hơn việc viết Math.pow(2, 3). Đây là 1 công cụ đơn giản, nhưng nó vẫn lọt vào danh sách vì không có nhiều tutorial mới cập nhật được bao gồm operator này!

Cái này không nên bị nhầm lẫn với dấu  ^ , vốn được sử dụng phổ biến để đại diện số mũ, nhưng trong JavaScript lại là ‘bitwise XOR operator’.

Trước khi có ES7, shorthand chỉ tồn tại cho các power với base 2, sử dụng bitwise left shift operator << :

Ví dụ, 2 <<3 = 16 cũng tương đương với 2 **4 = 16.

7. Quick Float to Integer – Chuyển nhanh số thực thành số nguyên
OPERATIONS/ TYPE CONVERSION

Nếu bạn muốn chuyển đổi 1 số thực thành 1 số nguyên, bạn có thể dùng Math.floor() , Math.ceil() hay Math.round() . Nhưng cũng có 1 cách nhanh hơn để chuyển 1 số thực thành 1 số nguyên bằng | , nó chính là ‘bitwise OR operator’.

Hành vi của | khá đa dạng dựa trên việc bạn đang work với số dương hay số âm, nên chỉ sử dụng shortcut này khi bạn đã chắc chắn.

Nếu n là dương, n | 0 làm tròn xuống 1 cách hiệu quả. Nếu n là âm, nó sẽ làm tròn lên hiệu quả. Để tăng độ chính xác cho nó, operation này gỡ bỏ bất cứ gì đến sau dấu thập phân, cắt số thực thành 1 nguyên.

Bạn có thể lấy hiệu ứng làm tròn bằng cách dùng ~~ , như ở trên, và thực tế là bất kỳ bitwise operator nào cũng sẽ buộc 1 số thực thành 1 số nguyên. Lý do những operation đặc biệt này hoạt động là vì – 1 khi bị buộc thành 1 số nguyên – value đó được giữ nguyên.

Xóa các chữ số cuối – Remove Final Digits
‘Bitwise OR operator’ cũng có thể được dùng để xóa số cuối của một số nguyên. Điều này có nghĩa là chúng ta không cần phải dùng code như thế này để chuyển đổi giữa các type:

Thay vào đó, bitwise OR operator cho phép chúng ta viết:


8. Automatic Binding in Classes

CLASSES

Chúng ta có thể dùng ký hiệu mũi tên ES6 trong phương pháp class, như thế sẽ dùng được binding. Nó thường sẽ lưu 1 vài dòng code trong class constructor, và chúng ta có thể nói lời chào thân ái các expression lặp đi lặp lại như là .myMethod = this.myMethod.bind(this)!


9. Truncate 1 Array

ARRAYS

Nếu bạn muốn loại bỏ các value từ cuối 1 array 1 cách triệt để, có rất nhiều lựa chọn thay thế nhanh hơn là dùng slice() .

Thí dụ, nếu bạn biết kích thước của array ban đầu, bạn có thể define lại độ dài property của nó, như là:

Đây là 1 giải pháp súc tích đặc biệt. Tuy nhiên, tôi phát hiện rằng run-time của phương pháp slice() còn nhanh hơn nữa. Nếu tốc độ là mục tiêu chính của bạn, hãy xem xét dùng những thứ này xem sao:


10. Lấy 1 (hoặc nhiều) Item trong 1 Array

ARRAY

Phương pháp array slice() có thể lấy các số nguyên âm, và nếu được cung cấp nó sẽ lấy các value từ cuối array thay vì là từ đầu.


11. Format code JSON

JSON

Cuối cùng, có thể bạn đã dùng JSON.stringify trước đây, nhưng bạn có nhận ra rằng nó cũng có thể giúp thụt lề – indent JSON cho bạn không?

Phương pháp stringify() lấy 2 parameter tuỳ chọn: 1 function replacer, vốn bạn có thể dùng để filter JSON được hiển thị, và 1 giá trị space.

Giá trị space này lấy 1 số nguyên đại diện cho số khoảng trắng – spaces bạn muốn hay 1 string (như là ‘\t' để chèn các tab), và giúp việc đọc data JSON được fetch dễ dàng hơn nhiều.


Lời kết

Hi vọng bạn sẽ thấy những mẹo này cũng hữu ích và tìm được cách áp dụng phù hợp cho project của mình.

Nếu bạn cũng có mẹo nào của riêng mình, cũng đừng quên chia sẻ nó nhé!


Tech Talk via Medium