[JavaScrpt] ES6 - let, const, 호이스팅, TDZ

 

ES6이란?

ES6(ECMAScript 2015)은 ECMAScript 표준의 여섯 번째 버전으로, JavaScript 언어의 표준을 정의하는 규격입니다. ES6는 이전 버전의 ECMAScript에 비해 많은 새로운 기능과 개선 사항을 도입했으며, 모던 JavaScript 개발에서 널리 사용되고 있습니다.

 

ES란?

ES는 ECMAScript의 약자로, JavaScript 언어의 표준을 정의하는 규격을 가리킵니다. ECMAScript는 언어의 코어 부분을 정의하며, 웹 브라우저에서 실행되는 JavaScript 엔진과 같은 환경에서 어떻게 동작해야 하는지에 대한 규칙을 제공합니다. ECMAScript 표준은 ECMA International이라는 국제 표준화 기구에 의해 관리되고 있습니다.

 

ES6를 사용하는 이유?

1. 새로운 기능 도입:
   • ES6는 많은 새로운 기능을 도입하여 JavaScript를 높은 수준으로 발전시켰습니다. 화살표 함수, 클래스, 모듈 등의 기능들은 개발자에게 강력한 도구를 제공합니다.
2. 가독성 향상:
   • 새로운 문법과 기능은 코드의 가독성을 향상시킵니다. 이로 인해 더 직관적이고 이해하기 쉬운 코드를 작성할 수 있습니다.
3. 생산성 향상:
   • ES6의 새로운 기능들은 개발 작업을 더 간편하게 만들어 생산성을 향상시킵니다. 간결한 문법과 유용한 기능들은 개발자가 빠르게 코드를 작성하고 유지보수할 수 있도록 도와줍니다.
4. 표준화된 문법:
   • ES6는 표준화된 문법을 제공하여 모든 브라우저에서 일관된 동작을 보장합니다. 이는 크로스 브라우징 이슈를 최소화하고 일관된 환경에서 개발할 수 있게 해 줍니다.

 

ES6의 대표적인 특징

1. const와 let:
   • const와 let은 블록 스코프를 가지는 변수를 선언할 때 사용됩니다. const는 상수를 선언할 때 사용되며, let은 재할당이 가능한 변수를 선언할 때 사용됩니다.
2. 화살표 함수(Arrow functions):
   • 간결한 문법과 Lexical this를 가지는 화살표 함수가 도입되어 함수 정의를 간결하게 만들어줍니다.
3. 템플릿 리터럴 (Template Literals):
   • 문자열을 표현하는 새로운 문법으로, 문자열 내에서 변수를 쉽게 삽입할 수 있습니다.
4. 기본 매개 변수 (Default parameters):
   • 함수의 매개 변수에 기본 값을 설정할 수 있습니다.
5. 배열 및 객체 비구조화 (Array and object destructuring):
   • 배열이나 객체의 값을 간편하게 추출하여 변수에 할당할 수 있는 문법입니다.
6. 가져오기 및 내보내기 (Import and export):
   • 모듈화를 지원하는 문법으로, 코드를 여러 파일로 나누어 관리할 수 있게 합니다.
7. 프로미스 (Promises):
   • 비동기 작업을 처리하기 위한 표준화된 방법으로, 콜백 지옥을 피할 수 있게 해줍니다.
8. 클래스 (Classes):
   • 객체지향 프로그래밍을 더 쉽게 구현할 수 있도록 하는 클래스 문법이 도입되었습니다.
9. 나머지 매개 변수 및 확산 연산자 (Rest parameter and Spread operator):
   • 함수의 매개 변수로 나머지 매개 변수를 받거나, 배열이나 객체를 확산하여 전개할 수 있습니다.

 

const와 let

이번에는 es6에서 변화된 변수인 const와 let에 대해 알아보겠습니다.

es5까지는 변수를 선언할 수 있는 방법이 var을 사용하는 것이었습니다. 

하지만 es6에서는 var의 단점을 보완하기 위해 let과 const를 도입하였습니다.

1. var :: 한번 선언된 변수를 다시 선언할수 있다. 선언하기 전에 사용할 수 있다.
2. let :: 중복 선언 불가능, 재할당 가능
3. const :: 중복 선언 불가능, 재할당 불가능

 

 

변수의 생성 단계

JavaScript에서 변수의 생성과정은 다음과 같이 세 단계로 나뉩니다.

1. 선언 단계 (Declaration phase):
   • 변수를 사용하려고 선언할 때, 해당 변수는 실행 컨텍스트의 변수 객체에 등록됩니다. 이 변수 객체는 스코프(유효 범위)가 참조하는 대상이 됩니다.
2. 초기화 단계 (Initialization phase):
   •  변수 객체 값을 위한 공간을 메모리에 할당합니다. 이때 할당 되는 값은 undefined
   • 이 메모리 공간은 undefined로 초기화됩니다. 따라서 변수는 초기화되었지만 아직 값이 할당되지 않은 상태입니다.
3. 할당 단계 (Assignment phase):
   • 초기화된 변수에 실제 값을 할당하는 단계입니다. 이때 사용자가 변수에 값을 할당하면, 해당 메모리 공간에 실제 값이 저장됩니다. name = kim

간단한 예시를 통해 설명하면 아래와 같습니다.

// 선언 단계: 선언과 동시에 초기화
var name;

// 할당 단계: 변수 kim에 값 할당
name = 'kim';

// 값이 할당된 상태
console.log(name); // 출력 결과 : "kim"

 

 

1. var, let, const의 생성 단계:
   • var, let, const 모두 호이스팅(hoisting)이라는 JavaScript의 동작 특성에 따라 선언 단계와 초기화 단계가 별도로 이루어집니다.
   • var의 경우 선언 단계와 초기화 단계가 한 번에 이루어지며, undefined로 초기화됩니다.
   • let과 const는 선언 단계에서 변수가 생성되고, 초기화 단계에서는 변수가 선언되었지만 아직 값이 할당되지 않습니다. 따라서 초기화 이전에 변수를 참조하면 에러가 발생합니다.
2. let과 const의 할당 단계:
   • let은 선언 후 언제든지 재할당이 가능합니다.
   • const는 선언과 동시에 값을 할당해야 하며, 이후에는 재할당이 불가능합니다.
3. const와 불변성:
   • const는 재할당을 막기 때문에 상수로 인식되지만, 배열이나 객체와 같은 참조형 데이터의 경우 const로 선언한 변수는 해당 데이터에 대한 참조를 변경할 수 없게 합니다. 그러나 데이터 내부의 속성이나 요소는 변경할 수 있습니다.

 

 

1. var - 한번 선언한 변수 재사용가능, 선언하기 전에 사용가능

var name = "kim";
console.log(name); // 결과값 : kim

// 중복 선언 가능 -> 마지막에 선언한 값을 저장
var name = "lee";
console.log(nmae); // 결과값 : lee

 

• var로 선언한 변수는 동일한 변수명으로 중복해서 선언이 가능합니다.
• 이와 같은 경우에는 마지막에 할당된 값이 변수에 저장됩니다.
• 이런 var의 성질은 필요할 때, 변수를 유연하게 사용할 수 있다는 장점이 있지만, 기존에 선언한 변수를 잊고, 값을 재할당하는 등의 실수가 발생할 수 있어 오류가 생겼을 때 해결하기가 어려울 수 있습니다.
• 이를 보완하기 위해서 es6에서 let과 const가 추가되었습니다.

 

2. let - 중복 선언 불가, 재할당 가능

let name = "kim";
console.log(name) // 결과값 : kim

// 중복 선언 불가능 - 에러남
let name = "lee";
console.log(name); 
// 에러 :: Uncaught SyntaxError: Identifier 'name' has already been declared

// 재할당 가능
name  = "choi";
console.log(name); // 결과값 : choi

 

 

3. const - 중복 선언 불가능, 재할당 불가능

const name = "kim";
console.log(name); // 결과값 : kim

// 중복 선언 불가능 - 에러남
const name = "lee";
console.log(name);
// 에러 :: Uncaught SyntaxError: Identifier 'name' has already been declared

// 재할당 불가능 - 에러남
name = "choi";
console.log(name);
// 에러 :: Uncaught TypeError: Assignment to constant variable

 

let과 const의 차이는 재할당의 여부입니다.

let은 재할당이 가능하지만 const는 재할당이 불가능합니다.

 

 

* 하지만 const가 불변을 의미하지는 않습니다.

function run() {
 const nameList = ["kim", "lee", "choi"] // nameList 배열, 값을 여러개 저장할때 사용(값의 집합)
 
 // 재할당 불가능 :: 에러남
 nameList = "Park";
 console.log('nameList');
 // 에러 :: Uncaught TypeError: Assignment to constant variable
 
 // 오브젝트 값과 배열의 값을 변경하는 것은 가능
 nameList.push("Park"); // push :  배열의 끝에 값을 추가하는  메서드.
 console.log(nameList); // 결과 : ["kim", "lee", "choi", "park"]
}

 

위의 예제처럼 재할당은 불가능하지만,

배열의 값을 추가하는 "push"와 같은 메서드를 사용해서 배열의 값을 변경하는 것은 가능합니다.

 

 

let과 const 어떻게 사용하면 좋을까?

const는 재할당이 되지 않기 때문에, 재사용하지 않는 변수에 사용합니다.

let은 재할당이 가능하기 때문에 재할당이 필요한 경우 사용합니다.

 

예를 들어, 채팅앱을 개발한다고 했을 때, const를 사용하면 좋을만한 경우는 다음과 같습니다. 

 

만약 채팅앱을 개발한다면? - const를 사용하는 경우

1. 채팅 앱에서 사용되는 메세지 유형

// 채팅 앱에서 사용되는 메세지 유형 
const TEXT_MESSAGE = 'text';
const IMAGE_MESSAGE = 'image';
const VOICE_MESSAGE = 'voice';

 

채팅 앱에서는 다양한 종류의 메시지가 있을 수 있습니다.

예를 들어, 일반 텍스트 메시지, 이미지 메시지, 음성 메시지 등이 있을 수 있습니다.

이러한 메시지 유형을 const로 정의하여 사용하면, 코드의 가독성이 높아지고 유지보수가 용이해집니다.

 

 

2. 이벤트 타입 

const NEW_MESSAGE_EVENT = 'new_message'; // 새로운 메세지
const USER_JOINED_EVENT = 'user_joined'; // 사용자 입장
const USER_LEFT_EVENT = 'user_left'; // 사용자 퇴장

 

채팅 앱에서 발생하는 다양한 이벤트를 const로 정의할 수 있습니다.

예를 들어, 새로운 메시지 도착, 사용자 입장, 사용자 퇴장 등의 이벤트를 const로 정의하여 사용할 수 있습니다.

 

 

3. 타임아웃 값 정의

const MESSAGE_SEND_TIMEOUT = 5000; // 5초

 

일부 기능에서는 특정 동작이나 요청에 대한 타임아웃 값을 상수로 정의할 수 있습니다.

이를 통해 일관된 타임아웃 값을 사용하고, 필요할 때 한 곳에서 변경할 수 있습니다.

 

만약 채팅앱을 개발한다면? -  let를 사용하는 경우

1. 사용자 정보 관리

let userName = "Kim";
// ...
userName = "Lee"; // 재할당 가능 :: 사용자 이름을 변경할 수 있음

 

사용자가 로그인한 후의 정보를 저장할 때, 사용자 이름, 프로필 이미지 등의 정보는 변경될 수 있습니다.

이러한 정보를 저장하는 변수에 let을 사용할 수 있습니다.

 

2. 메세지 관리

let message = "Hello, how are you?";
// ...
message = "I'm fine, thank you!"; // 재할당 가능 :: 메시지 내용 변경 가능

 

채팅 앱에서 사용되는 메시지는 동적으로 생성되고 변경되는 요소입니다.

새로운 메시지를 추가하거나 메시지의 내용을 수정하는 경우에 let을 사용할 수 있습니다.

 

3. 상태 관리

let onlineStatus = true;
// ...
onlineStatus = false; // 재할당 가능 :: 사용자의 온라인 상태 변경

 

채팅 앱에서는 사용자 온라인 상태, 읽지 않은 메시지 수 등과 같은 상태를 관리해야 합니다.

이러한 상태 정보를 저장하는 변수에 let을 사용할 수 있습니다.

 

4. 루프 변수

아래는 채팅앱에서 사용될만한 루프 변수입니다.

반복문에서 사용되는 루프 변수는 반복이 진행됨에 따라 값이 변경되므로 let을 사용합니다.

// 메세지 표시 - 사용자에게 표시할 메시지 목록이나 대화 내용을 반복적으로 처리할 때 
for (let i = 0; i < messages.length; i++) {
    // messages 배열에 있는 각 메시지를 처리
    displayMessage(messages[i]);
}

// 사용자 목록 처리 - 온라인 사용자 목록이나 친구 목록과 같은 사용자 그룹을 표시하고 처리할 때
for (let i = 0; i < onlineUsers.length; i++) {
    // 온라인 사용자 목록을 반복적으로 처리
    processUser(onlineUsers[i]);
}

// 알림 처리 - 새로운 메시지 도착, 새로운 사용자 입장 등의 알림을 처리할 때 
for (let i = 0; i < notifications.length; i++) {
    // 알림 목록을 반복적으로 처리
    handleNotification(notifications[i]);
}

// 채팅방 목록 표시 - 여러 채팅방을 표시하고 처리할 때
for (let i = 0; i < chatRooms.length; i++) {
    // 채팅방 목록을 반복적으로 처리
    displayChatRoom(chatRooms[i]);
}

 

 

 

호이스팅이란?

호이스트의 뜻

 

hoist : 끌어올리다.

 

자바스크립트 - 위에서 아래로 순서대로 코드가 실행되는 인터프리터 언어

자바스크립트에서 선언이 위로 끌어올려지는 것 = 호이스팅

 

호이스팅(hoisting)은 JavaScript에서 선언된 변수 및 함수가 코드의 맨 위로 끌어올려지는 동작을 의미합니다.

하지만 호이스팅의 세부적인 동작은 var, let, const에 따라 다르게 작동합니다.

아래에서 각각의 변수 선언 방식에 대한 호이스팅을 설명하겠습니다.

 

var의 호이스팅

 

호이스팅 전

console.log(name); // 결과값 :: undefined
var name = 'kim';

// 실제로는 아래와 같이 해석 됩니다.
var name; // 선언 단계에서 호이스팅
console.log(name); // undefined (초기화되지 않아서)
name = 'kim'; // 변수에 값 할당

 

호이스팅 후

var name;
console.log(name); // 결과값 :: undefined
name = 'kim';

 

호이스팅 후에는 선언 단계에서 변수 name이 맨 위로 끌어올려지기 때문에 코드 실행이 시작되기 전에,

이미 var name;이 수행되었습니다. 하지만 초기화는 이루어지지 않아서 여전히 undefined로 값이 설정되어 있습니다.

 

실제로 console.log(name);은 호이스팅 전과 후에 동일한 결과인 undefined를 출력합니다.

호이스팅은 선언을 끌어올리지만, 변수에 실제 값이 할당되는 부분은 그 자리에 그대로 남아 있기 때문입니다.

 

따라서 var로 선언된 변수는 선언 부분이 코드 상단으로 끌어올려지고 초기화되지만,

값이 할당되기 전에는 undefined로 초기화됩니다.

 

let, const의 호이스팅

 

let

// let 호이스팅
imLet // 에러 :: Uncaught ReferenceError: imLet is not defined 
let imLet = 1;

 

const

// const 호이스팅
imConst // 에러 :: Uncaught ReferenceError: imConst is not defined 
const imConst = 1;

 

var는 유일하게 선언과 동시에 초기화가 이루어져,  변수를 먼저 사용했을 때 에러가 나지 않고 undefinded로 초기화가 됩니다.

그렇기 때문에 let과 const는 일반적인 var의 방법을 사용할 시 에러가 납니다.

 

let과 const는 호이스팅이 가능합니다.

하지만  선언된 변수는 초기화되기 전까지 사용할 수 없는 상태가 됩니다.

이를 TDZ(Temporal Dead Zone)라고 합니다.

 *TDZ : TDZ라는 것은 변수 선언 및 초기화하기 전 사이의 사각지대

 

TDZ(Temporal Dead Zone)는 let과 const 변수가 선언되고 초기화되기 전까지 액세스 할 수 없는 영역을 가리킵니다.

이를 통해 코드의 안정성을 높이고 잠재적인 버그를 줄일 수 있습니다.

 

 

간단히 말하면:

1. let:
   • 호이스팅은 되지만 초기화가 이루어지기 전까지 변수에 접근할 수 없습니다. 변수가 선언된 위치부터 초기화되기 전까지의 영역이 TDZ입니다.
2. const:
   • 호이스팅은 되지만 const로 선언한 변수는 반드시 선언과 동시에 초기화되어야 합니다. 초기화되지 않은 const 변수는 TDZ에 들어가서 접근할 수 없습니다.

이러한 특성을 이용하여 변수를 사용하기 전에 반드시 초기화되었는지 확인하고, 예상치 못한 버그를 방지할 수 있습니다. TDZ는 변수를 좀 더 예측 가능하게 사용할 수 있도록 도와주는 개념입니다.

 

let의 호이스팅 및 초기화

// 호이스팅
let myVar;

// 나중에 초기화 및 값 할당
myVar = 'Hello, World!';

// 이제 변수를 사용할 수 있습니다.
console.log(myVar); // 출력 결과: Hello, World!

 

 

const의 호이스팅 및 초기화 - const로 선언한 변수는 반드시 선언과 동시에 초기화

// 호이스팅 및 초기화 (동시에 진행)
const myConst = 'Hello, World!';

// 이제 변수를 사용할 수 있습니다.
console.log(myConst); // 출력 결과: Hello, World!