[스터디 with 실전 리액트 프로그래밍] 5편 - const, let, var

실전 리액트 프로그래밍

바쁘다는 핑계로 공부를 미루다 보니, 1장이 생각보다 늦게 끝났다...

1장에선 리액트의 기초 개념이 나왔다면, 2장에선 자바스크립트의 심화를 다룬다.

리액트가 자바스크립트 라이브러리인 만큼, 리액트 개발하는데 있어 자바스크립트의 이해는 필수적이다.

그러니 자바스크립트도 열심히 공부하자.

 

 

변수 정의 방법

자바스크립트에선 변수를 정의하는 방법이 var, const, let 세가지가 있다.

이 중 const, let은 ES6에서 새로 추가되었고,

ES5까지 자바스크립트에서는 var만 이용해 변수를 정의했다.

 

 

var 특징 1 - 함수 스코프

var은 함수 스코프를 가진다.

var의 함수 스코프

사진처럼 변수가 정의된 함수 밖에서 변수에 접근하면 참조에러가 뜬다.

 

var은 함수 스코프이기 때문에 아래의 사진처럼 반복문에서 정의된 변수가 밖에서도 접근 가능하다.

for문에서 var

반복문 뿐만 아니라 if문 등 함수 내부에서 var로 정의된 변수는 위처럼 접근 가능하다

 

 

var 특징 2 - 호이스팅

var로 정의된 변수는 그 변수가 속한 스코프의 최상단으로 끌어올려지는데 이를 호이스팅(hoisting)이라고 한다.

아래의 코드를 실행시키면 어떻게 될까?

console.log(v)
var v = 1

 

변수를 정의하기 전에 출력을 하려 했으니 참조 오류가 발생할 것 같지만 실제로 코드를 실행시키면 undefined가 출력된다.

var의 호이스팅

이는 변수 v가 호이스팅이 되었기 때문이다.

즉 변수가 최상단으로 끌어올려져 먼저 undefined로 정의되고, 코드가 실행되는 것이다.

 

따라서 실제론 아래처럼 실행되는 것이다.

실제 순서

 

아래의 코드도 호이스팅의 결과이다.

var의 호이스팅 2

 

이 외에 var은 재정의, 재할당이 가능하다는 특징이 있다.

이런 var의 특징들은 코드 복잡도를 높일 가능성이 컸고, 그런 와중에 const와 let이 등장했다.

 

 

const, let 특징 1 - 블록 스코프

const, let은 var과 달리 블록 스코프다.

블록 스코프이므로 반복문이나 if문에서 정의한 변수는 밖에서 접근 불가능하다.

 

블록 스코프는 함수 스코프보다 직관적이며 편리하다.

함수 스코프는 블록에서 정의한 변수를 블록 밖에서도 접근할 수 있기 때문에 계속 신경 써서 관리를 해야하기 때문이다.

for문에서 let

if문에서 const

 

 

const, let 특징 2 - 호이스팅, 임시적 사각지대

위에 호이스팅 예시 코드에서 var을 const로 바꾸고 실행시키니 아래처럼 에러가 발생했다.

const 호이스팅

그러면 const, let으로 정의한 변수는 호이스팅이 되지 않는 걸까?

 

정확히 말하면 const, let도 호이스팅이 된다.

const와 let도 var처럼 스코프안에서 정의된 변수를 최상단에 끌어올리는 호이스팅이 일어나지만,

var과 다르게 호이스팅된 위치와 변수가 정의된 위치 사이에서 변수를 접근하면 에러가 발생한다.

이 구간을 임시적 사각지대(temporal dead zone)라고 한다.

 

세개의 코드를 비교해보자.

임시적 사각지대

만약 호이스팅이 발생하지 않았다면 두번째 코드도 첫번째처럼 1이 출력되었어야 한다.

하지만 블록안에서 const v = 2로 정의한 변수가 호이스팅되었고, 변수를 정의하기 전에 임시적 사각지대에서 console.log로 접근하니 에러가 발생했다.

세번째 사진처럼 var은 임시적 사각지대가 없고 에러 없이 undefined가 출력된다.

 

const와 let은 이렇게 임시적 사각지대를 통해 코드를 직관적이게 만들어준다.

 

 

const, let 특징 3 - 재정의, 재할당

const, let은 var과 달리 재정의가 불가하다.

그리고 let은 재할당이 가능하지만 const는 재할당도 불가하다.

(const 의미 자체가 상수를 의미하는 constant의 줄임말이다!)

 

정리해보면

var: 재정의O 재할당O

let: 재정의X 재할당O

const: 재정의X 재할당X

 

따라서 재할당이 돼선 안되는 변수는 const의 사용을,

재할당이 일어나는 변수는 var보다 let의 사용을 지향해야 한다.

 

 

더 공부할 만한 것들

ECMA, ES6

자바스크림트 엔진의 작동 원리(호이스팅이 왜 일어나는가)