[elice] ES6

🔸 ES6

ECMA 262 6th 에디션으로 2015년 출시된 ES6는 유용하며 다양한 많은 기능들을 새로운 스펙으로
추가하였다.

주된 변경 및 추가된 점에 대한 내용은 다음과 같다.

• 템플릿 리터럴(Template literal)
  일반 문자열과 비슷해 보이지만, ‘ 또는 “ 같은 통상적인 따옴표 문자 대신 백틱(backtick) 문자 `를 사용한다.
  일반적인 문자열에서 줄바꿈은 허용되지 않으며 공백(white-space)를 표현하기 위해서는 백슬래시()로 시작하는 이스케이프 시퀀스(Escape Sequence)를 사용해야 한다. ES6 템플릿 리터럴은 일반적인 문자열과 달리 여러 줄에 걸쳐 문자열을 작성할 수 있으며 템플릿 리터럴 내의 모든 white-space는 있는 그대로 적용된다.
  템플릿 리터럴은 + 연산자를 사용하지 않아도 간단한 방법으로 새로운 문자열을 삽입할 수 있는 기능을 제공한다. 이를 문자열 인터폴레이션(String Interpolation)이라 한다.

• 화살표 함수(Arrow function)
  function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있다.
  화살표 함수는 익명 함수로만 사용할 수 있다. 따라서 화살표 함수를 호출하기 위해서는 함수 표현식을 사용하거나 콜백 함수로 사용할 수 있다.
  일반 함수와 화살표 함수의 가장 큰 차이점은 this다. 화살표 함수의 this는 언제나 상위 스코프 this를 가리킨다.

// 매개변수 지정 방법
    () => { ... } // 매개변수가 없을 경우
     x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략 가능
(x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략 불가능.

// 함수 몸체 지정 방법
x => { return x * x }  // single line block
x => x * x             // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return

() => { return { a: 1 }; }
() => ({ a: 1 })  // 객체 반환시 소괄호를 사용한다.

() => {           // multi line block.
  const x = 10;
  return x * x;
};

• 매개변수 기본값
  함수를 호출할 때 매개변수의 개수만큼 인수를 전달하는 것이 일반적이지만 그렇지 않은 경우에도 에러가 발생하지는 않는다. 함수는 매개변수의 개수와 인수의 개수를 체크하지 않는다. 인수가 부족한 경우, 매개변수의 값은 undefined이다.

• rest 파라미터
  Rest 파라미터(Rest Parameter, 나머지 매개변수)는 매개변수 이름 앞에 세개의 점(…)을 붙여서 정의한 매개변수를 의미한다. Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다.
  Rest 파라미터는 이름 그대로 먼저 선언된 파라미터에 할당된 인수를 제외한 나머지 인수들이 모두
  배열에 담겨 할당된다. 따라서 Rest 파라미터는 반드시 마지막 파라미터이어야 한다.

function params(param, ...rest){
	console.log(param); // 1
    console.log(rest); // [2, 3, 4, 5]
}
params(1,2,3,4,5);

• Spread 문법 (Spread Syntax)
  이터러블이 아닌 일반 객체는 Spread 문법의 대상이 될 수 없다.
  Spread 문법은 다음과 같은 방식으로 활용이 가능하다.
  • 함수 호출문의 인수 목록에서 사용
  • 배열 리터럴 내부에서 사용
  • 배열 복사
  • 이터러블을 배열로 변환
  • 객체 리터럴 내부에서 사용

// 1. 함수 호출문의 인수 목록에서 사용
const arr = [1, 2, 3, 4, 5];

console.log(Math.max(...arr));
Math.max(1,2,3,4,5,6) // >  6

// 2. 배열 리터럴 내부에서 사용

// 2-1) concat
const arr1 = [1, 2];
const arr2 = [3, 4, 5];

const newArr = arr1.concat(arr2);
const newArr2 = [...arr1, ...arr2];
console.log(newArr, newArr2);

// 2-2) splice

const arr3 = [1, 4];
const arr4 = [2, 3];
arr3.splice(1, 0, arr4); // [1, [2, 3], 4]
arr3.splice(1, 0, ...arr4); // [1, 2, 3, 4]
console.log(arr3);

// 3. 배열 복사

// ES5
const origin = [1, 2, 3];
const copy = origin.slice();

// ES6
const origin = [1, 2, 3];
const copy = [...origin];

// 4. 객체 리터럴 내부에서 사용

const obj = { x: 1, y: 2 };
const copy2 = { ...obj };
console.log(copy2); // {x:1, y:2}
console.log(obj === copy2); // false

// 객체 병합
const merged = { x: 1, y: 2, ...{ a: 3, b: 4 } };
console.log(merged); // { x: 1, y: 2, a: 3, b: 4}

• 객체 리터럴 프로퍼티 기능 확장

• 디스트럭처링(Destructuring)
  구조화된 배열 또는 객체를 Destructuring(비구조화, 파괴)하여 개별적인 변수에 할당하는 것이다. 배열 또는 객체 리터럴에서 필요한 값만을 추출하여 변수에 할당 하거나 반환할 때 유용하다.

/*
  1. 배열 디스트럭처링
*/

// ES5
const arr = ["spring", "summer", "fall", "winter"];

const spring = arr[0];
const summer = arr[1];
const fall = arr[2];
const winter = arr[3];

console.log(spring, summer, fall, winter);

// ES6

const [spr, sum, fl, wt] = arr;

console.log(spr, sum, fl, wt);

/*
  2. 객체 디스트럭처링
*/

const countries = {
  ko: "Korea",
  jp: "Japan",
  cn: "China",
};

const { ko, jp, cn } = countries;

// 2-1 중첩 객체

const person = {
  name: "Seo",
  skills: {
    language: "Korean",
  },
};

const {skills: { language },} = person;
console.log(language);

• ⭐클래스⭐
  자바스크립트는 프로토타입 기반(prototype-based) 객체지향 언어로서, 프로토타입 체인과 클로저 등으로 객체 지향 언어의 상속, 캡슐화(정보 은닉) 등의 개념을 구현할 수 있다.

  constructor
  constructor는 인스턴스를 생성하고 클래스 필드를 초기화하기 위한 특수한 메소드다.
  constructor는 클래스 내에 한 개만 존재할 수 있으며 만약 클래스가 2개 이상의 constructor를 포함하면 문법 에러(SyntaxError)가 발생한다.
  인스턴스를 생성할 때 new 연산자와 함께 호출한 것이 바로 constructor이며 constructor의 파라미터에 전달한 값은 클래스 필드(클래스 내부의 캡슐화된 변수)에 할당한다.

  getter
  getter는 클래스 필드에 접근할 때마다 클래스 필드의 값을 조작하는 행위가 필요할 때 사용하며, get 키워드를 사용해 정의한다.
  getter는 호출하는 것이 아니라 프로퍼티처럼 참조하는 형식이다.
  getter는 반드시 무언가를 반환해야 한다.

  setter
  setter는 클래스 필드에 값을 할당할 때마다 클래스 필드의 값을 조작하는 행위가 필요할 때 사용. set 키워드를 사용해 정의한다. 메소드 이름은 클래스 필드 이름처럼 사용된다.
  setter는 호출하는 것이 아니라 프로퍼티처럼 값을 할당하는 형식으로 사용하며 할당 시에 메소드가 호출된다.

  extends
  extends 키워드는 부모 클래스(base class)를 상속받는 자식 클래스(sub class)를 정의할 때 사용한다.
  super 메소드는 자식 class의 constructor 내부에서 부모 클래스의 constructor(super-constructor)를 호출한다. 부모 클래스의 인스턴스를 생성한다. 자식 클래스의 constructor에서 super()를 호출하지 않으면 this에 대한 참조 에러(ReferenceError)가 발생한다.

   // 클래스 선언문
    class Animal {
      // 생성자
      constructor(name) {
        this.name = name;
      }
  
      // 프로토타입 메서드
      callName() {
        console.log(`Come here! ${this.name}`);
      }
  
      // 정적 메서드
      static bark() {
        console.log("Meow~");
      }
  
      // getter
      get animalName() {
        return this.name;
      }
  
      // setter
      set animalName(newName) {
        this.name = newName;
      }
    }
  
    // 인스턴스 생성
    const pet = new Animal("catty");
  
    // 인스턴스의 프로퍼티 참조
    console.log(pet.name);
    // 프로토타입 메서드 호출
    pet.callName();
    // 정적 메서드 호출
    Animal.bark();
  
    console.log(pet.animalName);
    pet.animalName = "bow";
    console.log(pet.animalName);
  
    console.log(pet);
  
    // 클래스 상속
  
    class Cat extends Animal {
      constructor(name, color = "black") {
        super(name);
        this.color = color;
      }
    }
  
    const cat = new Cat("cathy");
  
    console.log(cat.animalName);

• 모듈
  모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각(관리하기 유용)
  일반적으로 모듈은 파일 단위로 분리되어 있으며 애플리케이션은 필요에 따라 명시적으로 모듈을 로드하여 재사용한다.(필요한 곳에 적재 적소로 사용)
  모듈이 성립하려면 모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 한다.
  모듈은 애플리케이션이나 다른 모듈에 의해 재사용되어야 의미가 있으므로 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개(export)한다.
  모듈 사용자는 모듈이 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여(import) 재사용할 수 있다.
  Script 태그로 여러 파일로 분리해서 로드할 수 있지만, 동작할 때는 하나의 전역 객체를 모두 공유하여 전역 변수 중복 문제 등이 발생할 수 있다.

  ESM(EcmaScript Modules)는 script 태그에 type=“module” 어트리뷰트를 추가하면 로드된 자바스크립트 파일은 모듈로서 동작한다.
  모듈에서 하나의 값만 export한다면 default 키워드를 사용할 수 있다. default 키워드를 사용하는 경우 기본적으로 이름 없이 하나의 값을 export한다.

• 이터레이션, for … of 문