[JavaScript] 변수 var, let, const / 호이스팅(hoisting)

1. var

한 번 선언된 변수를 다시 선언할 수 있다.

var name = 'Mike';
console.log(name); // Mike

var name = 'Jane';
console.log(name); // Jane

name이 두번 선언되었어도 문제되지 않는다.

 

let 변수의 생성과정

1. 선언

2. 초기화(undefined를 할당해주는 단계) 단계

3. 할당 단계

 

2. let 

* var와 let은 크게 다르지 않다. 대부분의 경우 둘을 바꿔 사용해도 문제되지 않는다.

 

let 변수는 선언하기 전에 사용할 수 있다.

console.log(name); // undefiend

var name = 'Mike';

.var name이 나오기 전에 name을 사용했지만 에러를 일으키지 않는다.

왜냐하면 아래의 코드와 같이 동작하기 때문이다.

 

var name;

console.log(name); // undefined

var name = 'Mike';

코드가 실제로 이동하지는 않지만

var로 선언한 변수는 최상위로 끌어올려진 것처럼 동작한다. 이를 호이스팅(hoisting)이라고 한다.

 

호이스팅(hoisting) : 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것 처럼 행동

 

하지만 console은 undefined를 출력한다. 

선언은 호이스팅되지만, 할당은 호이스팅되지 않기 때문이다.

즉, name이란 변수만 올려진 것이고, Mike란 값은 그자리에 있는 것이다.

 

var 변수의 생성과정

1. 선언 및 초기화(undefined를 할당해주는 단계) 단계

2. 할당 단계

 

 

3. const

const 변수의 생성과정

1. 선언+ 초기화 + 할당

 

let name;
name = 'Mike';

var age;
age = 30;

const gender;
gernder = 'male'; //Error발생

선언과 할당을 동시에 하지 않았기 때문에 const부분에서 Error가 발생한다.

 

 

var : 함수 스코프 - 함수 내에서 선언된 변수만 그 지역변수가 된다.

let, const : 블록 스코프 - 모든 코든 블록(함수, if문, for문, while문, try/catch문 등) 내에서 선언된 변수(지역변수)는

코드 블록 내에서만 유효하며, 외부에서 접근할 수 없다. 

const age = 30;

if(age > 19) {
	var txt = '성인';
}

console.log(txt); // '성인'

if문 안에서 선언된 var변수는 if문 밖에서도 사용할 수 있다.

하지만 let, const는 중괄호{} 내에서만 사용할 수 있다.

*var변수도 함수 내에서 선언되면 함수 내에서만 사용이 가능하고 함수 밖에서는 사용할 수 없다.

function add(num1, num2) {
	var result = num1 + num2;
}

add(2, 3);

console.log(result); // Error

 

참고 및 출처 : 유투브 코딩앙마 https://youtu.be/4_WLS9Lj6n4