[JavaScript] 자바스크립트 변수(var, let, const)

※ 본 포스팅은 패스트 캠퍼스 강의를 정리한 내용입니다.

 

---

 

목차

 

var, let, const란?

var 특징

let 특징

const 특징

var를 사용하면 안 되는 이유

 

---

 

<정리>

	var	let	const
중복선언	가능	금지	금지
재할당	가능	가능	금지
스코프	함수 레벨 스코프	블록 레벨 스코프	블록 레벨 스코프
선언/ 초기화 단계	선언단계 + 초기화 단계	선언단계	선언단계

 

var, let, const 마다 호이스팅이 다르다. 

호이스팅과 스코프에 대한 설명은 아래 게시글을 참고하자!

 

https://devyihyun.tistory.com/131

[JavaScript] 자바스크립트 Scope와 hoisting

 

 

스코프 (scope) : 현재 실행되는 컨텍스트, 참조할 식별자를 찾는 범위를 말한다.

식별자를 찾을 때 자바스크립트에서 확인하는 범위이다.

상위 스코프는 하위 스코프에 접근할 수 있지만 그 반대는 불가능하다.

자바스크립트에는 대표적으로 global, local, block 스코프가 있다.

 

 

---

[ var, let, const란? ]

var, let, const는 자바스크립트에서 변수를 선언하는 데 사용된다.

변수 선언을 통해 메모리 공간을 확보하고 해당 공간의 주소를 연결하여 값을 저장할 수 있다.

• 할당 : 변수에 값을 저장하는 것
• 참조 : 변수에 저장된 값을 읽는 것

 

2009년 ES5에 var 가 등장하였다. 그렇게 2015년 전까지는 var를 사용하였다.

ES5 var 등장

 

 

 

2015년 ES6에서 let과 const가 등장하였다. let과 const의 등장으로 var는 사용률이 낮아졌다.

ES6 let, const 등장

 

사용률이 낮아진 이유에는 var의 단점이 있었고, let과 const가 그것을 보완해 var보다 let과 const를 사용하게 되었다.

 

 

 

---

[var 특징]

소규모 앱을 개발할 때는 편리하다.

let과의 차이점 : 같은 이름으로 여러 번 선언이 가능하다.

과거에는 많이 사용하였지만 지금은 사용을 많이 하지 않는 변수이다.

<특징>

1. 중복 선언 허용
2. 함수 레벨 스코프
3. 변수 호이스팅

<중복 선언 허용>

var x = 1;
var y = 1;

var x = "값";
var y;

console.log(x); // 값
console.log(y); // 1

 

개발자 A가 x=1, y=1이라고 변수를 선언하였다.

그 후에 개발자 B가 변수 x="값", y를 선언하였다.

개발자 A는 x, y값이 1이라 생각하고 x, y값을 사용하면 예상하지 못한 결과 값이 나타난다.

var를 잘못 사용하면 중복선언 허용 때문에 예상하지 못한 잘못된 결괏값이 나타난다.

 

<함수 레벨 스코프>

var x = 1;
if(true){
  var x = 100;
}
console.log(x); // 100

var x = 100은 if문 블록에서만 존재할꺼라 생각하고 1이 출력된다고 예상하겠지만 그렇지 않다.

x는 100이 출력된다.

다른 블록에서 var로 선언하면 중복 선언이 된다.

함수의 코드 블록이 아닌 다른 블록(if문, for문 등)에서 var로 변수를 선언하면 전역 변수가 된다.

var는 함수 레벨 스코프를 가진다는 점에서 의도치 않게 전역 변수를 중복해서 선언할 가능성이 높다.

 

<호이스팅>

https://devyihyun.tistory.com/131

[JavaScript] 자바스크립트 Scope와 hoisting

 

---

[let 특징]

1. 변수 중복 선언 금지
2. 블록 레벨 스코프
3. 변수 호이스팅

 

<변수 중복 선언 금지>

let fruit="사과";

변수 fruit을 선언하였다.

 

let fruit="사과";
let fruit="바나나";

위 코드를 실행하면 SyntaxError가 난다.

 

var의 경우 이름이 동일한 변수를 중복 선언 하면 어떠한 에러가 발생하지 않았다.

하지만 let으로 선언한 변수와 동일한 이름으로 let 변수를 선언한다면 문법 에러가 발생한다.

 

 

<블록 레벨 스코프>

function foo(){
	let a ='local';
	if(true){
		let a = 'block';
		console.log(a);
	}
	console.log(a);
}

let a = 'global';
foo();

console.log(a);

/*
block
local
global
*/

이 코드를 실행하면 if문 안에 있는 console.log가 먼저 출력된다.

이때 출력되는 변수 a는 if문 블록 안에 있기 때문에 콘솔 창에 block이 찍힌다.

 

같은 a를 출력하고 있지만 a는 함수 스코프 안의 변수이기 때문에 콘솔창에는 local이 출력된다.

 

 

똑같은 변수 a를 출력하지만 이 a는 전역 스코프 안에 번역 변수 a을 가리키고 있기 때문에 콘솔에는 global이 출력된다.

 

이렇게 자바스크립트에는 대표적으로 global, local, block 스코프가 있다.

자바스크립트에서는 다른 언어들과 다르게 ES5까지는 전역 스코프와 함수 스코프만 사용 가능 했는데 ES6에서 let과 const가 도입되면서 블록 스코프도 가능하게 되었다.

 

<호이스팅>

https://devyihyun.tistory.com/131

[JavaScript] 자바스크립트 Scope와 hoisting

 

 

---

[const 특징]

상수를 선언할 때 사용한다.

상수 : 한번 값을 설정하고 나면 변경이 불가능하다. 값이 고정적이다.

let의 성질을 모두 가지고 있다.

1. 선언과 초기화
2. 재할당 금지
3. 상수 선언

 

<선언과 초기화>

let과 var에서는 변수를 다음과 같이 선언하였다.

아무런 에러가 나타나지 않는다.

var x = 1;
var y;
let a = 1;
let b;

 

하지만 const에서는 불가능하다.

const title;변수를 선언하면 const에 값이 없다는 문법 에러가 나타난다.

그러므로 변수 name과 같이 선언과 동시에 초기화가 필수이다.

const는 상수를 선언하는 목적으로 만들어졌기 때문에 당연한 결과이다.

const name = "이름";
const title;

 

<재할당 금지>

let은 재선언만 금지되었지만 const는 재할당  마저 금지되어 있다.

재할당을 하면 타입에러가 뜬다.

const a = 100;
a = 10;

let과 다르게 타입에러가 뜨는 이유는 상수 선언과 관련 있다.

<자바스크립트 상수>

• 대입 연산자로 재할당 불가능
• 재선언 불가능
• 초기값 필요
• 같은 스코프 내의 변수 및 함수와 동일한 이름 사용 불가능(즉, 자신이 속한 스코프 내에서 변수명이 유일해야 한다.)
• 상수로 할당된 객체 속성은 보호되지 않는다.

 

const로 변수를 선언하게 되면 상수의 특징을 갖게 되어 유지보수 측면에서 좋다.

단, 원시값은 내부적으로 어떠한 방법으로도 불가능 하지만 

상수타입으로 객체를 선언하면 속성을 변경할 수 있다.

물론 새로운 객체를 다시 할당하는 것을 불가능하다.

const PI = 3.14; // 원시 값은 변경 불가능
const B = {//객체 내부는 변경 가능
	b:123
}
B.b=999;
console.log(B)//{b:999}

 

const로 변수를 선언하면 let과 달리 다른 사용자에게 '이건 변하지 않는 값이다!'라는 것을 미리 알려줄 수 있다.

 

<호이스팅>

https://devyihyun.tistory.com/131

[JavaScript] 자바스크립트 Scope와 hoisting

 

 

 

---

[ var를 사용하면 안 되는 이유 ]

1. 변수 이름이 중복되는 것을 방지할 수 있다.
2. 변수 값이 할당되기 전 사용할 때의 혼란을 줄여준다.
3. 변수 간의 접근을 제한하여 차이를 명확히 한다.

 

 

https://devyihyun.tistory.com/131

[JavaScript] 자바스크립트 Scope와 hoisting

 

https://devyihyun.tistory.com/206

[JavaScript]var과 let간의 차이가 발생하는 이유

 

 

 

 

 

 

 

---

잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!😊

댓글과 좋아요는 큰 힘이 됩니다!

 

[ 참고자료 ]

 

 

https://www.youtube.com/watch?v=ZU4MXkwDb9g