JavaScript var, let, const 변수

JavaScript 를 공부하다보면 어떤 변수는 var로, 어떤 것은 let으로 초기화한 것을 확인할 수 있습니다.

일단 변수를 생성하는 것에 var, let, const 같은 것들이 있는 것은 알겠지만 어떤 차이가 있는지는 헷갈립니다.

이번 포스팅에서는 각각의 키워드를 어떠한 경우에 사용해야하는지 알아보도록 하겠습니다.

 

 

 var, let, const 키워드 

해당 키워드들은 변수/상수, 선언 위치에 따라, 재선언이 가능한지에 따라 구분이 됩니다.

 

 

 

 변수와 상수 

const

변수와 상수의 차이부터 먼저 알아보도록 하겠습니다.

변수는 다들 아시다시피 데이터를 넣을 수 있는 공간이며, 데이터는 경우에 따라 변경할 수 있습니다.

var name = "허난설헌";
name = "에이다 러브레이스"; // 변경 가능
name = 123; // 변경 가능

name 에 담긴 데이터를 "허난설헌" → "에이다 러브레이스" → 123 으로 변경하였습니다.

이렇듯 변경하고 싶을 때 마다 name 변수에 담을 데이터를 변경할 수 있습니다.

 

const pi = 3.14159; 
pi = 123; // 변경 불가능

상수는 변수와 다르게 변경할 수 없습니다. 한자로 常(항상 상)을 써서 상수라고 합니다. 즉, "변하지 않는 값"을 의미합니다.

따라서 const 를 사용하여 생성한 변수는 위와 같이 값을 변경할 수 없습니다. 만약 변경을 한다면 오류가 발생하는 것을 확인할 수 있습니다.

 

const pi; // 불가능
const pi = 3.14 // 가능 (초기화)

또한 const를 사용할 때는 하나의 주의사항이 있습니다. const는 항상 초기화를 하며 사용해야합니다.

위와 같이 const pi; 로 값을 할당하지 않고 생성한다면 오류가 발생합니다. 따라서 항상 생성과 값 할당을 동시에 하도록 합시다. 여담으로 ECMAScript 6에서 부터 생긴 상수 개념은 성능 향상으로 생겨나게 되었습니다.

따라서 변하지 않는 것을 const로 선언하시면 됩니다. 그리고 만약 그 중에서 변하는 것이 있다면 let이나 var 로 변경하시면 됩니다.

 

 

 

 var와 let의 차이 

선언 위치 (Scope:유효범위)

var와 let 키워드 모두 변수를 생성하기 위해 사용하는 키워드입니다.

scope는 특정 변수를 사용할 수 있는 유효 범위를 이릅니다. 코드에서 {} 중괄호를 사용하여 묶은 범위라고 보시면 됩니다.

// 스코프 1
{
	// 스코프 2
	{
    		// 스코프 3
	}
}

위와 같은 중괄호에 유효 범위는 3개의 단락으로 나누어 집니다.

 

{
	// 스코프 1
	var name = "허난설헌";
	console.log("스코프 1: " + name);
}

{
	// 스코프 2
	console.log("스코프 2: " + name);
}

// 스코프 3
console.log("스코프 3: " +name);

스코프 1: 허난설헌
스코프 2: 허난설헌
스코프 3: 허난설헌

보통 일반적인 프로그래밍 언어에서는 특정 스코프 안에 선언한 변수는 해당 스코프 안에서만 사용할 수 있습니다.

하지만 전역 변수는 모든 스코프에서 사용할 수 있습니다.

var 키워드는 전역 변수를 생성하므로 모든 스코프 내에서 사용할 수 있습니다.

 

{
	// 스코프 1
	let age = 20;
	console.log("스코프 1: " + age);
}

{
	// 스코프 2
	console.log("스코프 2: " + age);
}

// 스코프 3
console.log("스코프 3: " + age);

스코프 1 에서는 변수가 정의되어 사용되는 것을 확인할 수 있지만, 그외의 범위에서는 not defined 오류가 발생합니다.

따라서 let 키워드를 사용할 때는 선언한 특정 범위 내에서만 사용을 해야합니다.

 

재선언

재선언이란 같은 이름으로 변수 또는 상수를 다시 선언하는 것을 이릅니다.

var 키워드는 재선언을 할 수 있지만, let 키워드는 재선언이 불가능하며 오류가 발생합니다.

var name = "허난설헌";
var name = "에이다 러브레이스"; // 가능

let age = 20;
let age = 21; // 불가능

const pi = 3.14;
const pi = 3; // 불가능

추가적으로 const 도 재선언이 불가능 합니다. var 키워드만 재선언이 가능하다고 기억하시면 됩니다.

 

하지만 ECMAScript 6 를 사용할 수 있는 환경에서는 var 키워드를 되도록이면 사용하지 않는 것을 추천한다고 합니다. 하지만 아직 많은 환경에서 var 키워드를 사용해야하고 babel 과 같은 변환 모듈을 사용한다 하더라도 문제가 있으므로 세가지 키워드 모두 사용 방법을 숙지하시고 사용하시길 바랍니다.

 

 

 

 

 

 

 

 

 

#자바스크립트 let var const

#자바스크립트 let var 차이

#자바스크립트 변수 상수

#JavaScript let var

---