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


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

ใครที่ฝึกเขียน JavaScript(ES6) อยู่คงสงสัยว่า let เอาไว้ใช้ทำอะไร let มีความแตกต่างกับ 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

 

เทพควิช-lnwquiz