Sự kỳ quặc của JavaScript

[pnhieuna (Pham Ngoc Hieu)]

Sau một thời gian tìm hiểu về Javascript thì em nhận ra rằng khi đọc một đoạn code javascript thì cảm thấy khó hiểu hơn so với C# hay Java. Thậm chí có một số trường hợp em cảm thấy kỳ quặc, ví dụ em đang dùng vue js thì nó có đoạn code sau trong mã
Ví dụ để lọc ra số những công việc todo đã làm thì cấu trúc của nó như sau :

Completed Tasks:{{todos.filter(todo => {return todo.done === true}).length}}

em thấy thử viết lại bằng đoạn mã sau dễ hiểu hơn:

Completed Tasks:{{todos.filter(todo.done == true).length}}

Nhưng rất tiếc là đoạn mã này không chạy. Rõ ràng nó chỉ khác nhau ở chỗ là đoạn :

todo => {return todo.done === true}

Nhưng em nghĩ là tại sao lại phải viết phức tạp như vậy ? rõ ràng cách viết thứ 2 của em trong sáng và dễ hiểu hơn, tại sao lại không được. Rõ ràng các framework phía font end javascript thật kỳ lạ.

[newbie1 (Lính mới)]

@pnhieuna

todo => {return todo.done === true}

Cái này là lambda expression, ngôn ngữ nào cũng có

@pnhieuna

khó hiểu hơn so với C# hay Java.

java, C# đều có cái này. C# dùng trong LinQ

Cách này dễ hiểu hơn

[SuperFrankie8 (SuperFrankie)]

Nhưng em nghĩ là tại sao lại phải viết phức tạp như vậy ? 

Mỗi ngôn ngữ đều có syntax khác nhau, vì vậy khi bạn sử dụng thì phải nhập gia tùy tục thôi ^^

[kisuluoibieng (Tên Gì Cũng Được)]

@pnhieuna

Completed Tasks:{{todos.filter(todo => {return todo.done === true}).length}}

viết phức tạp là do bạn coi mấy cái ngồn kém chất lượng,
chứ như dòng trên thì chỉ cần viết
{{todos.filter(todo => todo.done).length}}

[pnhieuna (Pham Ngoc Hieu)]

em không hiểu là người ta sinh ra cái dấu mũi tên => với ý nghĩa gì ? có phải nó muốn báo cho trình biên dịch một thông tin gì đó quan trọng hay không ?

[SuperFrankie8 (SuperFrankie)]

Mình nghĩ bạn chưa hiểu syntax của Javascript, bạn cần đọc thêm về thêm về ES5,ES6

Đối với => ở đây có nghĩa là thay thế cho cú pháp function()

Khi sử dụng ES6

todos.filter(todo => {return todo.done === true}).length

Khi không sử dụng ES6

todos.filter(function (todo) {return todo.done === true}).length

Nguồn tham khảo : https://www.w3schools.com/js/js_arrow_function.asp

[rogp10]

Nếu chỉ là đếm thì dùng for… of… hay reduce nhé

[HR16 (Gà Coder)]

@pnhieuna

em thấy thử viết lại bằng đoạn mã sau dễ hiểu hơn:

Completed Tasks:{{todos.filter(todo.done == true).length}}

Viết kiểu này cũng được:

Completed Tasks:{{todos.filter(todo => todo.done == true).length}}

@pnhieuna

em không hiểu là người ta sinh ra cái dấu mũi tên => với ý nghĩa gì ? có phải nó muốn báo cho trình biên dịch một thông tin gì đó quan trọng hay không ?

Họ thích thì họ làm thôi, Pascal với Fortan đâu có cái này đâu. Cái này có nguồn gốc từ phép tính lambda của Alonzo Church.

[SakaDream (Phan Bá Hải)]

@pnhieuna

Ví dụ để lọc ra số những công việc todo đã làm thì cấu trúc của nó như sau :

Completed Tasks:{{todos.filter(todo => {return todo.done === true}).length}}

• Dấu => thực chất là arrow function. Bên Java cũng có cái mũi tên tương tự -> gọi là lambda expression
  VD như bên Java

todos.stream().filter(todo -> {
    return todo.done == true;
}).count();

• javascript có 2 kiểu so sánh bằng. == chỉ so sánh giá trị, nên nếu 2 variable khác datatype thì js sẽ cố gắng convert 2 variable cùng datatype để so sánh giá trị. === so sánh cả giá trị và datatype
  VD

'' == 0 // true :smile: vì js sẽ convert '' (string) thành ''.length = 0 (number), surprise!
'' === 0 // false vì js lúc này check cả datatype, string != number

Mình dân Java Backend nên có thể mấy cái js không rõ nhiều. Ai có góp ý thì comment cho xôm tụ nhé

[tonghoangvu (Vu Tong)]

@pnhieuna

rõ ràng cách viết thứ 2 của em trong sáng và dễ hiểu hơn, tại sao lại không được

@pnhieuna

Completed Tasks:{{todos.filter(todo.done == true).length}}

Không được là thế lào? Có báo lỗi gì không? Đừng nói chung chung như thế.

Mình nhìn sơ vào thì thấy cách của bạn biến todo (không có s) chưa được khai báo mà đã dùng rồi.

Trong khi đó code của người ta là dạng lambda todo => ... rõ ràng đã được khai báo như một param rồi.

@pnhieuna

Completed Tasks:{{todos.filter(todo => {return todo.done === true}).length}}

[hongquan (Nguyễn Hồng Quân)]

@pnhieuna

rõ ràng cách viết thứ 2 của em trong sáng và dễ hiểu hơn

Code của bạn mới là không trong sáng và khó hiểu, vì nhìn vào cụm todo.done == true, không ai hiểu todo của bạn lấy ở đâu ra và nó có giá trị gì.

[luancloudmis (Cao Thành Luân)]

Arrow function cực kì dễ hiểu, mình thấy cách viết của bạn mới là không tường minh, nếu viết theo cách của bạn thì biến todo là gì. Mà không rõ bạn xem cái ví dụ kia ở trang nào, chứ JS có truthy và falsy chỉ cần viết
todos.filter(item => item.done).length thôi