스프린터스 #1 var, let, const, Hoisting

취업할때까지 달리기!

• 4월 18일(월)
  1. var, let, const 차이를 설명
  2. 이벤트 버블링과 캡처링에 대해 설명
  3. Promise를 사용한 비동기 통신과 async, await 를 사용한 비동기 통신의 차이를 설명
  4. 호이스팅에 대해서 설명
  5. virtual DOM에 대해 설명
  6. 클래스형과 함수형 컴포넌트의 차이점

1. 내 답변

   https://www.howdy-mj.me/javascript/var-let-const/

var, let, const

var = 재선언, 재할당 가능
let = 재선언 x, 재할당 가능
const = 재선언 x, 재할당 x

자바스크립트에서 var로 변수 선언이 가능했는데, 왜 const와 let이 나왔으며 이 둘의 사용을 권장할까?

이를 정확하게 알기 위해서는, 변수의 선언 및 할당 과정, 호이스팅, 스코프를 알아야 합니다.

변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름

변수의 구성요소 : 변수명, 값, 메모리주소

변수는 값이 아닌 메모리 주소를 기억하고 있습니다. 변수명을 사용하면, 자바스크립트 엔진이 변수명과 매핑된 메모리 주소를 통해 거기에 저장된 값을 반환합니다.

할당 : 변수에 값을 저장하는 것
참조 : 변수에 저장된 값을 읽어 들이는 것
선언 : 변수명을 자바스크립트 엔진에 알리는 것

할당과 선언의 차이를 기억하세요!

자바스크립트에서 변수 선언이 이루어지는 방식

자바스크립트에서 변수 선언은 선언 → 초기화 단계를 거쳐 수행됩니다.

1. 선언 단계: 변수명을 등록하여 자바스크립트 엔진에 변수의 존재를 알린다.
2. 초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화한다.

이 때 var를 사용해서 선언한다면 선언 단계와 초기화 단계가 동시에 진행되어, 변수명에 암묵적으로 undefined를 할당해 초기화합니다.

그런데 런을 돌려서 콘솔을 찍어보면 변수가 선언되기 전에도 오류가 나지 않고 undefined가 뜨는 것을 볼 수 있습니다.

이는 자바스크립트 문법의 특성인 호이스팅 때문입니다.

호이스팅

자바스크립트 엔진은 소스코드를 한 줄씩 순차적으로 실행하기에 앞서(=런타임에 앞서), 변수 선언을 포함한 모든 선언문(ex. 변수 선언문, 함수 선언문 등)을 찾아내 끌어올려서 먼저 실행합니다. 즉, 변수 선언이 어디에 있든 상관없이 다른 코드보다 먼저 실행이 보장된다는 것인데요.

여기서 발생하는 문제는 선언과 할당이 동시에 이루어지지 않는다는 겁니다.

변수 선언과 할당은 할당연산자(=)를 통해 하나의 문(statement)으로 단축 표현할 수 있지만, 두 개의 실행 시점이 다른 현상이 발생합니다.

변수 선언은 호이스팅되어 런타임 이전에 실행되지만, 값의 할당은 소스코드가 순차적으로 실행되는 런타임 때 실행되어 버립니다.

따라서 console을 실행하는 위치에 따라 반환되는 값이 달라져 버리는 것입니다.

호이스팅의 대상
1. 변수선언문들 (var, let, const)
2. 함수선언문 (function a() {})

호이스팅의 대상이 아닌 것
1. 함수표현식(const a = function() {})
2. 화살표함수(const a = () => {})
함수선언문은 선언 앞 뒤 어디에서든 호출할 수 있지만 이 두 개는 변수 호이스팅으로 취급되기 때문에 선언 + 초기화가 끝난 코드 아래에서만 호출 가능합니다.

함수 선언문의 경우 런타임 이전에 자바스크립트 엔진에서 먼저 실행되어 함수 호이스팅이지만, 함수 표현식과 화살표함수의 경우 런타임 이전에 해당 값을 undefined로 초기화만 시키고, 런타임에서 해당 함수들이 할당되어 그때 객체가 됩니다.

다시 var로 돌아가서 스코프

스코프(scope) : 식별자(ex. 변수명, 함수명, 클래스명 등)의 유효범위를 뜻하며, 선언된 위치에 따라 유효 범위가 달라집니다. 전역에 선언된 변수는 전역 스코프를, 지역에 선언된 변수는 지역 스코프를 갖습니다.

전역 변수는 어디에서든지 참조가 가능한 값이고 지역 변수는 자신의 지역 스코프와 그 하위 지역 스코프에서 유효한 값입니다.

자바스크립트에서는 모든 코드 블록(if, for, while, try/catch)들이 스스로 블록 레벨 스코프를 생성하는데 이때 var 키워드로 선언된 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정하여 실행됩니다.

쉽게 말해, 블록 레벨 스코프 중 함수 레벨 스코프만을 인식하여 동작합니다.

그래서 만약 if문 안에 var를 선언하더라도 함수가 아닌 곳에서 var 키워드를 이용해 선언한 것이기 때문에 전역 변수로 취급되어 버립니다. 게다가 재선언이 가능하기 때문에 기존에 있던 a 변수가 중복 선언되면서 출력 값이 바뀌어버리는 위험성이 있습니다.

var a = 1

if (true) {
  var a = 5
}

console.log(a) // output: 5

var 대신 let, const 쓰기 : 결론

해당 예제는 코드가 짧아서 어디에서 문제가 일어난지 바로 알 수 있지만, 실무에서는 그렇지 않을 것입니다. 전역 변수로 인해 재할당이 발생하거나, 전역 스코프를 공유하기 때문에 어딘가에 동일한 이름이 있다면 예상치 못한 결과를 가져올 수 있는 위험이 있습니다.

따라서 오로지 함수 코드 블록만을 지역 스코프로 인정하는 var 대신, 블록 레벨 스코프를 지원하는 const와 let을 사용하는 것을 권장하고 있습니다.

var와 let / const 의 차이점 요약

앞에서 발견한 var 키워드의 문제점은 크게 세 가지로 볼수 있는데,

1. 변수의 중복 선언이 가능하여, 예기치 못한 값을 반환할 수 있다.
2. 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수로 된다.
3. 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환한다.(호이스팅 문제)

ES6에서 나온 let과 const 키워드가 어떻게 var의 문제들을 해결한 것일까요.

1. 변수의 중복 선언 문제
   둘다 재선언을 막았습니다. 재할당은 const만 막혀있지만 사실 const도 원시값만 재할당이 안되는거고 객체의 경우 재할당이 가능합니다.

2. 함수 레벨 스코프 문제
   둘다 블록 레벨 스코프를 지원합니다.

3. 호이스팅 문제

• let

let 키워드로 선언한 변수는 선언 단계와 초기화 단계가 분리되어 있습니다. 즉, 런타임 이전에 자바스크립트 엔진에 의해(= 호이스팅에 의해) 선언 단계가 먼저 실행되지만, 초기화 단계가 실행되지 않았을 때 해당 변수에 접근하려고 하면 참조 에러가 뜹니다.

console.log(name) // output: Uncaught ReferenceError: name is not defined

let name = 'a'

존재는 하지만 접근할 수 없는 이러한 상태를 일시적 사각지대(Temporal Dead Zone: TDZ) 라고 하는데, 스코프의 시작 시점부터 초기화 단계 시작 시점까지는 변수를 참조할 수 없습니다.

• const

const 키워드는 선언 단계와 초기화 단계가 동시에 진행됩니다.

console.log(name) // output: Uncaught ReferenceError: Cannot access 'name' before initialization

const name = 'a'

let 키워드로 선언한 경우, 런타임 이전에 선언이 되어 자바스크립트 엔진에 이미 존재하지만 초기화가 되지 않았기 때문에 name is not defined라는 문구가 뜹니다. 하지만 const 키워드로 선언한 경우, 런타임 이전에는 선언을 할 수 없고!

따라서 선언이 진행되지 않은 상태이기 때문에 not defined가 아닌 Cannot access 'name' before initialization 에러 문구가 뜨게 됩니다.

호이스팅, let const에서 되는거야 안되는거야

여기에서 재미있는 점은, 어떤 사람들은 오류를 뿜어내는 이 상태가 호이스팅이 실행되지 않은 상태이기 때문에 let과 const는 호이스팅이 불가능하다 라고 표현하고,

어떤 사람들은 호이스팅은 '탐지'해서 '끌어올리는 것'이고 그 기능이 실행되었지만 필요한 조각이 모자라서 오류가 나는 것 뿐이므로 호이스팅 자체는 되고 있는 것이라고 표현하기도 합니다.

호이스팅을 현상으로 볼 것이냐 기능으로 볼 것이냐라는 관점의 차이라고 할 수 있겠습니다.