let ใน JavaScript คืออะไรแตกต่างกับ var อย่างไรเป็นคำถามที่ JS Developer อยากรู้

letคืออะไร

ปกติใน JavaScript เราจะประกาศตัวแปรด้วย var ซึ่งเมื่อโปรเจคที่เขียนใหญ่ขึ้นมีตัวแปรมากขึ้น ตัวแปรที่ประกาศด้วย var มักจะก่อปัญหา เช่น ถ้าเราเผลอไปประกาศตัวชื่อเดียวกันแล้วเปลี่ยนค่าตัวแปรโดยไม่ตั้งใจ เพราะตัวแปรที่ประกาศด้วย var ชื่อเดียวกันสามารถเข้าถึงหรือมองเห็นตัวแปรนั้นได้ทั้งใน functionและนอก function เพราะฉนั้นนอก if นอก for จึงยังมองเห็นค่าของตัวแปรนั้นได้

ดังนั้น let ใน JavaScript(ES6) จึงถือกำเนิดขึ้นมาเพื่อแก้ปัญหาตัวแปรที่ประกาศด้วย var

let เป็นการประกาศตัวแปรแบบ block scope หมายความว่า scopeหรือขอบเขตการมองเห็นค่าของตัวแปรจะอยู่แค่ภายในบล็อคๆหนึ่ง(if,for, switch ฯลฯ)เท่านั้น

รูปแบบการใช้ let

let var1 [= valeur1] [, var2 [= valeur2]] [, ..., varN [= valeurN]];

ตัวอย่างโค้ดการใช้ let

ตัวอย่างที่ 1

let x = 1;
if (x == 1) {
  let x = 2;
  console.log(x);
  // output: 2
}
console.log(x);
// output: 1

จากโค้ดตัวอย่างด้านบน

ตัวแปร x ใน if จะมีค่าเท่ากับ 2

ส่วน console.log(x) บรรทัดสุดท้าย ตัวแปร x มีค่าเท่ากับ 1

เพราะตัวแปร x นอก if กับตัวแปร ใน if ถือว่าเป็นคนละตัวแปรกันถึงแม้จะมีชื่อเหมือนกันก็ตามที (scope หรือขอบเขตของมันจะอยู่แค่ภายในบล็อคๆหนึ่งเท่านั้น)

ตัวอย่างที่ 2

การประกาศตัวแปรแบบใช้ let ใน if หรือ scope เดียวกันจะใช้ชื่อซ้ำกันไม่ได้

var x='ทดสอบ let';
if (x) {
  let str_time='สวัสดีตอนเช้า';
  let str_time='สวัสดีตอนบ่าย';// Error
}

/*
ผลลัพธ์ที่ได้คือ 
SyntaxError: Identifier 'str_time' has already been declared
*/

let x = 1;
switch(x) {
  case 0:
    let num;
    break;
    
  case 1:
    let num; // Error
    break;
}

/*
ผลลัพธ์ที่ได้คือ 
SyntaxError: Identifier 'num' has already been declared
*/

ตัวอย่างที่ 3

3.1 ใน scope เดียวกัน ชื่อตัวแปรด้วย let จะซ้ำกับตัวแปรที่ประกาศด้วย var ไม่ได้

var x=5;
let x = 1;

/*
error : Identifier 'x' has already been declared
*/

3.2 ถ้าตัวแปรชื่อเดียวกันที่ประกาศด้วย var และ let อยู่คนล่ะ scope สามารถทำได้

var x = 1;
if(x){
    let x = 1; 
    console.log(x);
}
//ไม่ error