Javascript의 Var, let 및 const

javascript를 배우는 동안 const, let, var가 어떻게 작동하는지 이해하는 것이 중요합니다. 이 키워드는 javascript에서 변수를 선언하는 데 사용됩니다. 이러한 키워드를 이해하는 동시에 javascript에서 범위 및 호이스팅의 개념을 이해하는 것도 중요합니다.

var 키워드:

var 키워드를 사용하여 변수를 선언하면 함수 범위 또는 전역 범위가 될 수 있습니다. 함수 외부에서 var를 선언하면 전역 범위가 지정되고 코드의 어디에서나 액세스할 수 있습니다. var가 함수 내에서 선언되면 함수 범위입니다.

var a = 2;     //varable declared gloabally

function localScope() {
   var b = 5;
   console.log(a);   // output 2
   console.log(b);   // output 5
}
localScope();
console.log(a);    // output 2
console.log(b);    // ReferenceError :  b is not defined

위의 코드 스니펫에서 localScope 함수 내에서 'a'에 액세스할 때 제대로 작동합니다. 여기서 'a'는 전역 범위로 선언됩니다. 그러나 localScope 함수 외부에서 'b'에 액세스하면 변수 b가 함수 내부에서 로컬로 선언되기 때문에 오류가 발생합니다.

var로 선언된 변수에 새로운 값을 재할당하거나 재선언할 수도 있습니다. 변수는 마지막으로 할당된 값을 보유하며 두 경우 모두 잘 작동합니다.

var a = 2;

a = 2;     //  reinitiated with some other value
console.log(a)    // output 2

var a = 20;     // redeclared
console.log(a);   // output 20

변수가 시작되기 전에도 변수를 사용할 수 있습니다. 이렇게 하면 변수가 "정의되지 않음"으로 표시됩니다. 이는 곧 다룰 자바스크립트의 호이스팅 때문입니다.

console.log(a)    //undefined
var a=100;

let 키워드 :

let 키워드는 블록 범위이므로 let으로 선언된 변수는 초기화된 블록에서만 액세스할 수 있습니다. 블록 외부에서 액세스하려고 하면 오류가 발생합니다.

{
  let a = 10;
}
console.log(a);   // ReferenceError : a not defined

let을 사용하여 선언된 변수에 대한 값을 다시 초기화할 수 있지만 다시 선언할 수는 없습니다. 변수가 선언되기 전에 사용하면 오류가 발생하고 var의 경우 '정의되지 않음'이라고 표시됩니다.

let a = 10;   // declared

a = 20;    // reinitialized works fine

let a = 30;     // SyntaxError: Identifier 'a' has already been declared

const 키워드 :

이름에서 알 수 있듯이 const는 const 변수에 할당된 값을 변경할 수 없습니다. 값이 변수로 초기화되면 다시 선언하거나 다시 초기화할 수 없습니다. 'let'을 사용하여 선언된 변수는 블록 범위이며 변수는 선언 전에 사용할 수 없습니다.

const x = 10;

x = 20   // TypeError : Assigning to a constant variable.

객체의 경우 할당된 객체에 속성을 추가할 수 있지만 객체 전체를 변경할 수는 없습니다. 배열의 경우에도 마찬가지입니다. 기존 배열에 값을 추가할 수 있지만 새 배열을 동일한 변수에 할당할 수는 없습니다.

const details = {
  name: "Naveen",
  age : 21,
};
console.log(details)   // { name: 'Naveen', age: 21 }

details = {
  name: "Srinath",
};   // TypeError: Assignment to constant variable.

// correct syntax
details.age = 21;
console.log(details);