var, let, const

변수 선언

• 어떤 값을 입력하게 되면 컴퓨터는 해당 값을 메모리에 저장하여 차후에 그 값을 사용할 때 메모리에서 해당하는 값을 꺼내준다.

1. 사과, 바나나라는 값을 컴퓨터에 저장하라고 명령을 한다.
2. 컴퓨터는 해당 값들을 자신의 메모리에 저장한다.

3. 이 중 사과라는 값을 다시 사용하고 싶다면, 2번 주소에 있는 값을 사용하면 된다.

• 여기서 문제는 값을 사용하려 할 때마다 값이 저장되어 있는 메모리 주소 값을 알아내고 기억하는 데에는 많은 어려움이 있다. 위 예시에서는 2와 사과는 전혀 관련이 없음에도 사과라는 값에 접근하기 위해서는 2로 접근해야한다.
  • 이런 이유로 우리는 사과라는 값에 apple이라는 변수명을 준다. 이렇게 되면 apple이라는 변수명을 통해 사과라는 값에 접근할 수 있게 된다.

변수 선언 : 메모리 공간을 확보
변수 할당 : 해당 공간의 주소를 연결하여 변수에 값을 저장
변수 참조 : 변수에 저장된 값을 읽음

var는 왜.. 이래요?

1️⃣ var index = 0; 
var sum = 0;

for (2️⃣ var index = 1; index < 11; index++) { 
 sum = sum + index; 
}

console.log(sum); // 55
console.log(index); // 11

• for문 안에서 index라는 이름만 같은 변수(2️⃣)를 반복문을 위해 선언해줬을 뿐인데 1️⃣의 index의 값도 변경되었다. 이는 왜 때문일까?

자바스크립트의 변수 선언의 역사 🧔🏻‍♀️

• ~ES5 : var의 전성기
• ES6 : let과 const의 도입 (이는 var의 문제점 때문!)

☁️ var의 문제점

1️⃣ 중복선언이 허용된다.

var x = 1;
var y = 1;

var x = 100; // 재선언 후 값 할당 ⭕️
var y; // 재선언 할 때 값 할당 ❌

console.log(x); // 100
console.log(y); // 1

중복 선언이 어째서 문제가 될까?

// 1. 개발자 A는 변수 x, y를 먼저 선언한다.
var x = 1;
var y = 1;

... 수만줄의 코드 

// 2. 개발자 B가 다시 변수 x, y를 선언한다.
var x = 100; 
var y; 


// 3. 예상치 못한 결과값이 나올 확률 증가 (A둥절)
console.log(x); 
console.log(y); 

2️⃣ 함수 레벨 스코프를 가진다.

var x = 1;

if (true) {
  var x = 100;
}

console.log(x); // 100

var를 사용하게 되면 중복선언이 가능하므로 x가 다시 선언될 수 있고,
var값은 1이 아닌 100이 출력되어 버린다.
if문 뿐만 아니라, for문 등 함수 코드 블록이 아닌 다른 코드블록에서 var 변수를 선언하면 전역변수가 된다.
함수 레벨 스코프를 가지기 때문에 의도치 않게 전역변수로 선언해 중복 선언될 확률이 높다.

3️⃣ 변수 호이스팅

• 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트의 고유 특징
• 선언전에도 변수를 참조할 수 있는 현상
• 자바스크립트 엔진은 코드를 실행하기전, 코드 한줄한줄 소스 평가 과정을 거친 후 소스코드를 실행한다.
  • 자바스크립트 엔진이 전체코드를 스캔하면서 변수같은 정보를 실행 컨텍스트 환경 레코드에 미리 기록한다.

1. 자바스크립트 엔진은 코드를 하나하나 읽으면서 변수 선언문 또는 함수 선언문 등을 찾아 먼저 실행한다.
2. 자바스크립트 엔진이 선언문을 맨 위로 끌어올려 첫 줄에 있는 console.log보다 먼저 실행하게 된다.
3. 만약 호이스팅을 고려하지 않는다면, apple이 선언되지 않은 채 사용되므로 오류가 날 것이라고 예상할 수 있다. 하지만 자바스크립트에서는 호이스팅에 의해 apple이 선언되고 (var apple;이 밑에 존재하므로), undefined로 초기화된 상태이다.

호이스팅의 문제

• 가독성을 해친다.
• 선언전에도 에러가 나지 않기 때문에 오류를 발생시킬 확률이 높아진다.

☁️ 아하 이래서 let과 const가 도입됐구나?

let의 특징

1️⃣ 변수 중복 선언 금지

let 과일 = '사과';
let 과일 = '바나나'; // SyntaxError

let은 중복 선언 허용으로 인한 휴먼에러를 방지하고자, 변수 중복 선언에 대해 문법 에러를 띄운다. ("이거 이미 쓰인거야! 다른 이름 써!")

2️⃣ 블록 레벨 스코프

우선 스코프가 뭘까?

스코프

• 식별자를 찾을 때 자바스크립트에서 확인하는 범위
• 상위 스코프에서는 하위 스크프에 접근할 수 있지만 반대는 불가능

function foo() { // local
 let scope = 'local';
 
 if (true) { // block
  let scope = 'block';
   
  console.log(scope);
 }
 console.log(scope);
}
// global

let scope = 'global';

foo();

console.log(scope);

// 출력
// block
// local
// global

• 자바스크립트에는 대표적으로 block, local, global 스코프가 존재
• ES5까지는 전역 스코프와 함수 스코프만 사용 가능 했지만, let과 const가 도입되면서 블록 스코프도 사용 가능하게 되었다.

블록 레벨 스코프란 뭘까?

let 과일 = '사과';

function printFruit() {
 let 과일 = '바나나';
  
 console.log(과일); // 바나나
}

console.log(과일); // 사과 

printFruit();

동일한 변수이름을 가짐에도 불구하고 다른 결과가 출력되는 이유는 let이 코드 블록을 스코프로 인정하는 블록 레벨 스코프를 가지기 때문이다.
코드 블록 : 함수, if문, for문 등의 코드 블록 {}

3️⃣ 변수 호이스팅

var와 같은 경우에는 호이스팅이 이루어져 선언문이 맨 앞으로 끌어올려지기 때문에 아직 변수가 선언되기 전 인데도 오류가 나지 않고 undefined가 출력된다.
하지만 let은 호이스팅이 이루어지지 않는 것처럼 동작한다.
즉, var와 달리 선언하지 않은 변수를 사용하면 에러가 난다.

// var

console.log(과일); // undefined

var 과일;

// let 
console.log(과일); // 참조 에러 : ReferenceError

let 과일;
console.log(과일); // 선언만 해주었을 때는 var의 호이스팅과 같이 자바스크립트 엔진에 의해서 선언되어 있는 상태로, undefined 출력 

var와 let은 소스 평가 과정에서 어떤 차이가 있을까?

• (복습) 자바스크립트는 코드를 실행하기 전에 변수 선언문, 함수 선언문 등을 찾아 위로 끌어올리는 평가 과정을 거친다.
• 이 과정은 선언 단계와 초기화 단계로 나뉘어진다.

• 선언 단계 : 스코프에 변수 식별자를 등록해 자바스크립트 엔진에게 해당 변수의 존재를 알린다.
• 초기화 단계 : 등록된 변수 식별자에 값을 undefined로 초기화한다.

그래서 어떤 .. 차이가?

• var : 두 과정을 소스 평가 과정에서 모두 이룬다. (선언, 초기화 단계)
• let : 선언 단계와 초기화 단계가 분리되어 진행된다.
  • 선언 단계 : 자바스크립트 엔진에게 변수의 존재를 알린다. (현재 JS엔진은 초기화 단계를 거치지 않았으므로 해당 변수가 어떤 값을 가졌는지 모른다. 이런 이유로 변수 선언문에 앞서 변수를 참조하면 ReferenceError가 난다.)
  • 초기화 단계 : 변수 선언문에서 이루어진다! (소스 평가 과정에서 하지 않음)

일시적 사각지대 (TDZ)

let은 변수 선언문 전에서 초기화 단계가 이뤄지지 않으므로 그 전에 변수를 참조하면 ReferenceError가 발생하고, 선언문 이후에 참조할 경우 undefined로 초기화된 상태이므로 undefined가 출력된다.
이처럼 (스코프 시작 지점 ~ 초기화 시작 지점)까지 변수를 참조할 수 없는 구간을 일시적 사각지대라고 부른다.

const의 특징

기본적으로 let의 특징을 모두 가지고 있다.

1️⃣ 선언과 동시에 초기화가 필수

const a; // SyntaxError

const는 상수를 선언하기 위해 만들어졌다는 목적성에 맞게 초기화를 해주지 않으면 문법 에러가 발생한다.

2️⃣ 재할당 금지

const a = 10;

a = 100; // TypeError

자바스크립트에서의 상수 특징

const로 변수를 선언하게 된다면, 변수가 위와 같이 상수에 특징을 갖게 되어 유지보수 측면에서 유리하다. (사용자에게 이것은 변하지 않을 값이다라는 것을 미리 알려줄 수 있다.)
주의해야 할 점은 const로 선언된 변수가 원시값이 할당되었다면 어떤 방법으로든 변경이 불가능하지만, 참조값이 할당되어 있다면 내부 속성이 변경될 수 있다. (물론, 새로운 객체를 할당하는 것은 불가능하다.)

마무리

var대신 let과 const를 사용해야하는 이유?

1. 변수 이름이 중복되는 것을 방지할 수 있다. (재선언 금지)
2. 변수 값이 할당되기 전 사용할 때의 혼란을 줄여준다. (TDZ)
3. 변수 간의 접근을 제한하여 차이를 명확히 한다.

참고

• 테코톡 - 태태, 샐리의 var, let, const 비교