[자바스크립트 / Vanilla JS] 변수를 선언해주는 var, let, const에 대하여



다른 학습 과정을 적다가 가장 기본적인 자바스크립트의 변수에 대하여 확실히 알고 들어가야한다고 생각이 들어서

순서를 상관않고 해당 포스팅을 작성하게 되었다

본론으로 들어가기 앞서 먼저 알아야 할 내용으로는 자바스크립트에서 변수 선언은 선언 → 초기화 단계를 거친다는것을 먼저 인지해야한다

변수 선언

변수의 선언은 var, const, let 키워드로 할 수 있으며, ES6에서 const와 let이 추가되었고, 이로 인해 var의 사용빈도는 줄어들었다.

• 선언 단계: 변수명을 등록하여 변수의 존재를 알린다.
• 초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화한다.

var name
console.log(name) // undefined

var 키워드를 이용한 변수 선언은 선언 단계와 초기화 단계가 동시에 진행되어,

name에 암묵적으로 undefined를 할당해 초기화하기 때문에 console에는 undefined가 출력된다.

그리고 반대로 console을 먼저 찍어도 반환 값이 undefined로 나온다.

변수 할당

변수에 값을 할당 할 때에는 할당 연산자(=)를 사용한다.

var name // 변수 선언
name = 'JiWoo' // 값의 할당

var name = 'Jiwoo' // 변수 선언과 할당

값의 할당은 소스코드가 순차적으로 실행되는 런타임에 실행된다.

따라서 변수의 할당과 console을 실행하는 위치에 따라 반환되는 값이 다르다.

console.log(name) // undefined

var name = 'JiWoo'
console.log(name) // JiWoo

이미 선언된 변수에 새로운 값을 재할당할 수도 있다.

console.log(name) // JiWoo

name = 'KimJiWoo'
console.log(name) // KimJiWoo

재할당은 변수에 저장된 값을 다른 값으로 변경하는 것으로, 만약 변경할 수 없는 값이라면 이는 변수가 아니라 상수(constant)라 부른다.

var, let, const의 차이

앞에서 발견한 var의 문제점은 크게 세 가지가 존재한다.

• 변수 중복 선언 가능하여, 예기치 못한 값을 반환할 수 있다.
• 함수 외부에서 선언한 변수는 모두 전역 변수로 된다.
• 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환한다.

ES6에서 나온 let과 const 키워드는 위의 세 가지 문제점을 해결했다.

---

가장 큰 특징은 변수 중복 선언 불가

* let

let 키워드로는 변수 중복 선언이 불가하지만, 재할당은 가능하다.

let name = 'JiWoo'
console.log(name) // JiWoo

let name = 'KimJiWoo' // Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'KimJiWoo'
console.log(name) // KimJiWoo

* const

const가 let과 다른 점이 있다면, 반드시 선언과 초기화를 동시에 진행되어야 한다.

const name; // Uncaught SyntaxError: Missing initializer in const declaration
const name = 'KimJiWoo'

const도 let과 마찬가지로 재선언이 불가하며, 더 나아가 재할당도 불가하다.

재할당의 경우, 원시 값은 불가능하지만,

객체는 가능하다. const 키워드는 재할당을 금지할 뿐, ‘불변’을 의미하지 않는다.

// 원시값의 재할당
const name = 'JiWoo'
name = 'KimJiWoo' // Uncaught TypeError: Assignment to constant variable.

// 객체의 재할당
const name = {
  age: '27',
}
name.age = '28'

console.log(name) // { age: "28" }

 

정리

기본적으로 변수의 스코프는 최대한 좁게 만드는 것을 권장한다.

따라서, var 키워드 보다는 let과 const 키워드를 사용하며,

변경하지 않는 값(상수)이라면 let 보다는 const 키워드를 사용하는 것이 안전하다.

 

** 스코프(Scope, 유효범위)는 스코프는 참조 대상 식별자(identifier, 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름)를 찾아내기 위한 규칙이다. 자바스크립트는 이 규칙대로 식별자를 찾는다.

 

출처 : https://www.howdy-mj.me/javascript/var-let-const/