🚀 오늘의 학습 목표
- 변수 이해
- 변수 선언 방법 알기
- var / let / const 차이점 알기
1. 변수란 ?
어떤 정보에 이름을 붙여 쓰고 싶을 때 사용하는 것을 말한다.
name="Mike";
age=30;
😵 문제점
이러한 형식으로 변수를 선언할 경우 나중에 다른 개발자가 동일명으로 변수를 선언할 경우 덮어씌워지므로 문제가 발생될 가능성이 크기 때문에, let 과 const 를 사용하여 변수를 선언한다.
✏️ 변수 선언 정리
자바스크립트에서 변수를 선언 할 때, 아래와 같이 선언한다!
-
const: 변하지 않는 값 -
let: 변할 수 있는 값
1. 변수는 문자, 숫자, $, _ 만 사용
2. 첫글자로 숫자는 불가
3. 예약어는 사용 불가
4. 가급적 상수는 대문자로 표현
5. 변수명은 일기 쉽고 이해하기 쉽게
변수 선언에는 기본적으로 const 를 사용하고, 재할당이 필요한 경우에 한정해 let 을 사용하는 것이 좋다.
const 를 사용하므로써 의도치 않은 변수 재할당을 방지할 수 있기 때문이다.
📍 심화
1-2. var / let / const 차이점
변수를 사용하려면 반드시 선언이 필요하다.
변수를 선언할 때는 var, let, const 키워드를 사용한다.
let, const 키워드는 var 키워드의 여러 단점을 보완하기 위해 ES6 에서 도입되었다.
1) var
ES6에서 let, const 키워드가 도입되기 이전지 자바스크립트에서 변수를 선언할 수 있는 유일한 키워드였다.
가장 큰 특징으로는 중복 선언이 가능하다 는 점이다.
var name = "yeon";
console.log(name); // "yeon"
var name = "uoah";
console.log(name); // "uoah"var 는 동일 변수명으로 중복하여 선언하더라도 오류가 발생하지 않고 초기화 되어 가장 마지막 값 (위의 예제에서는 "uoah") 으로 저장된다.
유연한 변수 설정이 가능하다 는 특징 이 있으나 이는 동일한 이름의 변수가 이미 선언되어 있는 것을 모르고 변수를 중보 선언하면서 값까지 할당했다면 의도치 않게 먼저 선언된 변수 값이 변경되는 부작용이 발생 한다는 점에서 단점으로 여겨진다.
이러한 단점을 보완하고자 ES6 에서 let 과 const 가 도입되었다.
var 키워드와의 차이점을 중심으로 살펴보자.
2) let 과 const
위의 코드에서 변수 선언 방식만 let 으로 바꾸어 보자.
let name = "yeon";
console.log(name); // "yeon"
let name = "uoah";
console.log(name);
// Uncaught SyntaxError: Identifier 'name' has already been declared let 키워드로 이름이 같은 변수를 중복 선언하면 문법 에러가 발생한다.
let 이나 const 키워드로 선언된 변수는 같은 스코프* 내에서 중복 선언을 허용하지 않는다. (변수 재선언 불가)
🧐 스코프* 란?
Scope는 직역하면 "범위"라는 뜻이다. JavaScript 에서 Scope(스코프)는 변수에 접근할 수 있는 범위를 말한다. 식별자(변수)를 찾기위한 규칙이라고도 한다.
* 보다 자세한 건 추후 따로 공부하여 정리 예정!
그렇다면 let 과 const 의 차이점은 무엇일까?
바로 변수 재할당 가능 여부 이다.
다시 let 의 경우를 보자.
let name = "yeon";
console.log(name); // "yeon"
let name = "uoah"; // 재선언
console.log(name);
// Uncaught SyntaxError: Identifier 'name' has already been declared
name = "haha"; // 재할당
console.log(name); // "haha"let name 으로 재선언하면 구문 오류(SyntaxError) 가 발생하지만, 재할당을 할 경우 오류 없이 값이 불러오는 것을 볼 수 있다.
다음은 const 다.
const name = "yeon";
console.log(name); // "yeon"
const name = "uoah"; //재선언
console.log(name); // Uncaught SyntaxError: Identifier 'name' has already been declared
name = "haha"; // 재할당
console.log(name); // Uncaught TypeError: Assignment to constant variable. const 는 상수* 를 선언하기 위해 사용되며, 재선언, 재할당이 모두 불가 하다.
재선언시에는 SyntaxError, 재할당시에는 TypeError가 발생한다.
🧐 상수* 란?
변수의 상대 개념인 상수는 재할당이 금지된 변수를 말한다.
const 키워드로 선언한 변수에 원시 값을 할당한 경우 변수 값을 변경할 수 없다.
원시 값은 변경 불가능한 값이므로 재할당 없이 값을 변경할 수 있는 방법이 없기 때문이다.
상수도 값을 저장하기 위한 메모리 공간이 필요하므로 변수라고 할 수 있다.
단, 변수는 언제든지 재할당을 통해 변수 값을 변경할 수 있지만 상수는 재할당이 금지 된다.* 보다 자세한 건 추후 const 부분을 공부하여 정리 예정!
✏️ var / let / const 차이점 정리
| 변수 선언 방식 | 중복 선언(재선언) | 재할당 |
|---|---|---|
| var | ✅ | ✅ |
| let | ✅ | |
| const |
🗣️ 말로 설명해 보기
var 의 가장 큰 특징은 중복 선언이 가능하다는 점입니다. 유연한 변수 선언이 가능하지만 코드량이 많을 경우 그 변수가 어떤 값으로 사용되는지를 파악하기 어렵고 개발자가 생각한 것과 다르게 먼저 선언된 변수 값이 바뀔 수 있다는 단점이 있습니다. 이러한 단점을 개선하기 위해 ES6에서 도입된 것이 let 과 const 입니다.
let 과 const 는 재선언이 불가하다는 공통점이 있지만, 재할당 가능 여부에 따라 차이가 있습니다. let 은 재할당이 가능하지만, const 는 변하지 않는 상수를 선언하기 위해 사용되어 재선언, 재할당이 모두 불가합니다.
