Var는 사용하면 안되나Var...
글을 시작하며..
만약 김치와 콩나물이 있다고 생각해봅시다.
두 가지 반찬을 한 통에 넣는다면 두 반찬은 섞여 구분하기 어렵게 됩니다.
그럼, 김치와 콩나물을 구분하기 위해서는 어떻게 하면 좋을까요?
맞습니다. 하나의 반찬 통을 새롭게 마련하여 두 가지 반찬을 따로 담으면 되겠죠?
이렇게하면 내용물이 섞이지 않아 김치와 콩나물을 구분할 수 있고,
내가 두 반찬을 먹고 싶을 때 꺼내서 먹을 수 있게 됩니다.
이처럼 각 내용물을 저장하기 위해서는 각자의 공간을 만들어야 하는데요.
이것은 프로그래밍에서도 마찬가지랍니다.
그래서 저는 JS에서 Let과 Const라는 키워드를 사용하여 반찬과 같은 내용물을 저장할 공간을 만드는 방법과,
제목에서 보신 것과 같이 Var라는 키워드를 사용하지 않는 이유에 대해 글을 써보려고 합니다.
( 맨 마지막에 요약있습니다. )
1. 변수를 저장할 수 있는 공간 - Let
여러분은 변수가 무엇인지 아시나요?
변수란 간단하게 말해서 변할 수 있는 값을 저장하는 공간입니다.
JS에서는 변수를 선언하기 위해 Let이라는 키워드를 사용합니다.
let age;
age = 17;
우선 let이라는 키워드를 사용하여 변수를 선언해줍니다.
(여기에서 age는 변수의 이름 정도로 생각하시면 됩니다.)
변수 선언 후에는 변수에 값을 할당해 줍니다.
값을 변경하고 싶은 경우에도 2번째 줄과 같이 작성하여 변경할 수 있습니다.
또 이 두 줄을 한 번에 작성할 수도 있는데요.
let age = 17;
이처럼 변수 선언과 동시에 값을 할당할 수 있답니다.
2. 상수를 저장할 수 있는 공간 - Const
변수를 알아보았으니 다음으로는 상수에 대해 알아보겠습니다.
상수란 변할 수 없는 값을 저장하는 공간입니다.
JS에서는 상수를 선언하기 위해 Const이라는 키워드를 사용합니다.
const name = '주여진';
변수는 선언과 할당을 같이 해도, 따로 해도 문제가 되지 않았지만
상수는 반드시 선언과 동시에 할당을 해주어야 합니다.
그래서 만약 값을 재할당 하려고 한다면 오류가 발생하게 됩니다.
대부분 JS코드를 작성할 때는 기본적으로 const 키워드를 사용하고
특별하게 값이 변경되어야 하는 공간을 만들어야 할 때 let 키워드로 변경하기 때문에
const라는 키워드를 꼭 알아두셔야 합니다.
3. Var를 사용하지 않는 이유
Var는 지역 변수, 그러니까 해당 범위 안에서 변할 수 있는 값을 저장하는 공간입니다.
1. 의도하지 않은 타입 추론
var는 변수 선언시 타입을 생략하고 컴파일러가 타입을 추론하는 특징을 가지고 있습니다.
만약 추론이 불가능하다면 컴파일 오류가 발생하게 됩니다.
이 특징은 var의 장점이지만 단점이 될 수도 있습니다.
추론하는 것은 컴파일의 시점이기 때문에 의도한 타입이 아닌
다른 타입으로 추론될 수도 있다는 문제점을 가지고 있습니다.
2. 변수의 재선언
또 var로 선언된 변수는 값 재할당이 가능하고, 같은 이름으로 선언하는 것이 가능합니다.
이는 코드의 가독성을 떨어뜨리고, 작성자가 의도하지 않은 오류를 일으킬 수 있다는 문제점을 가지고 있습니다.
3. 블록 외부에서의 접근
let과 const는 블록 스코프를 가지지만, var는 함수 스코프를 가집니다.
이는 함수의 경우에 변수를 따로 구분하지만,
if나 for같은 블록의 경우에는 외부에서도 접근이 가능하다는 문제점을 가지고 있습니다.
let age = 17;
const name = '주여진';
if(true) {
let age = 15;
const name = '홍길동';
}
console.log(age); // 17
console.log(name); // 주여진>> 전역변수인 age,name과 블록 안에 있는 변수 age,name을 구분하여 실행
var age = 17;
var name = '주여진';
if(true) {
var age = 15;
var name = '홍길동';
}
console.log(age); // 15
console.log(name); // 홍길동>> 전역변수인 age,name과 블록 안에 있는 변수 age,name을 구분하지 않고 실행
4. 해석 단계에서의 'undefined' 값으로 초기화
JS코드는 위에서 아래로 실행 됩니다.
이때 변수를 선언하기 전에 변수를 출력한다면 어떻게 될까요?
let 또는 const로 선언된 변수는 참조 오류(ReferenceError)가 발생합니다.
console.log(age); // undefined
var age = 17;하지만 var로 선언된 변수는 의도하지 않은 'undefined' 값을 얻을 수 있습니다.
왜 이런 결과가 나오는 걸까요?
바로 JS코드를 해석하는 단계에서 자바스크립트 엔진이 코드 전체를 살피며
선언된 변수나 함수 등을 메모리에 저장해두기 때문인데요.
이때 let이나 const로 선언된 변수를 초기화하지 않은 상태로 메모리에 저장하고
var로 선언된 변수는 'undefined' 값으로 초기화하기 때문입니다.
이처럼 코드를 실행하기 전에 변수나 함수를 맨 위로 끌어올리는 것처럼 보이는 현상을 '호이스팅'이라고 합니다.
글을 마치며..
오늘은 이렇게 Let, Const, Var 세 가지 키워드에 대해 글을 적어보았습니다.
우리 모두 더 좋은 코드를 작성하기 위해 어떤 키워드를 사용해야하는지 알고 멋찐✨ 개발자가 됩시다.
글 읽어주셔서 감사합니다.
요약
1. 변할 수 있는 값을 저장할 변수를 선언 할 때 >> Let키워드
2. 변할 수 없는 값을 저장할 상수를 선언 할 때 >> Const키워드
3. Var를 사용하지 않는 이유
- 의도하지 않은 타입 추론
- 변수의 재선언
- 블록 외부에서의 접근
- 해석 단계에서의 'undefinad' 값으로 초기화