#01. [JS] 변수(Variable)와 호이스팅(Hoisting)

 JavaScript의 첫 번째 시간으로는 가장 중요한 '변수(Variable)'과 '호이스팅(Hoisting)'의 개념에 대해 알아보겠습니다.

 

변수(Variable)

---

변수 : 하나의 값(data)을 저장할 수 있는 저장공간(memory).

 

 프로그래밍에서 '변수'는 데이터를 저장할 수 있는 메모리 공간을 의미하고, 변수의 값은 변경될 수 있습니다.

자바스크립트에서 변수의 종류는 크게 두 가지로 나뉘는데요,

 

• 원시형 변수(Primitive Variable) : 실제값(value)을 저장하는 변수, 데이터 자체를 변수에 저장.
• 참조형 변수(Reference Variable) : 객체의 주소(reference)를 저장하는 변수, 데이터는 다른 곳에 저장 후 변수에는 주소만 할당.

 

변수 타입	종류	예시 or 설명
원시형	number	1, 2, 3
	string	hwonda
	boolean	true or false
	symbol	변경 불가한 값(프로퍼티)
	undefined	정의되지 않음 or 의도치 않게 비어있음
참조형	null	의도적으로 비어있음
	array	[]
	object	{}
	function	function <함수명>(매개변수){}

 

typeof로 데이터의 타입을 확인할 수 있습니다. 아래 예시를 보겠습니다.

 

 

 하지만 typeof에는 한계가 있습니다. 노란색 박스와 같이 null, {}, [] 을 모두 객체(object)로 보기 때문이죠.

이를 위해 function getType을 만들어줍니다. return 값에 대해서는 아직 정확하게 알 필요가 없습니다. 함수를 통해 Null, {}, [] 각각 어떤 타입인지 반환할 수 있습니다.

 

변수 선언

---

 자바스크립트 변수를 선언하는 방법은 총 3가지가 있습니다. ES6이 나오기 전, JS의 변수 선언방식은 var만 존재했습니다.

하지만 var는 변수명으로 이미 선언된 이름과 같은 이름을 사용하는 경우 에러가 나오지 않는 치명적인 문제가 있었습니다.

그래서 ES6 이후, var 방식을 보완한 const와 let 방식이 나왔죠.

 

const와 let의 차이로 '재할당'이 가능한가?의 문제가 있습니다.

const는 재할당이 가능하지 않으므로, 의도치 않은 재할당을 방지할 수 있겠습니다.

반면 let은 재할당이 필요한 경우 사용하는 것이 좋겠습니다. 

 

특징	var	const	let
선언 전 사용시 ERROR	X	O	O
이미 선언된 이름과 같은 이름 사용시 ERROR	X	O	O
초기값 줘야 함	X	O	X
다시 할당할 수 있음(재할당)	O	X	O

 다음은 위 내용을 참고하여 실수할 수 있는 부분에 대해 직접 알아보겠습니다. (chrome 의 console 창 활용)

실수한 경우의 ERROR message의 타입을 기억해 놓는 것은, 추후 코딩할 때 내가 어디서 어떻게 틀렸는 지 알 수 있는 경로가 되므로 에러 메세지를 잘 기억해 놓는 것이 좋겠습니다.

 

 

1. var는 선언 전 사용시, undefined 에러가 뜹니다.

2. const는 초기값을 주지 않으면 missing initializer in const declaration 에러가 뜹니다.

3. let은 이미 변수명 'a'에 대해 var로 선언되었기 때문에, 이미 선언된 변수명을 다시 사용하면 에러가 뜹니다.

 

 

한 가지 덧붙이자면, const와 let은 var와 다르게 '블록' 단위로 할당되기 때문에, 하나의 블록(if문, for문 등등)에서 같은 변수명을 사용하면 에러가 뜹니다. var는 재밌게도 에러가 뜨지 않습니다.

 

 

변수 호이스팅 (Hoisting)

---

 

호이스팅 : 함수가 실행되기 전에, 안에 있는 변수들을 범위의 최상단으로 끌어올리는 것.

 

ES6는 let, const를 포함한 모든 선언(function, class, 특히 var도)을 호이스팅 합니다. 모든 선언들을 해당 스코프의 가장 윗쪽으로 올려버리고 읽어내는 것이죠. (진짜 코드를 올려버리는 것이 아니라, Parser에서 마치 올린 것처럼 읽어내는 것)

 

name(myName);

function name(myName){
    console.log("my name is " + myName);
}

var myName = "hwonda";

// 결과

my name is hwonda

 

이렇게 함수 선언 전에 함수를 호출하고, 변수 선언 전에 변수를 호출해도 문제 없이 원하는 결과가 나옵니다. 이렇게 기존 var는 어디서 선언하든 에러가 뜨지 않았지만, let은 다른 언어와 같이 변수 선언을 먼저 해야 변수 호출이 가능합니다.

1. let : 선언과 초기화가 분리되어 진행됨. 초기화 단계 없이 선언하면 해당 변수 참조 에러가 뜸. ( Uncaught ReferenceError: Name is not defined)
2. const : 선언과 초기화가 동시에 진행됨. 동시에 선언과 초기화가 동시에 진행되어야 하지만, 따로 진행하는 경우 같이 진행하라는 에러가 뜸. (Cannot access 'name' before initialization)