왜 하필 많고 많은 버전 중 ES6 일까?

 

🍋 공부 배경

---

자바스크립트에서 외부 모듈을 가져오는 방식인 import와 require에 깊이 파고들다가, import 문을 사용하는 ES6, require 문을 사용하는 CommonJS까지 공부하게 되었다.

이 문서에서는 많고 많은 자바스크립트 문법 중 왜 하필 ES6가 필수적으로 언급되고, 대표적으로 이가 어떤 문제를 해결하기 위해 등장했는지에 대하여 정리하였다.

그 과정에서 단순히 편의를 위해 사용하던 화살표 함수, 내게는 모호했던 클래스 문법과-프로토타입의 관계성에 대해 추가 공부를 할 수 있었다.

 

🍋 ES6? ECMAScript? Netscape? 대체 뭐야

---

자바스크립트를 개발한 Netscape가, 규격화된 표준을 승인하는 공식 기관 Ecma에 제출한 표준이 ECMA-262이다. 그 표준화된 규격을 따르는 자바스크립트의 새로운 이름이 바로 ECMAScript.

ES6 표준을 따른다는 의미는 자바스크립트나 ECMA 규격을 따른다는 의미이다.

 

🍋 ES6, ES6.. 하필 왜?

---

(2023 1월 기준) 현재까지 ES13까지 배포가 되었는데 ES6 ES6에 다들 집착하는 이유는 무엇일까?

• 기존의 문제들을 매우 깔끔하게 해결
• 가독성, 유지 보수성을 보강하는 문법이 대거 추가
• ⇒ 그에 따라 유명 라이브러리들의 개발 환경도 ES6로 바뀜!
• IE에서는 지원하지 않지만 Babel을 이용하면 호환성 문제도 없음

이러한 베니핏으로 ES6에 특히! 집착하게 되었다.

 

🍋 기존 변수 선언 방식의 문제?

---

문제 1. var 변수는 언제나 변경 가능하여 이전엔 명명 규칙을 대문자 || _언더스코어로만 제한하였음

문제 2. var 변수는 같은 변수 재선언을 허용하여 값이 변경되었을 때 어디서 변경되었는지 추적이 어려워짐.

문제 3. var 변수는 함수 단위의 스코프를 가짐. 블록 외부에서 if/for 문 블록 외부에서도 var 변수 변수 접근 가능

function welcome(name){
    if (!name){
        var errMsg = "no name error!"
    }
    console.log(name);
    console.log(errMsg); // "no name error!". 함수 단위의 스코프를 가져 if 블록 외부에서에서도 변수 접근 가능 
}

welcome();

문제 4. 변수 선언 전에 변수의 사용이 가능한 호이스팅* 발생

(*호이스팅? 호이스팅? 변수, 함수 등 선언문을 최상단의 스코프로 끌어올려 메모리를 먼저 할당하는 자바스크립트 내부 현상. 때문에 var로 선언된 모든 변수는 스코프 선두에서 선언과 초기화 단계가 한 번에 이루어져서 변수 선언문 이전에 변수를 참조할 수 있게 됨. )

console.log(foo); // undefined
var foo;

console.log(bar); // Error: Uncaught ReferenceError: bar is not defined
let bar;

 

🍋 어떻게 해결했을까?

---

새로운 변수 선언 방식이 등장하게된다. let, const

let으로 선언된 변수는 변수의 선언까지 일시적 사각지대 (Temporary Dead Zone)이라는 데로 빠져서 변수가 선언문 이전에 변수를 참조할 수 없게 됨. 또한 let, const는 블록 스코프를 가지기에 외부 블록에서 접근이 불가함.

function welcome(name){
    if (!name){
        let errMsg = "no name error!" // 블록 외부에서 접근 불가 
    }
    console.log(name);
    console.log(errMsg); // Err: errMsg is not defined
}

welcome();

 

🍋 한줄 요약

---

변수의 선언에는 기본적으로 const 사용, 재할당이 필요한 경우에는 let을 사용하자.

(하지만 프로젝트를 하면서 var를 써도 무관한 경우는 있었다 다음 포스팅에서 다뤄보겠다)

 

🍋 다이내믹 this 바인딩 이슈?

---

일반 함수의 경우 메서드로 호출되느냐 / 아니면 함수 자체로 호출되느냐에 따라 동적으로 this가 바인딩됩니다.

JS의 this는 아래 상황에 따라 다른 값이 바인딩될 수 있다. 이 문제는 이벤트 핸들러 함수를 실행할 때 의도된 대로 동작시키기 위하여 상위 스코프의 this를 재 bind 시켜주어야 하는 등 불편하고 가독성 나쁘게 만드는 원인이 되었음.

// 메소드로 호출한 경우

var nameCard = {
  name: "송강",
  addClickEvent: function () {
    this.element = document.getElementById(this.name);

    var logName = function () {
      console.log("Hello! ", this);
    };

    // this.element.addEventListener("click", logName); // this.element 출력
        this.element.addEventListener("click", logName.bind(this)) // 해당 실행문의 this(메소드 호출 객체)로 재바인딩 시켜야함
  }
};

nameCard.addClickEvent();

 

🍋 어떻게 해결했을까?

---

하지만 화살표 함수의 등장으로, 함수가 선언될 시점에서 바로 상위 스코프의 this로 바인딩 됨으로써 아래처럼 외부 bind 메서드를 사용할 필요가 없어졌다.

const nameCard = {
  name: "송강",
  addClickEvent: function () {
    this.element = document.getElementById(this.name);

    var logName = () => { // 함수가 선언된 시점의 상위 스코프의 this로 자동 바인딩 
      console.log("Hello! ", this.name);
    };

    this.element.addEventListener("click", logName);
  }
};

nameCard.addClickEvent();

※ 단, 주의 ※

생성자 함수는 new 연산자를 사용해 생성자를 생성함. 하지만, 화살표 함수는 생성자 함수로 사용할 수 없음.

new 연산자는 다음의 알고리즘을 거쳐 this를 반환하지만, 화살표 함수는 참조하는 this 값이 실행문 외부 상단의 this 값이므로 본문 내 프로퍼티가 추가될 수 없음.

1. 빈 {} 객체가 this에 할당
   2. 그 객체에 생성자 내 본문을 실행하여 새로운 프로퍼티를 추가하여 this를 수정
   3. this를 반환

const Human = () => {};
const human = new Human();

 

🍋 혼돈의 클래스 구현

---

기존 ES5에는 클래스형 문법 없이 프로토타입 객체를 확장해 클래스를 흉내내어왔음.

이는 아래 예제처럼 Person이 일반 함수인지, 클래스 생성 함수인지 혼돈을 일으키고, 메서드가 내부에 캡슐화되지 않아서 가독성이 떨어짐.

// ES5
function Person(name){
    this.name = name;
}

Person.prototype.sayHi = function(){
    console.log("Hi" + this.name);
}

var 송강 = new Person("송강");

 

🍋 어떻게 해결했을까?

---

클래스 문법을 보면 클래스 생성 함수임이 분명히 보이고 캡슐화된 모듈들을 확인할 수 있음.

// ES6
class Person {
    constructor(name){
        this.name = name;
    }
    sayHi(){
        console.log("Hi" + this.name);
    }
}

const 송강 = new Person("송강");

 

🍋 그 외 우리를 위해 추가된 기능들

---

간단하고 편한 게 좋아!

a. 리터럴

key와 value 리터럴이 같다면 한 번만 입력 가능!

const dict = {name}; // == name:name

템플릿 리터럴

console.log(`Hello ${brandName} ${productName}!`);

rest 파라미터 / spread 표현식:
(name, …rest) ⇒ {console.log(rest)} / […obj]
축약형 메서드

// ES5
var nameCard = {
    name: "송강",
    logName: function(){}
}

// ES6
var nameCard = {
    name: "송강",
    logName(){}
}

 

b. 구분할 + 인풋 디폴트값 할당(Optional 처리)

아래 예제처럼 인풋에 디폴트 값을 할당하고 구분할로 값을 편히 꺼내줄 수 있음.

function logHuman({
    name = '송강', 
    age = 23,
    size = {
        height: {hand: 0, feet: 0}, 
        weight: {head: 0, body: 0}
    }   
} = {}) {
  console.log(name, size.weight.head);
}

logHuman({
  size: {height: {hand: 18, feet: 30}},
  name: "송강호"
});

단! 예제처럼 인풋과 2-depth 인풋이면서, 보내는 매개변수 size에 weight은 정의해 주고 height은 정의해주지 않은 채로 넘겨주는 경우,
매개변수엔 디폴트 값이 설정되지 않은 채 보내준 매개변수 값이 들어가게 되는데 → size.weight은 undefined 이므로 weight.body 프로퍼티를 읽으려 하게 되면 참조 에러가 발생한다.?.으로 옵셔널 처리를 해줄 수 있다.

 

c. 제너레이터 Generator

선언방법? Generator 생성자 || function* 사용.
실행 시 yield를 만날 때까지 코드 수행 → 다음 라인으로 넘어감. → 재개 (제너레이터. next()) → 다음 yield를 만날 때까지 수행

// ES6
function* gen(){
    yield 1;
    yield 2;
    yield 3;
    yield 4;
    yield 5;
}

const g = gen();

console.log(g.next()); // { value: 1, done: false }
console.log(g.next()); // { value: 2, done: false }
console.log(g.next()); // { value: 3, done: false }
console.log(g.next()); // { value: 4, done: false }
console.log(g.next()); // { value: 5, done: false }
console.log(g.next()); // { value: undefined, done: true }. done: true == 종료.

 

d. Named export
한 모듈 안에서 다른 모듈을 사용하려면 export를 통해 외부 모듈로 접근할 수 있게 만들어준다.

export {human1, human2, human3}; // export 
export default humanDefault 

import {human1, human2, human3} __ from; // export 

import humanDefault from __; // export default

import {human1 as a, human2 as b, human3 as c} from __; // 각 모듈에 alias 

import * from __; // 전체 모듈 import 후 꺼내 쓰기 __.모듈1

 

e. 비동기 처리

ES5의 콜백 지옥을 ES6에선 두 가지 방식으로 해결합니다.

1. Promise / then
   주로 서버에서 받아온 데이터를 화면에 표시할 때 사용.
   promise의 세 가지 상태: pending (비동기 처리 로직이 아직 완료되지 않은 상태), fulfilled (비동기 처리가 완료되어 프로미스가 결괏값을 반환해 준 상태)/ rejected (비동기 처리가 실패하거나 오류가 발생한 상태).

const p = new Promise((resolve, reject) => {
    // 성공하면
    resolve(결과값);
    // 실패
    reject(실패);
    // 에러
    throw new Error('에러');

});

p.then(onFullFilled, onRejected).catch(errorCallback);

1.1. 다중 프로미스 처리
프로미스는 단일 비동기 요청을 처리하는데, 아래처럼 Promise.all이나 Promise.race를 사용해 여러 개의 비동기 요청을 처리할 수 있다.

var p1 = "promise 반환 api...요청"
var p2 = 1337;
var p3 = "promise 반환 api...요청"

Promise.all([p1, p2, p3]).then(values => { 
  console.log(values); // 모든 프로미스가 resolve될 때까지 기다린 후 배열로 반환
});

Promise.race([p1, p2, p3]).then(value => { 
  console.log(value); // 가장 먼저 resolve는 값 반환
});

2. async / await
   비동기 처리를 하는 또 다른 문법입니다. async / await을 쓰면 가독성도 좋고 이해하기도 편해 보임.
3. async function 함수(){ try { await... // 비동기처리할 구문 } catch(err) { } }

자... async-await 이 가독성이 좋다면, promise-then은 왜 계속 쓸까?
async-await이 대개 가독성이 좋지만, then 처리가 더 편한 경우도 있습니다. 아래와 같이 연속적인 비동기 처리 + 각 구문마다 서로 다른 로직을 적용하는 경우.

// then을 쓰는 경우...
const multiplyWithPromise = () => {
    const promise = new Promise((resolve, reject) => {
      setTimeout(() => resolve(1), 1000); // (*)
    }).then((result) => { // (**)
      console.log(result); // 1
      return result * 2;
    }).then((result) => { // (***)
      console.log(result); // 2
      return result * 2;
    }).then((result) => {
      console.log(result); // 4
      return result * 2;
    });
    return promise;
}

multiplyWithPromise();

 

 

참고자료:
https://ko.javascript.info/arrow-functions
https://ui.toast.com/fe-guide/ko_ES5-TO-ES6
https://sumini.dev/til/006-ecmascript/