변수 선언 var, let, const 차이점과 호이스팅

▤ 목차

 

 

 

✔ var, let, const 변수 선언

⌨ 형식

var a=5;
let b=10;
const c=a+b;

 

js는 변수타입을 지정해주지 않아도 값에 따라 자동으로 변수의 타입을 지정해준다.

하지만 변수에 var, let, const를 사용할 수 있다.

• 숫자, 특수문자로 시작하면 안된다.
• 클래스가 아닌 변수는 소문자를 사용한다.(관례)

 

 

💻 const 는 상수 값

const로 선언된 변수는 상수값으로 자바에서 final 키워드와 비슷하다.

변수 재선언, 변수 재할당이 모두 불가능하다.

 

 

---

 

 

 

✔ let과 var 차이 

⌨ 반복 선언

var a = '하하호호';

var a = '하하하 호호호';

 

같은 변수명에 선언했음에도 에러가 나오지 않고 각기 다른 값이 출력된다.

유연하기에 편리할 수 도 있지만, 코드량이 많아지면 어디서 사용되었는지 파악하기 힘들다.

이후, 의도치 않게 값이 바뀔 우려가 있다.

 

let a = '하하호호';

let a = '하하하 호호호';

 

Uncaught SyntaxError: Identifier 'a' has already been declared

 

let으로 선언한 변수는 이미 선언 되었다는 에러 메세지가 나온다.(const도 마찬가지)

재선언이 되지 않는다.

 

 

 

💻 let (지역 변수)과 var(전역 변수)

 

{
	var v1 = 1;
	{
		var v2 =2;
		{
			var v3 =3;
		}
	}
}
document.write("<br> ",v1, v2, v3);

 

결과는 `123`으로 잘 찍힌다.

그렇다면 let을 사용해서 선언후 불러보자.

 

{
	let w1 = 1;
	{
		let w2 =2;
		{
			 w3 =3;
		}
	}
}
document.write("<br> ",w1, w2, w3);

Uncaught ReferenceError: w1 is not defined

 

찾을 수 없다.

let은 지역변수이다. 즉, 해당 블록 안에서만 선언이 되어 사용되는 변수이다.

 

호이스팅의 개념이 등장한다.

 

👏 호이스팅

var 선언문이나 function 선언문 등 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성을 말한다.

자바 스크립트는 ES6에서 도입된 let, const를 포함한 모든 선언을 호이스팅한다.

다만, var로 선언된 변수와 달리 let으로 선언된 변수를 선언문 이전에 참조하면 참조 에러가 발생한다.

 

 

document.write("<br>kbs : ",kbs);
var kbs =9;
document.write("<br>kbs : ",kbs);

 

kbs 변수는 분명 아랫쪽에 선언되었지만 변수가 살아있었다.

마치 위쪽에서 선언된 것처럼 말이다. var로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어진다.

 

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

즉, var처럼 선두에 선언 단계를 실행하지만 변수가 초기화(메모리 공간 확보와 undefined 초기화)되지 않았다.

let은 에러가 뜨고 프로그램 종료가 된다.

 

document.write("<br>mbc : ",mbc); //프로그램 종료
let mbc =9;
document.write("<br>mbc : ",mbc);

 

Uncaught ReferenceError: Cannot access 'mbc' before initialization

 

 

 

 

---

 

 

😊정리

변수 선언시에는 기본적으로 const를 사용하고, 재할당이 필요한 경우 한정해 let을 사용하는 것이 좋다.

 

객체를 재할당하는 경우는 생각보다 흔하지 않다. const 를 사용하면 의도치 않은 재할당을 방지해 주기 때문에 보다 안전하다.

1. 재할당이 필요한 경우에 한정해 let 을 사용한다. 이때, 변수의 스코프는 작은 영역으로 만든다.
2. 재할당이 필요 없는 상수와 객체에는 const 를 사용한다.