Những thứ kỳ quặc của Javascript?

485

Javascript đã và đang ngày càng phát triền và phổ biến hơn trong cộng đồng lập trình viên. Với JS, chúng ta có thể làm ra hàng mớ các ứng dụng từ Web cho đến ứng dụng di động (React Native), chúng ta thậm chí còn viết được các tựa games 3D, stream video, nhạc, xử lý file, xử lý dữ liệu, và cả AI luôn nếu thích 

Đi kèm với sự phổ biến đó là sự phát triển từng ngày của JS, kéo theo các cú pháp và các cách sử dụng mới mà ngay cả đến những lập trình viên lâu năm cũng không dám tự tin phát biểu mình hiểu sâu, hiểu hết về ngôn ngữ này và sức mạnh của nó. Thế nhưng, chính vì sự phức tạp và đồ sộ của mình, JS cũng tồn tại một số thứ khá là… kỳ quặc, không biết do vô tình hay hữu ý. Có thể những nhà phát triển JS cũng đã quên mất luôn là hồi đấy mình làm ra những thứ kỳ quặc đó để làm gì luôn!

Hôm nay hãy cùng điểm qua một số những cú pháp “dị hợm” này nhé!

Cú pháp gọi hàm

Chắc hẳn chúng ta đã quen với kiểu invoke một function JS ngay khi chương trình được chạy như này rồi:

Có một cú pháp khác để làm điều tương tự, chỉ thay đổi một chút như này:

Thật sự! 2 cú pháp để thực hiện một công việc giống hệt nhau -.-

Khai báo Function:

Như trên thì chắc ai cũng đã biết khai báo kiểu này:

Và đương nhiên, ta cũng có thể làm thế này:

Hoặc thế này:

Hoặc thế này nữa:

Nhưng điều kỳ quặc mình muốn nhắc tới ở đây đó là:

thì chạy ngon lành cành đào, nhưng mà

thì lại không chạy, lỗi Syntax: Unexpected token )

Thật sự không hiểu lắm :3

Vị trí của dấu ngoặc nhọn cũng rất quan trọng!

Hãy xem thử 2 ví dụ dưới đây, cả 2 ví dụ này nếu nhìn vào chúng ta đều thấy chúng trả về một object, trong đó có một cặp key – value, simple look!

Nhưng hãy thử kiểm tra lại một chút, xem chúng có thật sự giống nhau không?

Why the heck?? Kết quả kiểm tra kiểu dữ liệu trả về false, chả lẽ 2 object này lại khác nhau hay sao??

Sự thật không phải thế, hãy nhìn vào function foo() trước, bởi vì chúng ta đặt dấu ngoặc nhọn trên một dòng mới, nên lúc này JS engine sẽ thấy ngay đằng trước return không hề có gì cả, thế là nó trả về undefined, còn với function bar() thì sẽ có kiểu dữ liệu là object.

Chú ý cái này một chút nhé, không thì lại đừng hỏi vì sao code không chạy, mặc dù chả sai cái gì :3

Chú ý Object Null

Có một lỗi mà mình vẫn thường xuyên gặp phải, đó là không kiểm tra triệt để not null trong object trả về từ API, bình thường mình sẽ hay làm như này:

Ở đây mình chỉ đang kiểm tra đối tượng trả về có phải một Object hay không, và ngay cả một Object rỗng như này {} cũng có type là object chứ không phải null, vậy nên xuống dòng code thứ 2, chắc chắn mình sẽ dính lỗi TypeError: Cannot read property ‘prop’ of null, vậy nên hãy viết lại như sau để đảm bảo Object đó không null

Đừng quá tin những gì mình thấy =))

Đây mới là phần dị hợm lố bịch nhất của JS, thật sự không hiểu ông nào rảnh rỗi làm ra cái đống này nữa, chắc hẳn đã có nhiều anh dev dở khóc dở cười với những cú compare tưởng như đơn giản nhưng lại không giống đang giỡn.

Nhưng nếu chúng ta làm thế này thì sao:

Wait what the heo?? Sao lại vậy được? Tại sao một array lại == được một string??

Đó là vì JS Engine ngầm convert new Array(3) thành một chuỗi, và nếu bạn thử gõ vào console new Array(3).toString() thì kết quả sẽ là: “,,”, bằng đúng vế phải của ví dụ trên. Đây cũng là một điều bạn nên chú ý, thay vì sử dụng == thì hãy dùng === để kiểm tra chính xác type của 2 vế nhé.

So sánh 2 Object

Hãy tạo ra 2 object được chứa vào 2 biến riêng biệt như sau:

Giống như [] === [] => false thì với 2 object cũng vậy:

không quá ngạc nhiên nhể. Nếu trong toán học, chúng ta có:

Nhưng trong JS, một object lại chẳng bao giờ bằng chính nó cho dù bất cứ giá nào:

Thật là kỳ lạ phải không?

Cách Toán học hoạt động trong JS

Cái này thì chắc đến Giáo sư Ngô Bảo Châu cũng phải bó tay luôn rồi. Toán ở trong JS nó là một cái gì đó vô thường, chả giống cái gì cả!

Hãy xem qua một vài phép toán tưởng như đơn giản sau đây, lưu ý người viết không hút bài khi viết cần đâu

Cái này thì chắc đã kha khá người biết rồi, 2 kiểu dữ liệu String và Number không nhân chia trừ được, nhưng nếu dùng phép cộng thì JS sẽ hiểu thành nối chuỗi, nhưng với Object và Array thì sao?

2 object không thể cộng được cho nhau, và mạnh dạn đoán với 3 phép toán còn lại cũng tương tự

Thử với 2 Array xem:

Ta có được một String null, như giải thích ở trên, [] sẽ được convert thành một ký tự rỗng: “”

Và thế là ta có kết quả trên. thế nếu:

Kết quả sẽ là: [object Object]

Áp dụng tính chất giao hoán của phép cộng:

Nhưng không : )) Ở đây chúng tôi không làm thế. Kết quả trả về là: false

Có vẻ như các định luật Toán học không tồn tại ở hệ quy chiếu JS rồi : ))

Ta có:

Vậy nên 2 mệnh đề này đem so sánh mới không bằng nhau. Thật sự thì có Chúa mới biết tại sao lại vậy!

Tuy nhiên điểm dừng chưa phải ở đây, những thứ sau đây mới là những thứ kỳ quặc nhất mà rất nhiều người trong số chúng ta chưa hề biết đến.

Stranger Things

Chú ý: Đây không phải hậu truyện của một bộ phim 4 season trên Netflix, đây là một phiên bản dị hợm hơn. Tất nhiên nếu bạn thích thì có thể tìm xem với tên phim to đùng kia kìa, phim rất hay.

Đầu tiên, chúng ta đều biết và nên biết, trong JS thì: undefined , ', "" đều mang giá trị là false.

Ta đã biết [] + [] = "" và [] <=> "" <=> false, thế nên !"" <=> true

Ta lại có: Nếu thêm dấu + trước một giá trị boolean true thì JS sẽ convert thành kiểu integer:

Magic chưa 😮 Và từ cách chuyển đổi dữ liệu đặc biệt này, ta có thể dùng nó để “viết” thành các ký tự hoàn toàn đúng quy tắc. Ví dụ:

Hãy thử copy đoạn code dưới đây và paste vào console xem:

Hay chưa =)) các ký tự còn lại các bạn có thể nghịch ở đây translate.js

Tưởng đến đây là hết, nhưng vẫn còn một phần nữa, các bạn ráng xem nốt =))

Hãy thử nhìn vào đoạn code này:

Đây lại là một đoạn code hoàn toàn hợp lệ nữa 😮 Hãy thử paste nó vào console xem như nào.

Unit nhỏ nhất của đoạn trên là:

Từ đó ta có thể làm một số phép tính đơn giản như:

Và chưa dừng lại ở đó, ta có thể dùng []+ ở đầu mỗi dòng, việc này sẽ convert kết quả trả về từ integer thành string

Thật là kỳ lạ phải không? 😄

Cuối cùng

Đến đây là hết rồi, cám ơn các bạn đã theo dõi bài viết. Nếu các bạn thích hãy cho mình một upvote để mình có thể ra thêm các bài viết thú vị trong tương lai.

Thanks for watching!

TopDev via Viblo

SHARE