javascript 변수 / 호이스팅 / var, let, const 차이

목차

• 자바스크립트 변수 선언/할당/참조
• 호이스팅
• var, let, const 차이

 

자바스크립트 변수

변수(variable)는 말 그대로 변하는 수, 값을 저장하기 위해 확보한 메모리 공간 또는 그 주소를 식별하기 위해 붙인 이름이다.

 

const myVar = 'hello';
// 변수명: myVar
// 메모리 주소(위치): 0x00000010
// 변수 값: hello

 

✏ 변수의 선언(declaration)

변수를 사용하기 위해 자바스크립트 엔진(자바스크립트 코드를 해석하는 도구)에 이름이 '변수명'인 메모리 공간을 마련하도록 하는 것을 변수를 선언한다고 한다. 변수의 선언과 동시에 값을 할당하는 것을 초기화한다고 표현한다.

 

var 변수의 경우 따로 초기화하지 않으면 undefined를 할당해 초기화한다.

반면 let, const 변수는 초기화되지 않은 상태로 메모리에 저장되어 참조할 경우 에러가 발생한다.

 

var myVar;
console.log(myVar);	// undefined

const yourVal;
console.log(yourVal);	// Uncaught SyntaxError: Missing initializer in const declaration

 

✏ 변수의 할당(assignment)

할당 연산자(=)를 사용하여 변수에 값을 저장하는 것을 할당한다고 표현한다.

변수에 저장된 값을 다른 값으로 변경하는 것을 재할당한다고 표현한다.

선언은 런타임 이전에 실행되고 할당은 소스코드를 순차적으로 읽으며 런타임에 실행된다. (선언과 할당을 하나의 구문으로 표현하더라도)

 

✏ 변수의 참조(reference)

변수에 저장된 값을 읽는 것을 변수를 참조한다고 표현한다.

 

호이스팅(hoisting)

var 변수 선언과 함수 선언이 해당 스코프 내 최상단에 있는 것 같은 현상을 호이스팅이라고 한다.

// 변수 선언 전
console.log(myVar);	// undefined

// 변수 선언 후
var myVar;
console.log(myVar);	// undefined

 

예시를 보면 변수를 선언하기 전에도 undefined로 할당되어 있다.

자바스크립트는 코드를 실행하기 전 Parser 내부적으로 모든 선언을 모아 최상단에 저장하고 기억하고 있다가 실행시킨다. 따라서 코드 실행 전 이미 선언들을 모두 저장했기 때문에 선언 전 참조를 하더라도 오류 없이 동작한다.

 

func1();	// hello
func2();	// Uncaught TypeError: func2 is not a function

// 함수 선언문
function func1() { 
	console.log("hello");
}

// 함수 표현식
var func2 = function() {
	console.log("bye");
}

func2();	// 코드 실행 순서 상 초기화 후에 위치하므로 bye 출력

 

같은 맥락에서 함수 선언과 함수 표현식을 변수에 저장하는 것은 차이가 있다.

func1은 JS Parser 내부 호이스팅이 발생해 선언 전에 호출하더라도 오류가 발생하지 않는다.

func2는 익명함수를 변수에 초기화하는 코드 이전에 호출할 경우 오류가 발생한다.

 

코드의 가독성과 유지보수를 위해 되도록 호이스팅이 일어나지 않도록 해야 하는데, 함수나 변수를 가급적 코드 상단부에 선언하고 var 변수 대신 const나 let 변수를 사용하는 것이 좋다.

 

var, let, const 차이

const와 let은 ES6에서 추가되었다.

	var	let	const
중복 선언	가능	불가능	불가능
재할당	가능	가능	불가능
스코프 유효범위	함수 레벨 스코프	블록 레벨 스코프	블록 레벨 스코프
호이스팅	발생 (선언하고 undefined로 초기화)	발생 (선언만 하고 순차적으로 코드 실행 과정에서 초기화)	발생 (선언만 하고 순차적으로 코드 실행 과정에서 초기화)
전역객체 프로퍼티 여부	O	X	X

값을 재할당하는 경우에는 let, 아닌 경우에는 const를 사용하는 것이 좋다.

 

 

✏ var 변수

// 1. 중복선언
var test1 = 1;
console.log(test1);	// 1
var test1 = 2;	// 마지막에 할당된 값 
console.log(test1);	// 2
var test1;	// 선언만 한 경우 선언문 자체가 무시됨
console.log(test1);	// 2


// 2. 재할당
var test2 = 1;
test2 = 100;	// 값 변경 가능(재할당)
console.log(test2);	// 100


// 3. 스코프 유효범
// 함수 밖에서 참조 불가
function test3() {
	var x1 = 100;
  console.log(x1);
}
test3();	// 100
// console.log(x1);	// Uncaught ReferenceError: x1 is not defined

// 블록 밖에서 참조 가능
if (true) {
	var x2 = 200;
}
console.log(x2);	// 200


// 4. 호이스팅
for (var i=0; i < 10; i++) {
  // console.log('i: ' + i)
}
console.log('after i: ' + i) // after i: 10


// 5. 전역객체 프로퍼티 여부(브라우저 환경)
var test5 = 5;
console.log(window.test5);	// 5

 

✏ let 변수

// 1. 중복선언
let test1 = 1;
// let test1 = 2;	// Uncaught SyntaxError: Identifier 'test1' has already been declared

// 2. 재할당
let test2 = 1;
test2 = 100;	// 값 변경 가능(재할당)
console.log(test2);	// 100


// 3. 스코프 유효범
// 함수 밖에서 참조 불가
function test3() {
	let x1 = 100;
  console.log(x1);
}
test3();	// 100
// console.log(x1);	// Uncaught ReferenceError: x1 is not defined

// 블록 밖에서 참조 불가
if (true) {
	let x2 = 200;
}
// console.log(x2);	// Uncaught ReferenceError: x2 is not defined


// 4. 호이스팅
for (let i=0; i < 10; i++) {
  console.log('i: ' + i)
}
// console.log('after i: ' + i) // Uncaught ReferenceError: i is not defined


// 5. 전역객체 프로퍼티 여부(브라우저 환경)
let test5 = 5;	// 전역객체 프로퍼티가 아님
console.log(window.test5);	// undefined

 

✏ const 변수

// 1. 중복선언
const test1 = 1;
// const test1 = 2;	// Uncaught SyntaxError: Identifier 'test1' has already been declared

// 2. 재할당
const test2 = 1;
// test2 = 100;	// Uncaught TypeError: Assignment to constant variable.
console.log(test2);	// 1


// 3. 스코프 유효범
// 함수 밖에서 참조 불가
function test3() {
	const x1 = 100;
  console.log(x1);
}
test3();	// 100
// console.log(x1);	// Uncaught ReferenceError: x1 is not defined

// 블록 밖에서 참조 불가
if (true) {
	const x2 = 200;
}
// console.log(x2);	// Uncaught ReferenceError: x2 is not defined


// 4. 호이스팅
// 호이스팅이 발생하지만 변수가 선언은 되었고 초기화가 안되어있음
// console.log(test4); // Cannot access 'test4' before initialization
const test4 = 10;


// 5. 전역객체 프로퍼티 여부(브라우저 환경)
const test5 = 5;	// 전역객체 프로퍼티가 아님
console.log(window.test5);	// undefined

 

참고자료 및 출처 🙇‍♂️

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

https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html

https://curryyou.tistory.com/192