003. JavaScript : let, const

var로 선언된 변수는 어디에서 선언되고 사용되는 곳에 따라서 전역 변수라 사용되기도 하고 지역변수로도 사용하게 됩니다, 또한 전역 변수로 선언되어서 사용할 때 동일 이름을 선언되어 사용되면 값을 서로 덮어쓰게 됩니다. 즉 동일 이름을 사용하면 데이터는 공유됩니다. 이것은 자바스크립트에서 전역 변수는 전역 네임 스페이스 안에 존재하기 때문입니다. 이것이 변수의 스코프 문제입니다. 이 문제를 해결하기 위해서 여러 방법 중 JavaScript 전략 패턴을 제외하고 JavaScript에서 let, const가 사용하여 변수의 범위를 해결할 수 있습니다.

1. let

블록 유효 범위를 갖는 지역변수로 선언과 동시에 초기화할 수 있습니다. { read/write )
전역 범위 선언에 사용(최상위 스코프 선언) 해도  window 객체 of global 객체에 새로운 속성을 추가하지 않습니다.
같은 변수를 같은 함수나 블록 스코프 안에서 다시 선언하려고 시도하면 SyntaxError가 발생합니다.

---

let a = 10;  // ⓐ
var b = 30;  // ⓑ
if (true) {
    let a = 20; // ⓒ
    var b = 5;  // ⓓ
    console.log("a ; " + a); // (1) 
    console.log("b ; " + b); // (2) 
}
console.log("a ; " + a); // (3) 
console.log("b ; " + b); // (4)

---

- ⓐ : 변수 a는 let으로 선언
- ⓑ : 변수 b는 var로 선언
- ⓒ : if 블록 안에 let으로 변수 a 선언 
- ⓓ : if 블럭 안에 var으로 변수 a 선언 
- (1) : 변수 a의 출력은 if 블록 안에 ⓒ에서 선언한 지역 변수 a의 값을 출력하여 a ; 20으로 출력됩니다.
- (2) : 변수 b의 출력은 if 블록 안에 ⓓ에서 선언되었지만 var이 사용되어서 ⓑ에서 선언한 변수 b의 값을 5로 변경한 것으로. (2) 결과는 b ; 5입니다.
- (3) : 변수 a를 출력하는 것인데 결과는 a ; 10입니다. if 블록 안에 선언한 동일 변수명 a는 let로 선언이 되어 있어서 if 블록 밖에서는 참조할 수 없습니다, 즉 (3)에서  변수 a는 ⓐ에서 선언 한 변수 a기 때문입니다.
- (4) : 변수 b의 출력 결과는 b ; 5입니다. (2)에서 var b로 선언한 변수 b는 ⓑ에서 선언된 변수 b를 의미하기 때문입니다.

이렇게 let로 선언한 변수는 블록 범위 내에서만 유효합니다.

---

2. const 

블록 범위의 상수를 선언합니다. 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없습니다. ( read )
변수의 값을 재 할당 할 수 없지만 참조 자료형의 각 내부 요소는 변경할 수 있다.

---

const a = 10;

if (true) {
    a = 30; // TypeError: Assignment to constant variable.
    console.log("if block a : " + a);
}
console.log("a : " + a);

---

변수 a는 const로 선언이 되어 있어서 a = 30으로 값을 재 할당 하면 TypeError: Assignment to constant variable 오류 가 발생합니다. 
만약 if 블럭 안의 변수 a가 let로 선언이 되어 있으면 오류가 나지 않고 실행됩니다. 이때 if 블록 안의 a는 if 블록 안에서만 유효한 지역 변수 a로 동작합니다.

---

const car = {
    company: "현대자동차",
    name: "소나타"
}

// TypeError: Assignment to constant variable.
car = {
    company: "기아자동차",
    name: "소렌토"
}

---

car를 객체 리터럴로 사용 후 재 할당하면 "TypeError: Assignment to constant variable"으로 오류가 나지만 각 요소의 값을 변경하면 오류가 나지 않습니다. 이것은 const도 기본 자료형은 값 변경을 하지 못 하지만 참조 자료형의 각 요소는 변경할 수 있다는 이야기입니다.

---

const car = {
    company: "현대자동차",
    name: "소나타"
}

car.company = "기아자동차";
car.name = "소렌토";

 

연관 : var, const, let 은 언제 사용하는가 ?