#back_to_basic
다시 처음부터!라는 마음으로 공부해보자! 아자아자!
ES6에서는 새로운 기능들이 많이 등장하였는데, 그 중 하나가 변수 선언에 사용할 수 있는 let과 const의 추가였다.
그렇다면 var, let, const 이들 사이의 차이점은 무엇일까!
1. Var
ES6의 등장 이전에는 문제점들이 있음에도 불구하고, var로 변수를 선언하였다.
1) Scope of var
scope는 기본적으로 변수를 사용할 수 있는 위치를 의미한다.
var 선언은 전역 범위 혹은 함수 범위로 지정되는데,
즉, 함수 외부에서 선언될 때의 범위는 전역, 함수 블록 내부에서 선언되는 경우엔 함수 내에서만 사용하고 접근할 수 있다.
위 예시에서는 greeter는 전역에서 사용 가능하고, hello는 함수 내부에서만 사용 가능하다.
2) var 변수는 업데이트와 재선언 될 수 있다
같은 스코프라면 재선언이 가능하며 업데이트도 된다.
3) var의 호이스팅
호이스팅이란 변수와 함수 선언이 맨 위로 이동되는 자바스크립트의 개념이다.
var 변수는 범위 내에서 맨 위로 올려지고, undefined(정의되지 않음)으로 초기화된다.
4) var의 문제점
이미 정의되어있다는 사실을 인식하지 못한 경우에, 변수를 재정의하거나 업데이트한다면 뜻밖의 출력결과를 초래할 수 있다.
그래서 let과 const가 등장하게 되었다.
2. Let
var 선언에 대한 개선을 반영한 let이 현재 변수 선언에서 선호되고 있다.
1) 블록 범위 let
여기서 말하는 블록은 {}으로 바인딩 된 코드범위인데, 하나의 블록은 중괄호 속에서 존재한다.
let으로 선언된 변수는 해당 블록 내에서만 사용가능하다.
중괄호로 감싸진 hello가 정의된 블럭의 외부에서 hello를 출력했더니 에러가 반환된다.
2) let은 업데이트는 가능하지만, 재선언은 불가능하다
var와 마찬가지로 let으로 선언된 변수는 해당 범위 내에서 업데이트는 될 수 있다.
하지만, var와 달리 let 변수는 범위 내에서 다시 선언할 수 없다.
하지만 범위 밖에서는 재정의될 수 있다.
오류가 없는 이유는, 두 greeting이 서로 다른 범위를 가져서 다른 변수로 취급되기 떄문이다.
let을 사용하는 경우라면, 변수가 범위 내에서만 존재하기 떄문에 이전에 이미 사용한 적이 있는 변수 명에서 대해서더 이상 신경쓰지 않아도 좋고, 또한 범위 내에서 동일한 변수를 두번 이상 선언할 수 없기 때문에 앞서 설명한 var의 문제가 발생하지 않는다.
3) let의 호이스팅
var와 마찬가지로 let 선언은 맨 위로 끌어올려진다.
undefined으로 초기화되는 var와 다르게 let의 키워드는 초기화되지 않는다.
3. Const
const로 선언된 변수는 일정한 상수값을 유지한다.
const 선언은 let 선언과 몇가지 비슷한 부분이 있다.
1) 블록 범위 const
let과 똑같이 const도 선언된 블록 범위 내에서만 접근 가능하다.
2) const는 업데이트도 안되고, 재선언도 불가능하다
const로 선언된 변수의 값이 해당 범위 내에서 동일하게 유지됨을 의미한다.
업데이트하거나 재선언할 수 없어서, 모든 const 선언은 선언하는 당시에 초기화되어야한다.
개체의 경우는 다소 다른 점이 있는데, const 개체는 업데이트할 수 없지만, 개체의 속성은 업데이트할 수 있다.
react state를 생각하면 쉽겠다.
3) const의 호이스팅
let과 마찬가지로, const 선언도 맨 위로 끌어올려지지만, 초기화되지는 않는다.
❓❓ 호이스팅의 이유
참고로 호이스팅은 ES6+의 let과 const 변수에서는 할 수 없고, 오직 var 변수에서만 호이스팅이 일어난다.
호이스팅이 발생하는 이유는 다음과 같다.
- 자바스크립트 엔진은 함수선언문 해석 => 변수 초기화 => 코드 실행 순서로 진행(스코프에 미리 초기화하여 넣어둔다)
- 코드를 실행할 땐 이미 함수 선언문과 변수가 생성되어있는 상태
- 어디에서든 함수나 변수를 호출할 수 있다
자바스크립트 엔진은 코드를 맨 위에서부터 읽어내려오리 전에 이미 실행 컨텍스트에 식별자들을 넣어두었기 때문에 함수나 변수들을 찾을 수 있는 것이다.
변수는 초기화되는 시점에 비록 값은 undefined이지만, 식별자를 해결할 수 있도록 변수를 초기화 해 둔 상태이기때문에,
코드 실행 시점에 해당 변수를 어디에서 호출하든 에러 없이 호출 가능하다.
4. 요약
- var
- 함수 내에서는 함수 내에서만 사용 가능하고, 함수 밖에서는 전역 범위
- 업데이트와 재선언 둘 다 가능
- 호이스팅되며, undefined로 초기화
- let
- {} 블럭 범위 안에서만 유효함
- 같은 범위라면 업데이트는 되지만 재선언은 불가함
- 범위가 다르면 다른 변수로 취급됨
- 호이스팅되며, 초기화는 되지 않음
- const
- let과 똑같이 범위 내에서만 유효함
- 업데이트도 안되고, 재선언도 안됨
- 객체는 속성의 값에 한해서만 가능함
- 선언되는 당시에 초기화되어야함
- 호이스팅되며, 초기화는 되지 않음
[References]
화이팅이다!
[다음 공부할 것]
'Web' 카테고리의 다른 글
| [BB] 브라우저의 렌더링과 Virtual DOM (1) | 2023.10.25 |
|---|---|
| [BB] Javascript: 비동기 프로그래밍 (0) | 2023.10.25 |
| [BB] Javascript: 실행 컨텍스트와 스코프 (0) | 2023.10.24 |
| [BB] Javascript의 기본 자료형 (0) | 2023.10.24 |
| [BB] CSS와 곁들여 보는 DOM (0) | 2023.10.24 |
