[리액트를 위한 javascript] var vs let vs const

** 리액트를 다루는 기술 서적에서 모르는 내용을 정리하기 위해 작성함.

 

1. 변수의 생성 var, let, const

  - var : ES6 이전까지 사용, 함수단위 사용범위(Scope)

     > 함수단위 스코프를 가진다는 것은 함수(function) 내에서 변수가 공유됨.
     > ES6문법을 쓰면서 var를 사용할 일은 없음.

// 함수 시작!
function vartest(){
	var a = "out!";
    
	if(true) {
		// 코드 블록(if문) 안에서 a를 다시 선언해도
		var a = "in!";
		console.log(a);	// 출력 : in!
	}
    
	console.log(a);		// 출력 : in! ->코드블록(if문) 밖에서 a 변수가 변경되었음
}
// 함수 끝!

  - let, const : ES6 이후 사용, 블록단위 사용범위(Scope)

     > 블록단위 스코프를 가진다는 것은 변수가 해당 코드블록(if문, for문 등) 안에서만 유지됨.

function letTest() {
	let a = "out!";
	
	// 코드블록(if문) 
	if(true) {
		let a = "in!"; // 블록 안에서 변수 a를 선언!
		console.log(a); // 출력 : in!
	}
	console.log(a);  // 출력 : out! -> 블록 내부에서 선언한 변수가 외부의 변수와 관련없음.
}

function constTest() {
	const a = "out!";
	
	// 코드블록(if문) 
	if(true) {
		const a = "in!";
		console.log(a);	// 출력 : in!
	}
	console.log(a);	// 출력 : out! -> 블록 내부에서 선언한 변수가 외부의 변수와 관련없음.
}

 

2. let, const의 차이

  - let은 동적인 값을 담을 수 있는 변수를 선언 할 때 사용.

  - const는 한번 지정하고 나면 변경이 불가능한 상수를 선언 할 때 사용.

  - 일반적으로 const를 사용하고 값이 변경될 필요가 있을때 let 사용!

// let과 const는 아래와 같이 같은 블록 내에서 중복 선언이 불가능 하다.
let a = 1;
let a = 2;
// 또는
let a = 1;
const a = 2;
// 또는
const a = 1;
let a = 2;

// const는 아래와 같이 한번 초기화 하면 값을 변경할 수 없다.
const init = "초기화";
init = "변경"; // error!!