0%

let과 const 블록 레벨스코프

1. var키워드로 선언한 변수의 문제점

1.1.변수 중복 선언이 가능

-변수의 중복 선언이 가능하고,이때문에 의도치 않은 값의 변경이 일어나는 부작용이 발생한다.

1.2, 함수레벨 스코프

var키워드로 선언한 변수는 오로지 함수의 코드블록만을 지역스코프로 인정한다. 따라서 외부에서 선언한 변수는 모두 전역변수가 된다. 함수레벨 스코프는 전역변수를 남발할 가능성이 높다. 이로인해 의도치 않은 전역변수가 중복되는 경우가 발생한다.

1.3. 변수의 호이스팅

변수ㅣ 호이스팅에 의해 선언문이 스코프를 선두로 끌어 올려진것 처럼 동작한다. 즉 변수 호이스팅에 의해 var키워드로 선언한 변수는 변수 선언문 이전에 참조할 수있다. 단 할당문 이전에 변수를 참조하면 언제나 undefined를 반환한다. 변수호이스팅은 가독성을 떨어뜨리고 오류를 발생시킬 수있는 여지를 만든다.


2.let키워드

let은 키워드는 var키워드와 동일하게 변수를 선언할때 사용한다. var키워드와의 차이점은

2.1. 변수의 중복선언 금지

var 키워드로 선언한 변수를 중복선언하면 에러가 발생하지 않고 덮어씌어진다. 하지만 let키워드로 동일한 이름을 갖는 변수를 중복선언하면 문법에러가 발생한다.
let이나 const 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용하지 않는다.

2.2. 블록 레벨 스코프

var키워드롤 선언한 변수는 오로지 함수의코드블록을 지역변수로 인정하는 함수레벨 스코프를 따랐다. 하지만 let 키워드로 선언한 변수는 모든 코드블록에(if/for/while/try/catch)을 지역 스코프로 인정하는 블록레벨 스코프를 따른다.

함수도 코드블록이므로 스코프를 만든다. 이때 함수 내의 코드 블록은 함수레벨 스코프에 중첩된다.

2.3. 변수의 호이스팅

var키워드와는 달리 let키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는것 처럼 동작한다.
var 키워드를 사용해 선언한 변수는 런타임 이전에 자바스크립트 엔진에 의해서 암묵적으로 선언단계와 초기화 단계를 한번에 진행한다.
그러나 let 키워드를 사용해 선언한 변수는 자바스크립트엔진이 선언단계와 초기화 단계가 분리되어 실행된다. 즉 런타임 이전에 자바스크립트 엔진에 의해서 암묵적으로 선언단계가 실행되지만 초기화단계는 변수선언문에 도달했을때 실행된다.
스코프의 시작지점부터 초기화 시작 지점까지의 구간을 일시적 사각사각지대라고 한다.
자바스크립트에 도입된 모든 선언들은 호이스팅한다.(var.let,const,function,class)

2.4. 전역객체와 let

전역객체는 어떤 객체보다도 먼저 생성되어 어떤객체에도 속하지 않은 최상위 객체이다. 일반적으로 브라우저 환경에서는 window객체,node.js환경에서는 global객체를 의미한다.
var키워드로 선언한 전역변수와 선언하지 않은 변수에 전역값을 할당하는 암묵적 번역변수 그리고 전역함수는 정겨 객체릐 프로퍼티가 된다. 전역깩체의 프로퍼티를 참조할때 window응 생략 할 수있따.

let키워드로 선언한 전역변수는 전역객체 window의 프로퍼티가 아니다. 즉window.foo와 같이 접근 할 수없다.let전역변수는 보이지 않는 개념적인 블록내에 존재 하게 된다.


3. const키워드

const키워드는 상수(변하지 않는 고정된 값)를 선언하기 위해 사용한다. 하지만 반드시 상수 만을 위해 사용하지 않는다.

3.1 선언과 초기화

let키워들 선언한 변수는 재할당이 자유로우나 const 키워드로 선언한 변수는 재할다잉 금지된다. const키워드로 선언한 변수는 값을 변경,재할당 할 수 없으므로 처음 할당한 갓을 그대로 유지한다. 따라서 변하지 않는 고정된 값,상수를 할당하기 위해사용한다.

cost키워드로 선언한 변수는 반드시 선언과 동시에 할당이 이루어져야한다.그렇지 않으면 문법적인 에러가 발생한다.

const키워드로 let키워드와ㅏ 마찬가지로 블록 레벨 스코프를 가진다.

3.2. 상수

상수는 가독성과 유지보수의 편의를 위해 적극적으로 사용해야한다.

상수를 값으로 갖는 변수는 일반적으로 변수이름을 대문자로 선언하고 상수가 저장되어있음을 명확하게 나타낸다. 여러 단어로 이루어진 경우 _로 구분을 하는 것이 일반적이다.

3.3. const키워드와 객체

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

const키워드로 선언한 변수에 깩체를 할당하는 경우, 원시값을 할당한 경우와 마찬가지로 재할당이 금지된다. 그러나 객체는 변경가능한 값이다.따라서 const 키워드로 선언된 변수에 할당된 객체는 변경이 가능하다.

const키워드는 재할당을 금지할뿐 불변을 의미하지 않는다. 새로운 객체를 재할당하는 것은 불가능하지만 객체의 내용을 변경하는 것은 가능하다.객체의 내용이 변경되더라도 변수에 할당된 주소값은 변경되지않는다.


4. var 대 let 대 const

변수 선언에는 기본적으로 const를 사용하고 let은 재할당이 필요한 경우에 한정해서 사용하는 것이 좋다. 원시값의 경우,가급적 상수를 사용하는 것이 좋다. 그리고 객체를 재할당하는 경우는 생각보다 흔하지않다. const 키워드를 사용하면 의도치 않은 재할당을 방지해주기때문이다.

es6에서는 var을 사용하지않는다.
재할당이 필요한경우에는 한정해 letd을 사용한다. 이때 변수의 스코프는 최대한 좁게 만든다.
변경이 발생하지않는(재할당이 필요없는 상수)원시값과 객체에는 const키워드를 사용한다. const키워드는 재할당을 금지하므로 var,let보다 안전하다.

변수를 선언하는 시점에는 재할다잉 필요할지 잘 모르는 경우가 많다. 그리고 객체는 의외로 재할당하는 경우가 드물다. 따라서 변수를 선언할때 일단 const 키워드로 사용하도록하자 .반드시 재할당이 필요하다면 그때 const를 let으로 변경하면 된다.