Sam Baek, The Dev's Corner

6️⃣ ES6 2015

13 Jun 2023

ECMAScript 2015

단어만 봐도 참 멋있다고 느껴졌던, 동시에 워낙 많이 들으니
대충 이거다 싶기는한데 막상 구체적인 설명은 어려웠던
JavaScript의 6번째 버전에 대해서 정리하고자 한다.

짧게 ES6는 JavaScript에서 많은 새로운 기능과 개선된 문법을 제공했다.
let 키워드와 const 키워드도 이 때 나왔다니 왜 주목받는지 알 것 같다.

ES6의 주요 특징은 다음과 같다.

let과 const키워드를 사용한 변수선언
화살표 함수
클래스
모듈
템플릿 리터럴
확장된 객체 리터럴
구조 분해 할당 (비구조화)

사실 이 밖에도, Rest+Spread, 반복자 + for of, 제너레이터, 맵, 심볼, 프로미스 등이 있다.
이번 기록에서는 각각 세밀하게 살펴보기보다는 개관으로 살펴보고자 한다.

let 과 const

let 은 재선언 불가, 재할당 가능
const 는 재선언 불가, 재할당 불가능
으로 사용되지만 더 나아가
let 키워드가 함수 스코프가 아닌
블록 스코프를 할당한다는 특징도 알고 있어야 한다.
이러한 특징은 var 키워드와 차이가 있는데, 클로저를 사용할 경우 그 차이를 살펴볼 수 있다.

화살표함수

알고 보는 것과 모르고 보는 것은 상당히 큰 차이를 만든다.
그 대표적인게 바로 이 화살표함수다.
함수는 함수 선언식과 함수 표현식으로 나뉘고
그에 따라 JavaScript언어만의 특징인 호이스팅의 여부가 갈리는데
함수 표현식은 호이스팅이 지원되지 않는다.
그리고 중요한건 화살표 함수는 함수 표현식이라는 것이다.
즉, 화살표함수는 함수 표현식이고 호이스팅이 지원되지 않는다.

함수표현식은 this가 함수 스코프에 바인딩 되지 않고 렉시컬 스코프를 갖는다.
무슨말이냐면, 자신을 감싸는 코드와 동일한 this를 공유한다는 것이다.

간결하게 정리하고자 했는데 길어지는 듯하다…
화살표함수는 괄호를 생략할 수 있는데
위 언급처럼 이게 알고 보는 것과 모르고 보는 것의 큰 차이를 만들고
때론 눈에 혼동을 야기하기도 한다.
괄호는 생략이 가능한데,
첫 번째는 매개변수 즉, parameter가 하나인 경우 소괄호를 생략할 수 있고
두 번째는 단일표현식이거나 빈 본문일 때 중괄호를 생략할 수 있다.
또, 마지막으로 객체 리터럴을 반환할 때 중괄호를 생략할 수 있다.

const person = {
  name: "chalie",
  friends: [],
  printFriends() {
    this.friends.forEach(item =>
      console.log(this.name + " knows " + item));
  }
}

const fnName = param1 => console.log(param1); // 매개변수 1개, 단일표현식
const fnName2 = (name,age) => ({name,age}); // 객체 리터럴

클래스

클래스는 프로토 타입 기반의 캑체 지향 프로그랭밍을 위해 만들어졌다.
클래스를 사용해 생성자 함수, 상속, 메서드 정의 등을 작성하고 재사용할 수 있다.

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello ${this.name}!`);
  }
}

const person = new Person("John");
person.greet();

모듈

모듈은 코드를 여러 파일로 구성할 수 있게 해주는 것이다.
import와 export를 사용해 모듈을 가져오고 내보낼 수 있다.

export const pi = 3.14;
export function double(x) {
  return x * 2;
}

import { pi, double } from "./module.js";
console.log(pi);

템플릿 리터럴

템플릿 리터럴은 객체를 만들 때 프로퍼티 지정을 더 유연하게 할 수 있도록
기능이 확장된 것이다. 문자열 내 변수를 삽입하고 멀티라인 문자열을 작성할 수 있게 됐다.

const name = "john";
console.log(`name : ${name}`);

구조 분해 할당 (비구조화)

배열이나 객체 값을 추출해 개별 변수에 할당할 수 있다.
패턴 매칭을 통해서 바인딩 하는 기법이다.

const {a, , b} = [1, 2, 3];
const {name,age,addr} = {"john", 20, "SEOUL"};

const numbers = [1,2,3];
const [first,second,third] = numbers;

확장된 객체 리터럴

확장된 객체 리터럴은 객체 리털의 기능이 향상돼 프로퍼티 축약 표현,
계산된 속성 이름, 메서드 정의 등을 사용하는 것이다.

// 프로퍼티 축약
const x = 10,
  y = 20;
const point = { x, y };

// 계산된 속성 이름
const prefix = "foo";
const obj = {
  [`${prefix}_bar`]: "hello",
};
console.log(obj.foo_bar);

// 메서드 정의
const calculator = {
  add(a, b) {
    return a + b;
  },
  sub(a, b) {
    return a - b;
  },
};