[JS] const, let, var 개념정리 (feat. hoisting, scope)

 

 

처음 들었던 자바스크립트 기초 강의에서는 const와 let을 사용하고, var는 의도를 알 수 없으므로 사용하지 말라고 배웠다.
근데 어떤 강의에서는 var를 많이 사용한다고도 하길래 구글링한 내용을 글로 정리해보았다.
정리하고보니 hoisting과 scope개념까지 알아야 하는 이유가 있었다.

 

 

📌 변수를 선언하기

변수(variable)는 하나의 값을 저장하기 위해 확보하는 공간이며, 그 공간을 식별하기 위해 이름을 붙이는 것이다.

• 변수에 이름을 붙여 알림 : 선언(declaration)
• 변수에 어떤 값을 저장 : 할당(assignment)
• 저장된 값을 읽어옴 : 참조(reference)

 

변수의 선언은 const let var 를 통해 할 수 있으며, ES6에서 const 와 let이 추가되었다.

 

 

📌 변수에 값을 할당하기

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

const name = 'Jessie';

• const 상수선언 : 재선언 금지, 재할당 금지
  (const로 선언된 object 내부 요소의 재할당은 가능)
• let 변수선언 : 재선언 금지, 재할당 가능
• var 변수선언 : 재선언 가능, 재할당 가능

 

var는 마음대로 재선언, 재할당이 가능하므로 중복선언 등의 오류가 생기기 쉽다.
const와 let을 활용하면 재할당이 필요한 변수와, 재할당이 필요없는 상수를 구분해서 선언할 수 있다.

 

 

📌 Hoisting 호이스팅

var로 선언된 변수의 경우 hoisting되어, 선언의 순서와 상관없이 실행된다.

var name // 결과 : undefined (값을 할당하지 않았으므로)
console.log(name) // 결과 : undefined

console.log(name) // 결과 : undefined
var name // 결과 : undefined

어디에서 선언 되었더라도, hoisting이라는 특징 때문에 동일한 결과를 얻는다.

 

하지만 변수에 값이 할당된 다음에는 다르다.

변수의 선언은 hoisting되어 실행되지만,
값의 할당은 코드가 순차적으로 실행되어 코드의 위치에 따라 다른 결과를 도출한다.

console.log(name) // 결과 : undefined
var name = 'Jessie' // 결과 : Jessie
console.log(name) // 결과 : Jessie

const와 let은 hoisting되지 않는 것 (순차적으로 실행되는 것)처럼 보이지만, 사실 그것은 아니고 TDZ(Temporal Dead Zone)의 영향을 받는것이라는데 너무 멀리가는것 같으니까 일단 여기까지만 ARABOZA.

(참고글) https://medium.com/korbit-engineering/let%EA%B3%BC-const%EB%8A%94-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85-%EB%90%A0%EA%B9%8C-72fcf2fac365

---

>> 이후에 어느정도 이해할 수 있게되어 추가 포스팅 함

2022.01.11 - [Javascript] - [JS] hoisting과 TDZ(Temporal Dead Zone)

 

 

 

📌 Scope 유효범위

scope는 유효범위를 뜻한다.
변수는 선언된 위치에 따라 유효범위가 달라진다.
전역변수는 어디서든지 참조가 가능한 값이며,
지역변수는 선언된 지역과 하위지역 scope에서만 유효하다.

자바스크립트에서는 모든 코드블록(if, for, while, try/catch, function등)이 지역 scope를 만든다.

하지만 var로 선언한 경우, function의 코드블록만을 지역 scope로 인정하는 문제가 있다.

var name = 'Jessie'

if (true) {
  var name = 'Tony'
}

console.log(name) // 결과 : Tony

 

const와 let은 중괄호 안에 있다면, 중괄호의 영역 안에서만 유효하다. (if문, for문 등의 내부)

var는 function 범위에 들어가 있지 않으면 전역으로 유효하게 되어버린다는 말이다.

따라서 어딘가에 동일한 이름을 가진 변수가 있다면 예상하지 못한 결과를 가져올 수 있는 위험이 있다.

 

기본적으로 변수의 scope는 최대한 좁게 설정하는 것이 권장된다.
따라서 var 보다는 const let을 사용하며, 변하지 않는 상수값이라면 const 사용이 안전하다.