Video học lập trình mỗi ngày

Chính vì JavaScript được dự đoán là chiếm lĩnh nhiều nhất trong các dự án, vì vậy các tính năng được đề xuất liên tục nhất là về các operators, syntax constructions, expressions...

Vấn đề liên quan: Đừng Code kiểu này, đồng nghiệp đã đấm gãy răng tôi.

5 tính năng được đề xuất trong JavaScript cải thiện code của bạn.

Bài viết này ngắn gọn thôi, chỉ giới thiệu về Pipeline Operator nhưng chúng ta cũng không quên rằng có 5 tính năng JavaScript vẫn đang trong giai đoạn đề xuất nhưng chúng ta có thể sử dụng với Babel và sẽ cải thiện đáng kể trải nghiệm cách viết code của chính bạn. 

Nullish coalescing operator 

Optional chaining operator

Pipeline operator 

Numerical separator 

Do expressions

Pipeline operator

Toán tử này là một phần của một số tính năng JavaScript thử nghiệm và toán tử này khi sử dụng có thể giúp chúng ta đọc code dễ hơn, vì nó sắp sếp các hàm một cách trật tự. Nhìn tổng quan hơn, không tin hãy xem một ví dụ sau:

const reverseWords = 
      str => str
		.split( ' ' )
		.reduce( (revStr, word) => [ word, ...revStr ], [] )
		.join( ' ' );

console.log( reverseWords( 'this is fun' ) ); // Output: fun is this

Trên ví dụ kia thì đơn giản là viết một function đảo ngược đoạn text khi chúng ta truyền vào. Đơn giản là thế. Nếu bạn rối mắt tôi sẽ viết lại cho các bạn kiểu khác dễ nhìn hơn.

const splitBySpace = str => str.split( ' ' );
const reverseArray = arr => arr.reduce( ( acc, cur ) => [ cur, ...acc ], [] );
const joinWithSpace = arr => arr.join( ' ' );

const reverseWords =
    str => joinWithSpace(
        reverseArray(
            splitBySpace(
                str
            )
        )
    );

console.log( reverseWords( 'this is fun' ) ); // Output: fun is this

Ok dễ hơn chưa? Từng function được chia ra một cách rõ ràng, và vì sao chúng ta nên viết như thế này, thì trước kia có một bài viết về cách viết code rõ ràng. Hoặc có thể chúng ta sẽ viết ngắn gọn lại với công thức Single line of Code javascript

const reverseWords = str => joinWithSpace( reverseArray( splitBySpace( str ) ) );

Ở đây có thấy một điều kỳ lạ không? Đó chính là chúng ta phải đọc code từ trong ra ngoài, nghĩa là phải sử dụng hàm cắt trước splitBySpace. Điều này đi ngược lại quy trình đọc tự nhiên của chúng ta, từ trên xuống dưới. Chình vì vậy xem ra Pipeline operator có thể làm cho các cấu trúc này dễ đọc hơn nhiều và tương tự như chuỗi mà chúng ta đã có ban đầu trước khi chuyển các phép biến đổi sang các hàm riêng biệt:

const reverseWords =
    str => str
        |> splitBySpace
        |> reverseArray
        |> joinWithSpace;

Cũng nhìn rõ hơn đấy chứ. 

Ref: here