var, let, const 정리
JavaScript에서 변수 선언을 하기 위한 3가지 방법이 있다(var, let, const)
이번 글에서는 위의 세가지들의 차이점을 정리해 보겠다.
| var | let | const | |
| 중복선언 | O | X | X |
| 재할당 | O | O | X |
| 스코프 | function-level | Block-level | Block-level |
| 호이스팅 | O | O | O |
| 전역객체 프로퍼티 | O | X | X |
중복선언
var는 중복선언이 가능하며, 마지막에 선언한 변수의 값이 할당된다.
let, const는 중복선언 시 문법에러가 발생한다.
|
1
2
3
4
5
6
7
8
9
10
11
|
//var
var v = 5;
console.log(v); //output : 5
var v = 10;
console.log(v); //output : 10
//let, const
let l = 5;
console.log(l); //output : 5
let l = 10;
console.log(l); //systax error
|
cs |
재할당
var, let은 재할당이 가능한 변수이다.
const은 값을 한번 설정하고 나면 다른 값으로 재할당할 수 없다. 재할당시 Type Error가 발생한다.
|
1
2
3
4
5
6
7
8
9
10
11
|
//var
var v= 1;
v= 10;
//let
let l = 2;
l = 20;
//const
const c = 3;
c = 30; //Uncaught TypeError : Assignment to constant variable
|
cs |
스코프
스코프란 변수가 접근할 수 있는 범위를 의미한다.
var는 함수레벨 스코프이다.
함수 내에서 선언된 var 변수는 지역변수로 취급되며, 나머지는 전역변수로 취급된다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
//var case1
function newFunction(){
var v = 5;
console.log(v);
}
newFunction(); //output : 5
console.log(); //Uncaught ReferenceError : v is not defined
//var case2
//함수레벨 스코프이기 때문에 if문안에서 선언하면 전역변수로 인식
if(true){
var v = 5;
}
v = 10;
console.log(v); //output : 10;
|
cs |
let, const는 블록레벨 스코프이다.
var와 달리 모든 코드 블록(함수, 조건문, 반복문 등)에서 선언된 변수를 지역변수로 취급한다.
|
1
2
3
4
5
6
|
//let, const는 동일하다.
{
let l = 1;
}
l = 10; // ReferenceError : l is not defined
|
cs |
호이스팅
호이스팅이란 자바스크립트 엔진이 소스코드 평가 과정에서 변수와 함수의 선언문을
최상단으로 끌어올려서 동작하는 것을 말한다.
즉. 변수의 선언과 할당이 나누어진다.
|
1
2
3
4
5
6
7
8
|
//user code
console.log(gretter);
var gretter = "say Hello";
//javascript Engine
var gretter;
console.log(gretter); //gretter is undefined
gretter = "say Hello"
|
cs |
let, const도 호이스팅이 발생한다.
그러나 var와 다르게 undefined로 초기화되지 않고 Reference Error(참조오류)가 발생한다.
이로 인해 let, const는 호이스팅이 발생 안 한다고 착각하기 쉬우나
단지 초기화를 안 했을 뿐이다.
전역객체 프로퍼티
var는 전역객체(브라우저 환경에서 window)의 프로퍼티로 할당된다.
let, const는 전역 객체의 property가 아니다.
|
1
2
3
4
5
6
7
8
9
10
11
|
//var
var a = 5;
console.log(window.a); //output : 5
console.log(a); //output : 5
//let
let l = 10;
console.log(l); //output : 10
console.log(window.l); //undefined
|
cs |
var의 문제점
var는 (중복선언 && 스코프)로 인해 문제가 발생할 수 있다.
|
1
2
3
4
5
6
7
8
|
var greeter = "hey hi"; //전역변수
var times = 4;
if (times > 3){
var greeter = "say Hello"; //if문 블록내에 존재하는 변수
}
console.log(greeter); //outter "say Hello"
|
cs |
var는 함수레벨스코프이기 때문에 if안에서 선언한 greeter는 지역변수가 아니라 전역변수로 취급된다.
만약 사용자가 이미 greeter라는 변수명을 사용하고 있다는 것을 모르고 if문 안에서 혹은
다른 블록문 안에서 선언했을 경우 예상치 못한 버그를 발생시킬 수 있다.
때문에 let과 const가 나오게 되었다.
참고자료
알아서 잘 딱 깔끔하고 센스 있게 정리하는 javascript 핵심정리
https://www.freecodecamp.org/korean/news/var-let-constyi-caijeomeun/
var, let, const 정리
JavaScript에서 변수 선언을 하기 위한 3가지 방법이 있다(var, let, const)
이번 글에서는 위의 세가지들의 차이점을 정리해 보겠다.
| var | let | const | |
| 중복선언 | O | X | X |
| 재할당 | O | O | X |
| 스코프 | function-level | Block-level | Block-level |
| 호이스팅 | O | O | O |
| 전역객체 프로퍼티 | O | X | X |
중복선언
var는 중복선언이 가능하며, 마지막에 선언한 변수의 값이 할당된다.
let, const는 중복선언 시 문법에러가 발생한다.
|
1
2
3
4
5
6
7
8
9
10
11
|
//var
var v = 5;
console.log(v); //output : 5
var v = 10;
console.log(v); //output : 10
//let, const
let l = 5;
console.log(l); //output : 5
let l = 10;
console.log(l); //systax error
|
cs |
재할당
var, let은 재할당이 가능한 변수이다.
const은 값을 한번 설정하고 나면 다른 값으로 재할당할 수 없다. 재할당시 Type Error가 발생한다.
|
1
2
3
4
5
6
7
8
9
10
11
|
//var
var v= 1;
v= 10;
//let
let l = 2;
l = 20;
//const
const c = 3;
c = 30; //Uncaught TypeError : Assignment to constant variable
|
cs |
스코프
스코프란 변수가 접근할 수 있는 범위를 의미한다.
var는 함수레벨 스코프이다.
함수 내에서 선언된 var 변수는 지역변수로 취급되며, 나머지는 전역변수로 취급된다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
//var case1
function newFunction(){
var v = 5;
console.log(v);
}
newFunction(); //output : 5
console.log(); //Uncaught ReferenceError : v is not defined
//var case2
//함수레벨 스코프이기 때문에 if문안에서 선언하면 전역변수로 인식
if(true){
var v = 5;
}
v = 10;
console.log(v); //output : 10;
|
cs |
let, const는 블록레벨 스코프이다.
var와 달리 모든 코드 블록(함수, 조건문, 반복문 등)에서 선언된 변수를 지역변수로 취급한다.
|
1
2
3
4
5
6
|
//let, const는 동일하다.
{
let l = 1;
}
l = 10; // ReferenceError : l is not defined
|
cs |
호이스팅
호이스팅이란 자바스크립트 엔진이 소스코드 평가 과정에서 변수와 함수의 선언문을
최상단으로 끌어올려서 동작하는 것을 말한다.
즉. 변수의 선언과 할당이 나누어진다.
|
1
2
3
4
5
6
7
8
|
//user code
console.log(gretter);
var gretter = "say Hello";
//javascript Engine
var gretter;
console.log(gretter); //gretter is undefined
gretter = "say Hello"
|
cs |
let, const도 호이스팅이 발생한다.
그러나 var와 다르게 undefined로 초기화되지 않고 Reference Error(참조오류)가 발생한다.
이로 인해 let, const는 호이스팅이 발생 안 한다고 착각하기 쉬우나
단지 초기화를 안 했을 뿐이다.
전역객체 프로퍼티
var는 전역객체(브라우저 환경에서 window)의 프로퍼티로 할당된다.
let, const는 전역 객체의 property가 아니다.
|
1
2
3
4
5
6
7
8
9
10
11
|
//var
var a = 5;
console.log(window.a); //output : 5
console.log(a); //output : 5
//let
let l = 10;
console.log(l); //output : 10
console.log(window.l); //undefined
|
cs |
var의 문제점
var는 (중복선언 && 스코프)로 인해 문제가 발생할 수 있다.
|
1
2
3
4
5
6
7
8
|
var greeter = "hey hi"; //전역변수
var times = 4;
if (times > 3){
var greeter = "say Hello"; //if문 블록내에 존재하는 변수
}
console.log(greeter); //outter "say Hello"
|
cs |
var는 함수레벨스코프이기 때문에 if안에서 선언한 greeter는 지역변수가 아니라 전역변수로 취급된다.
만약 사용자가 이미 greeter라는 변수명을 사용하고 있다는 것을 모르고 if문 안에서 혹은
다른 블록문 안에서 선언했을 경우 예상치 못한 버그를 발생시킬 수 있다.
때문에 let과 const가 나오게 되었다.
참고자료
알아서 잘 딱 깔끔하고 센스 있게 정리하는 javascript 핵심정리
https://www.freecodecamp.org/korean/news/var-let-constyi-caijeomeun/
