[Deepdive] 15장 let , const 키워드와 블록레벨 스코프

var 변수의 문제점

변수 중복 선언 허용

var 키워드로 선언한 변수는 중복 선언이 가능하다

var x = 1;
var y = 1;
// 같은 스코프 내에 중복 선언을 허용한다.
// 초기화문이 있는 변수선언문은 var 키워드가 없는 것처럼 동작한다.

var x = 100;
// 초기화 문이 없는 변수 선언문은 무시된다.
var y;
console.log(x); // 100
console.log(y); //1

함수 레벨 스코프

var 키워드로 선언한 변수는 함수의 코드 블록만을 지역스코프로 인정하는데

외부에서 var 키워드로 선언한 변수는 코드 블록 내에서 선언해도 모두 전역 변수처리가 된다.

var x = 1;
if (true) {
// x는 전역 변수이다. 이미선언된 x 가 있으므로 중복선언된다.
    var x = 10;
}
console.log(x); // 10

var i = 10;
// for 문에서 선언한 i 는 전역변수이다. 이미선언한 변수가있으므로 중복선언된다.
for (var i = 0; i < 5; i++) {
    console.loe(i);
}
console.log(i); // 5

변수 호이스팅

var 키워드로 변수를 선언하면 변수 호이스팅이 발생되는데 변수 선언문 이전에 참조할수있다 다만 할당이전이라면 undefined 를 반환한다.

console.log(foo); // undefined
foo = 123; // 변수 에 값 할당
console.log(foo); // 123
var foo; // 변수 선언은 런타임이전에 자바스크립트엔진에의해 암묵적으로 실행된다.

let 키워드

ES6 이후로 var 키워드의 단점을 보안하기위해 만들어졌다.

변수 중복 선언 금지

var 키워드와 다른점으로는 var 는 변수 중복 선언이 가능하지만 let 키워드는 중복선언이 불가능하다.

중복선언시 문법 에러가 발생한다 ( systaxError )

블록 레벨 스코프

let 키워드는 모드 코드 블록 ( 함수 , if , for , while , try/catch 등 ) 을 지역 스코프로 인정하는 블록 레벨 스코프를 가지고있다.

변수 호이스팅

var 키워드는 런타임 이전에 자바스크립트 엔진에서 암묵적으로 선언과 초기화 단계가 한번에 진행되는데

let 키워드로 선언한 변수는 선언단계와 초기화 단계가 분리되서 진행된다.

런타임 이전에 자바스크립트 엔진으로 인해 암묵적으로 선언단계가 먼저 실행되긴 하나 , 초기화 단계는 변수 선언문에 도달했을때 실행이된다. 초기화 단계 이전에 참조하려하면 참조에러 ( ReferenceError ) 가 발생한다. let 키워드 선언단계 부터 초기화 단계 전까지 변수를 참조할수없는 구간을 를 일시적 사각지대 라고 한다.

결국 var 와 let 모두 변수 호이스팅이 발생하지만 var 는 선언과 초기화 단계가 같이 진행되고

let 은 선언만된상태에서 변수선언문에 코드진행순서가 오면 그때 초기화 진행을 하는 차이점이있어

변수 호이스팅이 발생 하지않는 것처럼 동작하게된다.

전역 객체와 let

var 키워드로 선언한 전역변수와 , 함수 들은 모두 전역객체 window의 프로퍼티가 된다.

var x = 1;
y = 2;
function foo() { }

console.log(window.x); // 1
console.log(window.y); // 2
console.log(window.foo); // foo() {}
console.log(x); // 1
console.log(y); // 2
console.log(foo); // foo() {}

// 전역변수로 선언한 let 은 전역객체의 프로퍼티가 아니다
let x = 1;
console.log(window.x); // undefined
console.log(x); // 1

다만 let 키워드로 선언한 전역 변수는 전역객체의 프로퍼티가 아니기때문에 window. 으로 접근이 불가능하다. let 의 전역 변수는 보이지 않는 개념적인 블록 내에서 존재하기때문이다

const 키워드

const 키워드는 상수를 선언하기위해서 사용한다.

선언과 초기화

const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화 해야한다.

const 키워드로 선언한 변수는 let 키워드로 선언한 변수와 마찬가지로 블록레벨스코프를 가지며 변수 호이스팅이 발생하지 않는 것 처럼 동작한다.

재할당 금지

상수 이기때문에 var 와 let 과 같이 재할당이 금지되있다. ( typeError )

상수

const 키워드로 선언된 변수에 원시 값을 할당할 경우 원시 값은 변경할수없는 값 이고 const 키워드에 의해 재할당이 금지되므로 할당된 값을 변경할수있는 방법은 없다.

일반적으로 상수의 이름은 대문자로 선언해 상수임을 명확히 표현하고 여러단어일 경우는 _ 를 사용해서 구분하는게 일반적이다.

const 키워드와 객체

const 키워드로 선언된 변수에 원시값은 변경불가능하지만 const 키워드로 선언된 변수에 객체 값은 변경이 가능하다.

const 의 키워드는 재할당을 금지할뿐 “ 불변 “ 을 의미하지는 않는다.

변수 선언에는 기본적으로 const 를 사용하고 let 은 재할당이 필요한 경우 한정에서 사용하는것이좋다.

ES6 이후로는 var 는 사용하지않는다