JavaScript Wierd Things (Part 1)

    JavaScript หรือเรียกย่อๆว่า JS ภาษายอดนิยมที่ถ้าจะให้เปรียบก็เหมือนช่างที่ต้องมาพร้อมกับประแจ คนทำเว็บก็หนีไม่พ้นที่จะไม่รู้จัก Javascript อยู่คู่กันมานานเป็นเครื่องมือที่เปรียบเสมือนสมองของเว็บไซต์ที่คอยประมวลผลทั้งในฝั่งของ Front-end และ Back-end 

    แต่ถึงอย่างนั้น JS ถิอเป็นภาษาที่มีสิ่งแปลกๆมากมาย เพราะฉนั้นวันนี้เรามาดูสิ่งแปลกๆใน JS กันเถอะ

TYPE CASTING

    ถ้าจะพูดถึงสิ่งแปลกๆใน JS แล้วไม่พูดถึงสิ่งนี้ก่อนก็คงไม่ได้ เพราะชื่อเสียงลือนามไปไกลซะจนถูกทำเป็นมีมกันเลยที่เดียว มาลองดูกันเลยดีกว่า

credit: @redcoders

        ครับตามมีม คุณสามารถพิสูจน์ความถูกต้องของมีมนี้ละก็ ก็ลองกด F12 แล้วพิมพ์ในช่อง console ดูผลลัพธ์ไม่ค่อยน่าแปลกใจเท่าไร    แต่มันก็ชวนให้สงสัยว่า

มันเกิดขึ้นไงนะ? ถ้า "11" + 1 ได้ "111" แล้วทำไม "11" - 1 ได้ 10 ละ? 

        ที่มันเกิดขึ้นเป็นเพราะในการทำงานเบื้องหลัง JS มีการแปลงประเภทของตัวแปรอัตโนมัติ ใช่อัตโนมัติและนี่แหละคือ keyword

credit: imgflip.com

โดย "11" เป็น string และ 1 เป็นตัวเลข โดย JS Engine ได้ทำการเปรียบเทียบทั้ง 2 ตัว และทำการแปลง 1 เป็น string เป็น "11" + "1" โดยเครื่องหมาย + มีอยู่ 2 หน้าที่นั้นคือ การดำเนินการทางคณิตศาสตร์ และ การเชื่อมสตริง เราจึงได้สตริง "111" 

        แล้วทำไมที "11" - 1 ได้ 10 ละ? เนื่องจากหากทำการแปลง 1 เป็น string เหมือนครั้งก่อนหน้าเราจะได้ "11" - "1"  ซึ่ง stringไม่สามารถลบกันได้ JS Engine จึงทำการแปลง "11" เป็น number เราจึงจะได้ 11 - 1 จึงได้คำตอบว่า 10 นั้นเองงง

อีกหนึ่งกรณีสำหรับการแปลงประเภทตัวแปรของ JS ที่เห็นได้ชัดนั้นก็คือ

        ลองหยุดคิดสักแปปว่าผลลัพธ์ที่ควรจะได้นั้นเป็นอย่างไร...ติ๊กต๊อกๆ

.

.

.

มาดูเฉลยกันดีกว่า

        ผลลัพธ์นั้นแทบจะแน่นอนอยู่แล้วว่าต้องแสดงข้อความว่า This statement is true. เพราะว่า 1 นั้นน้อยกว่า 2 และน้อยกว่า 3 

.

.

.

แล้วถ้าเคสนี้ละจะออกมาเป็นอย่างไร ?

        ก็แน่นอนอยู่แล้วผลลัพธ์ก็ควรจะเป็นแบบเดิมไม่ใช่เหรอในเมื่อ 3 มันมากกว่า 2 และ 1 แต่ลองดูผลลัพธ์ที่ได้สิ

        เอ๋ทำไมละ? บางคนอาจแปลกใจในผลลัพธ์ แต่นี่คือสิ่งที่เกิดขึ้นเบื้องหลังการทำงานของ JS Engine จากตัวอย่างแรก 1 < 2 < 3 ตัว JS Engine ทำการเปรียบเทียบ 1 นั้นน้อยกว่า 2 หรือไม่ เมื่อเป็นจริง         จึงรีเทิร์นกลับว่าเป็น true จะได้ว่า true < 3 เนื่องจาก true เป็น boolean และ 3 เป็น number JS Engine จึงทำการแปลง true ให้เป็น number ซึ่งโดยปกติแล้ว false นั้นแทนเลข 0 และ true แทนเลข 1 จะได้ว่า     1 < 3 จรึงถือว่าเป็นจริง จึงได้ผลลัพธ์ true

        ในขณะที่มาดูในตัวอย่างที่สอง 3 > 2 > 1 JS Engine เริ่มจากการเทียบ 3 กับ 2 ว่ามากกว่าจริงหรือไม่ได้ค่าเป็น true จึงได้ว่า true > 1 เฉกเช่นเดิม true ถูกแปลงกลายเป็น 1 จึงจะได้ว่า 1 > 1 ซึ่งไม่เป็นความจริง จึงได้ผลลัพธ์มาเป็น false

        

        สำหรับวันนี้ขอตัวลาไปก่อนขอบคุณครับ :)