[WEB][js] let과 const

---

let

개념

• 데이터를 저장할 때 사용하는 선언 방법
• 블록 수준의 유효 범위를 지원
• 값 변경 가능
• 중복 선언은 불가! 💡

 

• 즉, 이미 선언한 변수를 참조할 때는 let 없이 변수명만 사용하면 되고
• 값을 변경하고 싶을 때는 let 없이 변수명에 값을 대입해주면 됨.

 

예시 코드

let msg = 'GLOBAL';
function outer() {
  let msg = 'OUTER';
  console.log(msg);

  if (true) {
    let msg = 'BLOCK';
    console.log(msg);
  }
}

outer();

결과
OUTER
BLOCK

• 값 변경이 가능한 변수 (상수 x)
• 블록 수준의 유효 범위 지원

 

let msg = '하이!';
let msg = '안녕';
console.log(msg);

결과
SyntaxError: Identifier 'msg' has already been declared (에러)

• 중복 선언 불가

 

---

const

개념

• 변하지 않는 데이터(상수: constant)를 저장할 때 사용하는 선언 방법
• 블록 수준의 유효 범위를 지원
• 재할당 불가

 

예시 코드

const arr = { name: '90002', age: 15 };
arr = { name: '길동', age: 90 };

console.log(arr);

결과
TypeError: Assignment to constant variable.

• 상수, 즉 재할당 불가

 

const arr = { name: '90002', age: 25 };
arr.name = '길동';

console.log(arr);

결과
{ name: '길동', age: 25 }

• 주의할 점!
• 객체가 상수일 때, 그 객체의 속성은 변경이 가능하다.

⭐⭐⭐

• 위 그림과 같이, arr가 참조하는 메모리 주소가 변경되는 것이 아니라 속성값이 변경되는 것이기 때문에!

 

---

참고 내용

호이스팅과 var

• 변수의 선언을 scope의 최상단으로 옮기는 행위
• 즉, js 코드를 실행시킬 때 var로 선언된 변수들을 찾아서 메모리를 미리 할당 😯 (값 할당 x, 메모리만!)
• 함수 단위로 호이스팅
• 호이스팅 단계에서 이미 변수가 생성되어 있다면? 변수를 생성하지 않고 건너뜀.
  • 이 특징이 자바스크립트는 변수의 중복 선언을 허용하는 것처럼 보여지는 것!

var arr;
console.log(arr);

결과
undefined

• var로 선언된 변수들을 찾아서 메모리를 미리 할당
• 따라서 에러 x

 

var str = '100';
console.log(str);

var str = '00';
console.log(str);

결과
100
00

• 이미 변수가 생성되어 있다면 변수를 생성하지 않고 건너뜀
• 즉, 중복 선언 가능
• 따라서 에러 x