호이스팅과 var, let, const의 차이

 

 

자바스크립트 변수 할당, 참조, 선언 이해하기

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

 

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

 

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

 

1) 변수 선언 후 콘솔 찍기

var mango;
console.log(mango);	//output : undefined

2) 콘솔 찍은 후 변수 선언

console.log(mango);	//output : undefined
var mango;

 

 

호이스팅 (Hoisting)

: 변수 선언/함수 선언이 어디에 있든 상관없이 다른 코드보다 먼저 실행되는 현상

(자바스크립트의 변수 선언은 런타임에서 X, 그 이전 단계에 실행됨)

 

 

변수 할당

변수 선언과 달리 변수 할당은 소스코드가 순차적으로 실행되는 런타임에 실행됨

변수의 할당과 콘솔을 찍는 위치에 따라 반환 값이 다름

 

var mango;		//변수 선언
mango = 'mango-lingo';	//값 할당

var mango = 'mango-lingo';	//변수 선언&할당

console.log(mango);	//output : undefined

var mango='mango-lingo';
console.log(mango);	//output : mango-lingo

 

변수에 새로운 값 재할당 가능

console.log(mango);	//output : mango-lingo

mango='fruit';
console.log(mango);	//output : fruit

재할당 = 변수에 저장된 값을 다른 값으로 변경하는 것

변경할 수 없는 값 =≫ 상수 (constant)

 

 

 

var, let, set의 차이

var 키워드의 문제점

• 변수 중복 선언 가능, 예기치 못한 값 반환할 가능성 O
• 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수가 됨
• 변수 선언문 이전에 변수를 참조하면 언제나 undefined 반환

 

1. 변수 중복 선언 불가

> let

: 변수 중복 선언 X, 재할당 O

let name = 'mango';
console.log(name);	//output: mango

let name = 'lingo';	//output: Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'lingo';
console.log(name);	//output: lingo

> const

※ 반드시 선언&초기화 동시에 진행해야 함!!

const name;	// output: Uncaught SyntaxError: Missing initializer in const declaration
const name = 'mango';

중복 선언, 재할당 X

재할당 : 원시 값은 X, 객체는 O

//원시값의 재할당
const name = 'mango';
name = 'lingo';	//output: Uncaught TypeError: Assignment to constant variable.


//객체의 재할당
const name = {
    eng: 'mango'
}
name.eng = 'lingo';

console.log(name);	//output: { eng: 'lingo' }

 

2. 블록 레벨 스코프

: 모든 코드 블록에서 선언된 변수는 코드 블록 내에서만 유효, 코드 블록 외부에서는 참조 X.

  코드 블록 내부에서 선언한 변수는 지역 변수

 

let, const 키워드로 선언한 변수는 모두 코드 블록 (ex. 함수, if, for, while, try/catch ...)을 지역 스코프로 인정하는 블록 레벨 스코프를 따름

let a = 1;

if(true) {
	let a = 5;
}

console.log(a);	//output: 1

console을 찍었을 때 전역에 있는 a가 결과값으로 출력됨

if문 안에 있는 a는 지역 스코프

(const 키워드 사용했을 떄에도 let과 동일하게 동작)

 

3. 변수 호이스팅

> let

let으로 선언한 변수는 선언 단계와 초기화 단계가 분리되어 진행됨

런타임 이전에 자바스크립트 엔진에 의해 선언 단계가 먼저 실행되지만, 초기화 단계 실행되지 않았을 때 해당 변수에 접근하려고 하면 참조 에러 발생

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

let name = 'mango';

≫ 따라서 let 키워드로 선언한 변수는 스코프의 시작 지점 ~ 초기화 단계 시작 지점까지 변수를 참조할 수 없는 일시적 사각지대 (Temporal Dead Zone : TDZ) 구간에 존재

> const

const 키워드는 선언 단계와 초기화 단계가 동시에 진행됨

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

const name = 'mango';

const 키워드로 선언한 경우 선언+초기화가 동시에 이루어져야 하지만 런타임 이전에는 실행 X

초기화가 진행되지 않은 상태이기 때문에 Uncaught ReferenceError: Cannot access 'name' before initialization 발생

 

 

 

 

 

 

 

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

var, let, const의 차이 ⏤ 변수 선언 및 할당, 호이스팅, 스코프