Var, Let และ Const - อะไรคือความแตกต่าง?

คุณสมบัติใหม่มากมายที่ออกมาพร้อมกับ ES2015 (ES6) และตอนนี้เนื่องจากเป็นปี 2020 สันนิษฐานว่านักพัฒนา JavaScript จำนวนมากคุ้นเคยและเริ่มใช้คุณลักษณะเหล่านี้

แม้ว่าสมมติฐานนี้อาจเป็นจริงบางส่วน แต่ก็ยังคงเป็นไปได้ว่าคุณลักษณะเหล่านี้บางส่วนยังคงเป็นปริศนาสำหรับผู้พัฒนา

คุณสมบัติอย่างหนึ่งที่มาพร้อมกับ ES6 คือการเพิ่มletและconstซึ่งสามารถใช้สำหรับการประกาศตัวแปร คำถามคืออะไรที่ทำให้มันแตกต่างจาก good ol ' varที่เราเคยใช้? หากคุณยังไม่ชัดเจนเกี่ยวกับเรื่องนี้บทความนี้เหมาะสำหรับคุณ

ในบทความนี้เราจะหารือvar, letและconst  ส่วนที่เกี่ยวกับขอบเขตการใช้งานและยกของพวกเขา ขณะที่คุณอ่านโปรดสังเกตความแตกต่างระหว่างความแตกต่างที่ฉันจะชี้ให้เห็น

Var

ก่อนการถือกำเนิดของ ES6 varการประกาศปกครอง มีปัญหาที่เกี่ยวข้องกับตัวแปรที่ประกาศด้วยvarแม้ว่า นั่นคือเหตุผลที่จำเป็นสำหรับวิธีการใหม่ ๆ ในการประกาศตัวแปรให้เกิดขึ้น ก่อนอื่นมาทำความเข้าใจvarเพิ่มเติมก่อนที่เราจะพูดถึงประเด็นเหล่านั้น

ขอบเขตของตัวแปร

ขอบเขตหมายถึงตำแหน่งที่ตัวแปรเหล่านี้พร้อมใช้งาน varการประกาศถูกกำหนดขอบเขตทั่วโลกหรือฟังก์ชัน / ขอบเขตเฉพาะที่

ขอบเขตเป็นแบบโกลบอลเมื่อมีการvarประกาศตัวแปรนอกฟังก์ชัน ซึ่งหมายความว่าตัวแปรใด ๆ ที่ประกาศโดยvarอยู่นอกบล็อกฟังก์ชันจะพร้อมใช้งานสำหรับทั้งหน้าต่าง

varเป็นฟังก์ชันที่กำหนดขอบเขตเมื่อมีการประกาศภายในฟังก์ชัน ซึ่งหมายความว่าพร้อมใช้งานและสามารถเข้าถึงได้ภายในฟังก์ชันนั้นเท่านั้น

หากต้องการทำความเข้าใจเพิ่มเติมโปรดดูตัวอย่างด้านล่าง

 var greeter = "hey hi"; function newFunction() { var hello = "hello"; } 

ที่นี่greeterมีการกำหนดขอบเขตทั่วโลกเนื่องจากมีอยู่นอกฟังก์ชันในขณะที่helloอยู่ในขอบเขตของฟังก์ชัน ดังนั้นเราจึงไม่สามารถเข้าถึงตัวแปรhelloนอกฟังก์ชันได้ ดังนั้นถ้าเราทำสิ่งนี้:

 var tester = "hey hi"; function newFunction() { var hello = "hello"; } console.log(hello); // error: hello is not defined 

เราจะได้รับข้อผิดพลาดซึ่งเป็นผลมาจากการhelloไม่พร้อมใช้งานนอกฟังก์ชัน

ตัวแปร var สามารถประกาศและอัพเดตใหม่ได้

ซึ่งหมายความว่าเราสามารถทำได้ภายในขอบเขตเดียวกันและจะไม่ได้รับข้อผิดพลาด

 var greeter = "hey hi"; var greeter = "say Hello instead"; 

และสิ่งนี้ด้วย

 var greeter = "hey hi"; greeter = "say Hello instead"; 

รอกของ var

Hoisting เป็นกลไก JavaScript ที่ย้ายตัวแปรและการประกาศฟังก์ชันไปที่ด้านบนสุดของขอบเขตก่อนที่จะเรียกใช้โค้ด ซึ่งหมายความว่าหากเราทำสิ่งนี้:

 console.log (greeter); var greeter = "say hello" 

มันถูกตีความว่า:

 var greeter; console.log(greeter); // greeter is undefined greeter = "say hello" 

ดังนั้นตัวแปรยกไปด้านบนของขอบเขตของพวกเขาและเริ่มต้นที่มีค่าของvarundefined

ปัญหาเกี่ยวกับ var

varมีจุดอ่อนที่มาพร้อมกับเป็น  ฉันจะใช้ตัวอย่างด้านล่างเพื่ออธิบาย:

 var greeter = "hey hi"; var times = 4; if (times > 3) { var greeter = "say Hello instead"; } console.log(greeter) // "say Hello instead" 

ดังนั้นตั้งแต่times > 3ผลตอบแทนที่แท้จริงเป็นนิยามใหม่ให้กับgreeter "say Hello instead"แม้ว่านี่จะไม่ใช่ปัญหาหากคุณต้องการgreeterกำหนดนิยามใหม่ แต่ก็กลายเป็นปัญหาเมื่อคุณไม่ทราบว่าgreeterมีการกำหนดตัวแปรไว้แล้วก่อนหน้านี้

หากคุณใช้greeterในส่วนอื่น ๆ ของโค้ดคุณอาจประหลาดใจกับผลลัพธ์ที่คุณอาจได้รับ ซึ่งอาจทำให้เกิดข้อบกพร่องมากมายในโค้ดของคุณ นี่คือเหตุผลletและconstจำเป็น

ปล่อย

letตอนนี้เป็นที่ต้องการสำหรับการประกาศตัวแปร ไม่น่าแปลกใจเลยที่มีการปรับปรุงการvarประกาศ นอกจากนี้ยังช่วยแก้ปัญหาvarที่เราเพิ่งกล่าวถึง ลองพิจารณาว่าทำไมจึงเป็นเช่นนั้น

ปล่อยให้เป็นขอบเขตการบล็อก

บล็อกคือโค้ดกลุ่มหนึ่งที่ล้อมรอบด้วย {} บล็อกอาศัยอยู่ในวงเล็บปีกกา ทุกสิ่งที่อยู่ในวงเล็บปีกกาเป็นบล็อก

ดังนั้นตัวแปรที่ประกาศในบล็อกที่มีlet  ให้ใช้งานภายในบล็อกนั้นเท่านั้น ให้ฉันอธิบายสิ่งนี้ด้วยตัวอย่าง:

 let greeting = "say Hi"; let times = 4; if (times > 3) { let hello = "say Hello instead"; console.log(hello);// "say Hello instead" } console.log(hello) // hello is not defined 

เราเห็นว่าการใช้helloภายนอกบล็อก (วงเล็บปีกกาที่กำหนดไว้) ส่งกลับข้อผิดพลาด เนื่องจากletตัวแปรถูกกำหนดขอบเขตการบล็อก

อนุญาตให้อัปเดตได้ แต่ไม่สามารถประกาศซ้ำได้

เช่นเดียวvarกับตัวแปรที่ประกาศด้วยletสามารถอัปเดตได้ภายในขอบเขต ซึ่งแตกต่างจากvarที่มีletตัวแปรจะไม่สามารถประกาศภายในขอบเขตของมัน ดังนั้นในขณะนี้จะใช้งานได้:

 let greeting = "say Hi"; greeting = "say Hello instead"; 

สิ่งนี้จะส่งคืนข้อผิดพลาด:

 let greeting = "say Hi"; let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared 

อย่างไรก็ตามหากกำหนดตัวแปรเดียวกันในขอบเขตที่แตกต่างกันจะไม่มีข้อผิดพลาด:

 let greeting = "say Hi"; if (true) { let greeting = "say Hello instead"; console.log(greeting); // "say Hello instead" } console.log(greeting); // "say Hi" 

เหตุใดจึงไม่มีข้อผิดพลาด เนื่องจากอินสแตนซ์ทั้งสองถือว่าเป็นตัวแปรที่ต่างกันเนื่องจากมีขอบเขตที่แตกต่างกัน

ความจริงเรื่องนี้ทำให้เป็นทางเลือกที่ดีกว่าlet varเมื่อใช้letงานคุณไม่ต้องกังวลหากคุณเคยใช้ชื่อสำหรับตัวแปรมาก่อนเนื่องจากตัวแปรมีอยู่ภายในขอบเขตเท่านั้น

นอกจากนี้เนื่องจากไม่สามารถประกาศตัวแปรเกินหนึ่งครั้งภายในขอบเขตปัญหาที่กล่าวถึงก่อนหน้านี้ที่เกิดขึ้นvarจะไม่เกิดขึ้น

การชักรอก

เช่นเดียว   var, letการประกาศยกไปด้านบน ซึ่งแตกต่างจากvarที่จะเริ่มต้นเป็นundefinedที่letคำหลักไม่ได้เริ่มต้น ดังนั้นหากคุณพยายามใช้letตัวแปรก่อนการประกาศคุณจะได้รับไฟล์Reference Error.

Const

ตัวแปรที่ประกาศด้วยการconstรักษาค่าคงที่ constการประกาศมีความคล้ายคลึงกันบางประการกับletการประกาศ

การประกาศ const ถูกกำหนดขอบเขตการบล็อก

เช่นเดียวกับletการประกาศการconstประกาศสามารถเข้าถึงได้ภายในบล็อกที่ประกาศเท่านั้น

ไม่สามารถอัพเดตหรือประกาศซ้ำได้

ซึ่งหมายความว่าค่าของตัวแปรที่ประกาศด้วยconstจะยังคงเหมือนเดิมภายในขอบเขต ไม่สามารถปรับปรุงหรือประกาศใหม่ได้ ดังนั้นหากเราประกาศตัวแปรด้วยconstเราจะทำสิ่งนี้ไม่ได้:

 const greeting = "say Hi"; greeting = "say Hello instead";// error: Assignment to constant variable. 

หรือสิ่งนี้:

 const greeting = "say Hi"; const greeting = "say Hello instead";// error: Identifier 'greeting' has already been declared 

constดังนั้นการประกาศทุกครั้งจะต้องเริ่มต้นเมื่อมีการประกาศ

constลักษณะการทำงานนี้จะแตกต่างกันอย่างใดเมื่อมันมาถึงวัตถุประกาศด้วย แม้ว่าconstอ็อบเจ็กต์จะไม่สามารถอัพเดตได้ แต่คุณสมบัติของอ็อบเจ็กต์นี้สามารถอัพเดตได้ ดังนั้นหากเราประกาศconstวัตถุดังต่อไปนี้:

 const greeting = { message: "say Hi", times: 4 } 

ในขณะที่เราไม่สามารถทำได้:

 const greeting = { words: "Hello", number: "five" } // error: Assignment to constant variable. 

เราสามารถทำมันได้:

 greeting.message = "say Hello instead"; 

This will update the value of greeting.message without returning errors.

Hoisting of const

Just like let, const declarations are hoisted to the top but are not initialized.

So just in case you missed the differences, here they are:

  • var declarations are globally scoped or function scoped while let and const are block scoped.
  • var variables can be updated and re-declared within its scope; let variables can be updated but not re-declared; const variables can neither be updated nor re-declared.
  • They are all hoisted to the top of their scope. But while var variables are initialized with undefined, let and const variables are not initialized.
  • While var and let can be declared without being initialized, const must be initialized during declaration.

Got any question or additions? Please let me know.

Thank you for reading :)