변수

변수 : 프로그램 실행 도중 임의의 값을 저장해 두고 읽을 수 있는 공간을 뜻합니다.

---

선언 : 컴퓨터에게 변수를 사용할 것이라고 선언(알려주는) 역할을 합니다.
초기화 : 선언한 변수에 처음으로 값을 저장하는 과정입니다.
할당 : 초기화된 변수에 값을 할당합니다.

1. 중복 선언

1-1. var (중복 선언 가능)

var color = 'red'
console.log(color) // red

var color = 'blue'
console.log(color) // blue

var color
console.log(color) // blue

var로 선언한 변수는 값을 중복해서 선언이 가능합니다.

만약 변수를 선언만 하고 값을 할당하지 않는다면 마지막에 선언된 변수의 할당한 값으로 지정되기 때문에 나중에 코드가 길어지면 어디서 어떻게 사용되는지 파악하기 어렵다는 단점이 있습니다.

1-2 const , let (중복 선언 불가능)

let a = 10
let a = 20
console.log(a) //Uncaught SyntaxError: Identifier 'a' has already been declared

const b = 20
const b = 40
console.log(b) //Uncaught SyntaxError: Identifier 'b' has already been declared

이미 선언한 변수를 다시 선언할 경우, 에러가 발생합니다.

위의 var에 비해서 코드의 안정성을 높여줍니다.

2. 재할당

2-1. var , let (재할당 가능)

var color = 'red'
color = 'yellow'
console.log(color) //yellow

let color = 'blue'
color = 'purple'
console.log(color) //purple

var 와 let 은 항상 변할 수 있는 변수로 반복해서 다른 값을 재할당 할 수 있습니다.

2-2. const (재할당 불가능)

const color = 'red'
color = 'yellow'
console.log(color) //Uncaught TypeError: Assignment to constant variable.

const는 항상 변하지 않는 상수로 값을 할당하면 재할당이 불가능합니다.

3. 스코프 (scope)

3-1. var (function-level scope)

function color() {
  var a = 'blue'
  console.log(a)
}

color() //blue

console.log(a) //Uncaught ReferenceError: a is not defined

var 은 함수 내부에 선언된 변수만 지역변수로 한정하며 나머지는 모두 전역변수로 결정됩니다.

위의 코드에서 color 함수 내부에 참조된 a 변수가 작동이 되지만 외부에서 참조하면 에러가 발생합니다.

if (true) {
  var color = 'blue'
  console.log(color) //blue
}

console.log(color) //blue

함수를 제외한 변수는 전역변수로 결정되면서 외부에서 참조해도 값이 정상적으로 나오는 것을 알 수 있습니다.

3-2 const , let (block-level scope)

function color() {
  let a = 'blue'
  console.log(a)
}

color() //blue

console.log(a) //Uncaught ReferenceError: a is not defined

if (true) {
  let color = 'blue'
  console.log(color) //blue
}

console.log(color) //Uncaught ReferenceError: color is not defined

const , let 은 함수 또는 if문 등 코드블럭{ }에서 선언된 변수도 지역변수로 취급되어 외부에서 참조를 할 수 없게 됩니다.

4. 호이스팅

호이스팅(Hoisting)이란, var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성을 말합니다.

자바스크립트는 ES6에서 도입된 let, const를 포함하여 모든 선언(var, let, const, function, function*, class)을 호이스팅을 합니다.

---

console.log(foo) //undefined

var foo // 선언 + 초기화
console.log(foo) //undefined

foo = 1; //할당
console.log(foo) //1

---

console.log(color) // let 변수는 선언 없이 초기화를 하지 않으므로 error

let color // 선언
console.log(color) // 초기화 undefined 

color = "blue"; // 할당
console.log(color) // blue

---

var 와 다르게 let 은 선언을 하지 않으면 error가 뜨는데

이유는 스코프의 시작에서 변수의 선언까지 일시적 사각지대(Temporal Dead Zone - TDZ)에 빠지기 때문이다.

변수는 선언 -> 초기화 -> 할당 순으로 생성되는데

var 는 선언 과 초기화 가 한번에 진행되기 때문에 이미 메모리를 확보한 상태이므로 호이스팅되어 undefined가 확인 되는 것을 볼 수 있다.

let 은 선언 과 초기화 가 분리되어 진행되기 때문에 선언을 하지 않고 참조를 하게되면 error가 확인 되는 모습을 볼 수 있다.

5. 전역객체 프로퍼티

5-1 var

var 는 전역객체 (브라우저의 경우는 window)의 프로퍼티이다.

var color = 'blue'

console.log(window.color) //blue
console.log(color) //blue

크롬 기준 코드 실행 시 변수 color 은 브라우저 전역객체인 window 의 프로퍼티로 할당된다.

5-2 let , const

let color = 'blue'

console.log(window.color) //undefined
console.log(color) //blue

크롬 기준 실행 시 let , const 는 전역객체가 아님을 확인할 수 있다.

6. 정리

const를 우선적으로 사용하고,

재할당이 필요한 경우 let 변수를 사용하되 변수의 스코프를 최대한 좁게 만들어 실수를 줄일 수 있도록 한다.

참고사이트
let,const,var 정리