VAR 키워드로 선언한 변수의 문제점
이전에 학습했던 전역 변수의 문제점 에서 정리했던 내용을 한번 더 학습하고, var 변수의 문제점을 정리하고 let,const 키워드를 사용하는 변수에 대해서 알아보자
변수 중복 선언 허용
var x= 1;
var x= 100;
console.log(x); // 100var 키워드로 선언한 변수는 중복 선언이 가능하다. 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작하고, 초기화문이 없는 변수 선언은 무시된다. 이 때 에러는 발생하지 않는다
함수 레벨 스코프
var 키워드로 선언한 변수는 오로지 함수 코드 블록만을 지역 스코프로 인정한다. 함수 내부가 아닌, 코드 블록 내에서 var 키워드로 변수를 선언해도 모두 전역변수이다.
변수 호이스팅
var 키워드로 선언한 변수는 변수 호이스팅에 의해 스코프의 선두로 끌어 올려진 것처럼 동작한다. var 키워드로 선언한 변수는 선언문 이전에 참조할 수 있다. 단 할당문 이전에 참조하면 undefined를 반환한다.
자바스크립트 엔진에 의해 실행단계 이전 생성단계(평가과정)에서 var변수를 등록하고 undefined를 할당한다.
let 키워드
ES6에서 var 키워드의 단점을 보완하기 위해 새로운 변수 선언 키워드인 let과 const를 도입했다.
변수 중복 선언 금지
var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다. (var 키워드가 없는 것처럼 동작한다.)
하지만 let 키워드로 이름이 같은 변수를 중복 선언하면 문법 에러(Syntax Error)가 발생한다.
var foo = 123;
var foo = 456; //foo=456
let bar = 123;
let bar = 456; // syntax error블록 레벨 스코프
VAR 키워드로 선언한 변수 - 함수 레벨 스코프 (함수 안에서만 지역 스코프로 인정해!!)
let 키워드로 선언한 변수는 모든 코드 블록(함수,if문,for문,while문,try/catch문 등)을 지역 스코프로 인정하는 블록 레벨 스코프를 따른다.
변수 호이스팅
let 키워드로 선언한 변수는 호이스팅이 동작하지 않는 것처럼 동작한다. 하지만 그렇지 않다!!
let 키워드로 선언한 변수는 "선언 단계"와 "초기화 단계"가 분리되어 진행된다. 즉, 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 선언 단계가 먼저 실행되지만 초기화 단계는 변수 선언문에 도달했을 때 실행 된다.
일시적 사각지대 : 초기화 단계 이전에 변수에 접근하려고 하면 참조 에러가 발생한다. let 키워드로 선언한 변수는 스코프의 시작 지점부터 초기화 단계 시작 지점(변수 선언문)까지 변수를 참조할 수 없다. 스코프 시작 지점부터 초기화 단계 시작 지점까지 변수를 참조할 수 없는 구간을 일시적 사각지대라고 한다.
console.log(foo) // 참조 에러 , 일시적 사각지대에서는 변수를 참조할 수 없다.
let foo; //변수 선언문에서 초기화 단계 실행
console.log(foo) // undefined;
foo = 1; // 할당문에서 할당 단계 실행
console.log(foo) // 1
전역 객체와 let
var 키워드로 선언한 전역 변수와 전역 함수, 선언하지 않은 변수에 값을 할당한 암묵적 전역은 전역 객체 window의 프로퍼티가 된다.
let 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 아니다! window. 으로 접근 불가능,
let 전역 변수는 보이지 않는 개념적인 블록 전역 렉시컬 환경 내에 존재한다.
const 키워드
상수를 선언하기 위해 사용하는 키워드, 특징은 let 키워드와 대부분 동일하다.
let 키워드와 다른점
- const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화해야 한다.
- const 키워드로 선언한 변수는 재할당이 금지된다.
변수의 반대 개념인 상수는 재할당이 금지된 변수를 말한다. const 키워드 변수에 객체를 할당한 경우 값을 변경할 수 있다. 즉 const 키워드는 재할당을 금지할 뿐 "불변"을 의미하지 않는다.
