trieu.dev.da
Nguyễn Thanh Triều
JavaScript thường được biết đến là một ngôn ngữ lập trình để bắt đầu và rất khó để master nó. Bởi vì nó là một ngôn ngữ lập trình có từ khá lâu và linh động. Nó có khá nhiều những syntax "ảo diệu" và đôi khi là những tính năng không mấy ai biết đến. Tôi (tác giả) đã làm việc với JavaScript trong nhiều năm và hiện tại thì tôi vẫn thi thoảng gặp phải những syntax hoặc trick mà tôi không nghĩ là chúng tồn tại.
Tôi đã cố gắng liệt kê những tính năng ít biết đến của JavaScript. Tuy nhiên một số tính năng này có thể là không phù hợp với strict mode. Chú ý rằng là tôi không khuyến khích các bạn dùng tất cả những tính năng này. Dù chúng có thực sự là tốt thật nhưng bạn cũng có thể bắt gặp ánh nhìn khó hiểu từ teammate của bạn đấy.
Void Operator
Bạn chắc hẳn đã từng thấy hoặc dùng cú pháp: javascript:void(0); để vô hiệu hóa link sử dụng trong việc xử lý với ajax. void operator sẽ thực hiện một câu lệnh hay một biểu thức và trả về undefined.
Vậy tại sao không return undefined luôn ?
Sự thật là trước khi ES5 xuất hiện thì bạn có thể gán một giá trị khác cho original undefined (eg: undefined = "abc"). Vì vậy lúc đó sử dụng void là một cách để chắc chắn rằng bạn luôn trả về giá trị original undefined.
Constructor Brackets are optional
Đúng vậy, dấu ngoặc đơn () phía sau tên class khi chúng ta gọi constructor hoàn toàn là optional (Với điều kiện là contructor của bạn không nhận vào bất kỳ argument nào).
2 cách viết dưới đây đều là đúng và đều trả về cùng một kết quả:
IIFE Brackets can be skipped
Cú pháp IIFE (Immediately Invoked Functional Expression) chúng ta có thể bỏ được dấu ngoặc đơn Điều gì sảy ra nếu tất cả chúng đều còn ngoặc đơn ?
JavaScript parser cần những dấu ngoặc đơn đó để biết được những đoạn code trong đó là một Functional Expression chứ không phải là một Function. Hiểu được điều đó nên chúng ta có thể dùng nhiều cách để bỏ những dấu ngoặc đơn đó mà vẫn là cú pháp IIFE đúng.
void operator thông báo với parser rằng những đoạn code đó là functional expression. Do vậy chúng ta có thể bỏ ngoặc đơn khi khai báo function. Chúng ta cũng có thể dùng bất kỳ unary operators khác như void, +, !, -, etc.
Tuy nhiên bạn có thể sẽ tự hỏi rằng liệu những unary operator này có ảnh hưởng tới kết quả trả về từ IIFE không ?
Câu trả lời là có. Nhưng có một tin tốt đó là nếu bạn quan tâm tới kết quả trả về thì hãy lưu nó vào một biến nào đó
Để hiểu hơn về IIFE bạn có thể tham khảo bài viết
With Statement
Bạn đã bao giờ nghe đến with block statement chưa ? nó là một từ khóa trong Javascript. Nó thêm tất cả các thuộc tính của obect thành một scope chain như sau:
Bạn có thấy nó giống với Object destructuring không ? Thực sự thì không hẳn vậy và người ta không khuyến khích dùng with block vì một số vấn đề về performance và security nên nó bị cấm trong strict mode.
The Function constructor
Bạn có thể khai báo một function thông qua sử dụng Function() constructor với từ khóa new
Stringified argument cuối cùng chính là đoạn code logic.
Tagged Template Literals
Template Literals chính là một trong những bổ sung thú vị mà ES6 đem đến. Tuy nhiên chắc hẳn bạn sẽ thấy hơi lạ khi nghe Tagged template literals đúng không ?
Tagged Template literals cho phép bạn kiểm soát được việc parsing template thành string thông qua việc thêm một custom tag. Tag đơn giản là một parser function nhận vào một string array và cá giá trị đó sẽ được chuyển bởi string template. Tag function sẽ trả về kết quả cuối cùng.
Ví dụ sau đây chúng ta sẽ custom tag có tên là highlight, và chúng ta sẽ bọc giá trị cần highlight với tag <mark> vào để highlight
Có khá nhiều thư viện đã dùng tính năng này như:
Đơn thuần là một toán tử cho phép chúng ta viết nhiều expression được chia cách nhau bởi dấu phẩy , và trả về kết quả của expression cuối cùng.
tất cả các expression sẽ được tính toán và biến result sẽ được gán cho giá trị trả về của expressionN
Bạn chắc hẳn đã sử dụng nó trong vòng lặp for như vậy:
Đôi khi nó cũng có ích gộp các statement thành 1 dòng:
hoặc viết short lambda function:
Plus Operator (+)
Đã bao giờ bạn tìm cách đơn giản để convert từ string thành số chưa?
Đơn giản chỉ cần dùng + phía trước string đó.
Nó có thể convert từ các giá trị như negative, octal, hexadecimal, exponential. Hơn nữa nó còn có thể convert Date hoặc Moment.js object sang timestamp:
Bang Bang Operator (!!)
Là một trick dùng để convert bất kể expression nào đó thành giá trị boolean.
Tilde Operator (~)
Mọi người thường không để ý đến toán tử này lắm nhưng nó thường được dùng để check xem item có tồn tại trong string hoặc 1 array không như sau:
Note: ES6 và ES7 đã thêm method .includes() đối với String và Array. Nó clear hơn rất nhiều so với việc sử dụng trên.
Labelled statements
Javascript cho phép chúng ta dùng label để đặt tên một vòng lặp và block. Chúng ta có thể dùng những label này để quay lại (giống như goto) trong khi sử dụng break hoặc continue.
Labelled statements thực sự hữu dụng khi dùng với nested loops. Nhưng chúng ta cũng có thể dùng chúng để chia thành từng block code cho dễ hiểu và dễ maintain.
Tôi đã cố gắng liệt kê những tính năng ít biết đến của JavaScript. Tuy nhiên một số tính năng này có thể là không phù hợp với strict mode. Chú ý rằng là tôi không khuyến khích các bạn dùng tất cả những tính năng này. Dù chúng có thực sự là tốt thật nhưng bạn cũng có thể bắt gặp ánh nhìn khó hiểu từ teammate của bạn đấy.
Void Operator
Bạn chắc hẳn đã từng thấy hoặc dùng cú pháp: javascript:void(0); để vô hiệu hóa link sử dụng trong việc xử lý với ajax. void operator sẽ thực hiện một câu lệnh hay một biểu thức và trả về undefined.
Vậy tại sao không return undefined luôn ?
Sự thật là trước khi ES5 xuất hiện thì bạn có thể gán một giá trị khác cho original undefined (eg: undefined = "abc"). Vì vậy lúc đó sử dụng void là một cách để chắc chắn rằng bạn luôn trả về giá trị original undefined.
Constructor Brackets are optional
Đúng vậy, dấu ngoặc đơn () phía sau tên class khi chúng ta gọi constructor hoàn toàn là optional (Với điều kiện là contructor của bạn không nhận vào bất kỳ argument nào).
2 cách viết dưới đây đều là đúng và đều trả về cùng một kết quả:
IIFE Brackets can be skipped
Cú pháp IIFE (Immediately Invoked Functional Expression) chúng ta có thể bỏ được dấu ngoặc đơn Điều gì sảy ra nếu tất cả chúng đều còn ngoặc đơn ?
JavaScript parser cần những dấu ngoặc đơn đó để biết được những đoạn code trong đó là một Functional Expression chứ không phải là một Function. Hiểu được điều đó nên chúng ta có thể dùng nhiều cách để bỏ những dấu ngoặc đơn đó mà vẫn là cú pháp IIFE đúng.
void operator thông báo với parser rằng những đoạn code đó là functional expression. Do vậy chúng ta có thể bỏ ngoặc đơn khi khai báo function. Chúng ta cũng có thể dùng bất kỳ unary operators khác như void, +, !, -, etc.
Tuy nhiên bạn có thể sẽ tự hỏi rằng liệu những unary operator này có ảnh hưởng tới kết quả trả về từ IIFE không ?
Câu trả lời là có. Nhưng có một tin tốt đó là nếu bạn quan tâm tới kết quả trả về thì hãy lưu nó vào một biến nào đó
Để hiểu hơn về IIFE bạn có thể tham khảo bài viết
With Statement
Bạn đã bao giờ nghe đến with block statement chưa ? nó là một từ khóa trong Javascript. Nó thêm tất cả các thuộc tính của obect thành một scope chain như sau:
Bạn có thấy nó giống với Object destructuring không ? Thực sự thì không hẳn vậy và người ta không khuyến khích dùng with block vì một số vấn đề về performance và security nên nó bị cấm trong strict mode.
The Function constructor
Bạn có thể khai báo một function thông qua sử dụng Function() constructor với từ khóa new
Stringified argument cuối cùng chính là đoạn code logic.
Tagged Template Literals
Template Literals chính là một trong những bổ sung thú vị mà ES6 đem đến. Tuy nhiên chắc hẳn bạn sẽ thấy hơi lạ khi nghe Tagged template literals đúng không ?
Tagged Template literals cho phép bạn kiểm soát được việc parsing template thành string thông qua việc thêm một custom tag. Tag đơn giản là một parser function nhận vào một string array và cá giá trị đó sẽ được chuyển bởi string template. Tag function sẽ trả về kết quả cuối cùng.
Ví dụ sau đây chúng ta sẽ custom tag có tên là highlight, và chúng ta sẽ bọc giá trị cần highlight với tag <mark> vào để highlight
Có khá nhiều thư viện đã dùng tính năng này như:
- styled-components for React
- es2015-i18n-tag
- [chalk]
Đơn thuần là một toán tử cho phép chúng ta viết nhiều expression được chia cách nhau bởi dấu phẩy , và trả về kết quả của expression cuối cùng.
tất cả các expression sẽ được tính toán và biến result sẽ được gán cho giá trị trả về của expressionN
Bạn chắc hẳn đã sử dụng nó trong vòng lặp for như vậy:
Đôi khi nó cũng có ích gộp các statement thành 1 dòng:
hoặc viết short lambda function:
Plus Operator (+)
Đã bao giờ bạn tìm cách đơn giản để convert từ string thành số chưa?
Đơn giản chỉ cần dùng + phía trước string đó.
Nó có thể convert từ các giá trị như negative, octal, hexadecimal, exponential. Hơn nữa nó còn có thể convert Date hoặc Moment.js object sang timestamp:
Bang Bang Operator (!!)
Là một trick dùng để convert bất kể expression nào đó thành giá trị boolean.
Tilde Operator (~)
Mọi người thường không để ý đến toán tử này lắm nhưng nó thường được dùng để check xem item có tồn tại trong string hoặc 1 array không như sau:
Note: ES6 và ES7 đã thêm method .includes() đối với String và Array. Nó clear hơn rất nhiều so với việc sử dụng trên.
Labelled statements
Javascript cho phép chúng ta dùng label để đặt tên một vòng lặp và block. Chúng ta có thể dùng những label này để quay lại (giống như goto) trong khi sử dụng break hoặc continue.
Labelled statements thực sự hữu dụng khi dùng với nested loops. Nhưng chúng ta cũng có thể dùng chúng để chia thành từng block code cho dễ hiểu và dễ maintain.