let, var, const?

var

• ES5까지 주로 사용된 변수를 선언하는 키워드.
• 오래된 자바스크립트 코드와의 호환성을 위해서 사용하는 것이 권장되어질 정도로 오래된 방식.
  오래되었기 때문에 여러가지 문제점들이 발견되었으며, 이 문제를 해결하기 위해 나온 것이 let과 const.
  
  

1) 함수 스코프

var로 선언된 변수는 함수 스코프(function scope)를 가지며, 함수 내에서 선언된 var 변수는 함수 전체에서 접근할 수 있다. 즉, 함수 내에서 선언된 변수는 함수 내에서만 유효하며, 함수 외부에서는 접근할 수 없다.

function example() {
  var x = 1; // 함수 스코프 내에서 선언된 변수 x

  if (true) {
    var y = 2; // 함수 스코프 내에서 선언된 변수 y
    console.log(x); // 1 (함수 내부에서 변수 x에 접근 가능)
    console.log(y); // 2 (함수 내부에서 변수 y에 접근 가능)
  }

  console.log(x); // 1 (함수 내부에서 변수 x에 접근 가능)
  console.log(y); // 2 (함수 스코프 내에서 변수 y에 접근 가능)

}

example();

console.log(x); // ReferenceError: x is not defined (함수 외부에서 변수 x에 접근 불가능)
console.log(y); // ReferenceError: y is not defined (함수 외부에서 변수 y에 접근 불가능)

반면 for 루프(블록 스코프) 내에서 var 키워드로 변수를 선언하면, 이 변수를 for 루프 밖에서도 사용할 수 있다.

for (var i = 0; i < 10; i++) {
	var aa = "I am an AA outside of the loop";
}

console.log(aa);
// I am an AA outside of the loop

function myFunc(){
	var bb = "I am an BB inside this function";
	console.log(bb);
}
myFunc();
// I am an BB inside this function
console.log(bb);
// ReferenceError : bb is not defined

2) 호이스팅

변수와 함수 선언이 맨 위로 이동되는 자바스크립트 매커니즘.

var는 변수가 선언되기 전에도 사용할 수 있으며, 호이스팅 동작을 수행.
이로 인해 변수를 선언하기 전에 사용할 수도 있고, 변수가 선언된 위치와 상관없이 동작.

console.log(x); // undefined
var x = 10;

변수 선언 전에 출력하므로 console.log 출력에서는 에러가 뜰거라 생각하지만, var는 선언되기 이전에 미리 스코프에서 올려져 있으므로 에러가 뜨지 않는다.

대신 아직 변수가 선언되기 전이므로 값은 초기화되지 않았기에 undefined가 뜬다.

var는 변수가 선언된 위치와 상관없이 동작하기에 코드 가독성과 예측성을 저하시킬 수 있으므로, var 사용을 최소화하는 것을 권장한다.

3) 재선언과 재할당

var로 선언된 변수는 재선언과 재할당이 가능.

var name = "Harry";
var name = "Kane"; // 재선언 가능

var age = 28;
age = 20; // 재할당 가능

---

let

• let은 var의 취약점을 보안해서 ES6 이후에 나온 키워드.
  
  

1) 블록 스코프

let으로 선언된 변수는 블록 스코프를 가진다. 즉, 변수가 선언된 블록(중괄호로 둘러싸인 영역, {} )과 그 하위 블록 내에서만 사용할 수 있다.

이때, 하나의 블록은 중괄호 속에서 존재하며 중괄호 안에 있는 것은 모두 블록 범위에 해당된다.

let x = "global";

if (x === "global"){
	let x = "block-scoped";

	console.log(x); // block-scoped
}
console.log(x); // global

2) 호이스팅

let은 호이스팅이 발생되지만, 변수가 선언되기 전에는 사용할 수 없으며 변수 선언 전에 접근하면 'ReferenceError'가 발생한다.

console.log(a); // ReferenceError: a is not defined
console.log(b); // b is undefined

let a = 1;
var b = 2;

undefined로 초기화되는 var와 다르게 let의 키워드는 초기화 되지 않는다.

3) 재선언과 재할당

let으로 선언된 변수는 재할당이 가능하지만, 재선언은 허용되지 않는다.

// 재할당
let footballPlayer = "Harry";
footballPlayer = "Harry Kane";

// 재선언
let baseballPlayer = "Ohtani";
let baseballPlayer = "Ohtani Shohei"; // error: Identifier 'baseballPlayer' has already been declared

그러나 같은 변수가 다른 범위 내에서 재선언한 경우에 에러는 발생하지 않는다.

let x = "global";

if (x === "global"){
	let x = "block-scoped";

	console.log(x); // block-scoped
}
console.log(x); // global

---

const

• 일정한 상수 값을 선언하는 데 사용되는 키워드.
  
  

1) 블록 스코프

let과 같이 const로 선언된 변수도 블록 스코프( {} )를 가지므로 블록 외부에서는 접근할 수 없다.

function example() {
  if (true) {
    var x = 10; // 함수 스코프를 가지는 변수
    let y = 20; // 블록 스코프를 가지는 변수
    const z = 30; // 블록 스코프를 가지는 상수

    console.log(x); // 10
    console.log(y); // 20
    console.log(z); // 30
  }

  console.log(x); // 10
  console.log(y); // ReferenceError: y is not defined
  console.log(z); // ReferenceError: z is not defined
}

example();

2) 호이스팅

const도 var와 let와 같이 호이스팅의 대상이 되지만 초기화 되지는 않는다.

변수 선언 전에 const 변수를 호출한다면 에러가 발생한다.

console.log(x); // undefined
console.log(y); // ReferenceError: y is not defined
console.log(z); // ReferenceError: z is not defined

var x = 10;
let y = 20;
const z = 30;

let과 const를 사용하면 변수의 스코프와 재할당 가능 여부를 더 명확하게 제어할 수 있으며, 코드의 가독성과 예측성을 향상시킬 수 있다.

3) 재선언과 재할당

const 변수는 재선언과 재할당이 불가능하며, 이는 변수의 값이 한 번 할당되면 그 값을 변경할 수 없음을 의미한다.

한 번 const로 선언하면 변수의 값이 해당 범위 내에서 동일하게 유지되기에, const로 선언된 변수는 선언과 동시에 초기화되어야 한다.

var x = 10;
let y = 20;
const z = 30;

x = 50; // 재할당 가능
y = 60; // 재할당 가능
z = 70; // TypeError: Assignment to constant variable.

그러나 const로 선언된 변수가 불변이라는 의미는 아니다.

const로 선언된 객체나 배열의 경우, 객체 또는 배열 자체는 변경할 수 없지만, 객체 또는 배열 내부의 속성이나 요소는 수정할 수 있다.

const person = {
	name : 'Harry Kane',
	age : 28,
};

person.age = 20;
console.log(person.age);// 20

---

Reference

https://jerryjerryjerry.tistory.com/151