Javascript ES6 문법 정리

🎄 ES6

• ECMAScript 2015로도 알려져 있는 ECMAScript 6는 ECMAScript 표준의 가장 최신 버전
• 다양한 웹 브라우저에서 자바스크립트가 공통되게 잘 작동하기 위해서 표준규격 자바스트립트를 이루는 코어 스크립트 언어

🍧 ES6 새로운 문법

1) const and let
2) Arrow functions(화살표 함수)
3) Array and object destructing(배열 및 객체 비구조화 할당)
4) Default parameters(기본 매개 변수)
5) Template Literals(템플릿 리터럴)
6) Import and export(가져오기 및 내보내기)
7) Promises (프로미스)
8) Rest parameter and Spread operator(나머지 매개 변수 및 확산 연산자)
9) Classes(클래스)

---

🎄 ECMAScript 6 에 추가된 기능

🔸 변수 선언 방식

var vs let vs const

• var : ES6 업데이트 이전에 변수 할당방식. 자유롭게 사용이 가능하며 function scope(함수 범위)

var name = "yyy";
console.log(name)  // yyy
var name = "www";
console.log(name)  // www

• let : 변수에 재할당이 가능한 block scope(블록 범위).
  var 의 유효 범위는 전체 외부 함수까지이지만 let은 변수를 선언한 블록과 그 내부 블록들에서만 유효하다.
  let은 새로운 값을 받을 수도 있고 재할당할수도 있다. 즉, 변경 가능한 변수가 생성된다. 과거 es5이하 문법에서는 var로 선언된 변수가 ‘호이스팅(hoisting)’되는 현상이 있었다. es6에서는 이러한 호이스팅 현상이 일어나는 side effect를 최소화 하기위해 변경 가능한 변수에 대해 let 키워드로 정의한다.

let hello='first hello';  
{
  let hello = 'inner hello';  
  console.log(hello); // inner hello
}
console.log(hello); // first hello

• const : 변수 재선언, 재할당 모두 불가능한 block scope (배열과 오브젝트의 값을 변경하는 것은 가능함)
  주로 react에서 특정 이벤트를 실행하는 버튼이 있거나 특정 요소를 정의하는데에 const를 사용한다. 변경 불가능한 값을 정의하려면,const를 키워드를 사용하여 상수로 사용하는 것이 좋다.

const hello='hello';
hello='change hello'; // 재 정의 불가

const hello='hello!';
{
  const hello='inner hello!';   // 블록 단위 스코프이기 때문에 선언 가능
  console.log(hello); // inner hello!
}
console.log(hello); // hello!  



// 상수 선언의 예

// ES5
var button = document.getElementById("button1");

// ES6
const button = document.getElementById("button2");

📌 let, const 공통 특징

• 블록레벨의 스코프를 가짐
• 같은 스코프({ })에선 let 으로 변수를 재정의 하는 것 불가
• let, const는 호이스팅 적용이 안됨. 변수 선언 이전에 접근 불가능함

📌 ES2015에서 제공하는 새로운 메소드

🌝 같은 문자열인지 확인 하는 메소드 ➡ startsWith, endsWith, includes

let str = "helloooo";
let matchstr = "hello

//시작값이 같은지
console.log(str.startsWith(matchstr));

//끝값이 같은지
console.log(str.endsWith(matchstr)); 

//매칭되는 문자열이 있는지
console.log(str.includes(matchstr)); 

---

🔸 Arrows

• Arrows(화살표) 함수는 => 문법을 사용하는 축약형 함수 이다. (형태: (인자) => 함수본문)
• javascript에서 함수를 정의하는 function 키워드 없이 함수를 만들 수 있으며, return 키워드 없이 식을 계산한 값이 자동으로 반환된다.
• () 안에 함수의 인자가 들어가고, => 오른쪽에는 결과를 반환하는 식이다.
• Arrows는 표현식의 결과 값을 반환하는 표현식 본문(expression bodies)뿐만 아니라 상태 블럭({ }) 본문(statement block bodies)도 지원한다.

let evens = [2, 4, 6, 8,]; 

// Expression bodies (표현식의 결과가 반환됨) 
let odds = evens.map(v => v + 1); // [3, 5, 7, 9] 
let nums = evens.map((v, i) => v + i); // [2, 5, 8, 11] 
let pairs = evens.map(v => ({even: v, odd: v + 1})); // [{even: 2, odd: 3}, ...] 


// Statement bodies (블럭 내부를 실행만 함, 반환을 위해선 return을 명시해야함)
nums.forEach(v => { 
   if (v % 5 === 0) 
      fives.push(v); 
}); 

• 일반 함수의 자신을 호출하는 객체를 가리키는 dynamic this와 달리 arrows 함수는, 코드의 상위 스코프(lexical scope)를 가리키는 lexical this를 가진다.

// Lexical this 

let bob = { 
    name: "Bob", 
    friends: ["John, Brian"], 
    printFriends() {      // 함수 블럭 상위의 this를 참조
      this.friends.forEach(el => 
        console.log(this.name + " knows " + el)); 
    } 
}
// 출력결과 : Bob knows John, Brian 

🍧 Arrow Function 사용법

1. 인자가 없을 때 빈 괄호 세트가 필요하다.
2. 인자가 1개일 때는 생략이 가능하다.
3. 함수가 객체 리터럴을 반환하는 경우 꼭 () 괄호로 감싸야 한다.
4. 명령 구분으로 이뤄져 있고 결과를 반환해야할 때 {} 괄호가 필요하다.

// 1. 인자가 없을 때 빈 괄호 세트가 필요하다.
var countFruits = () => fruits.length;

// ES5
var countFruits = function () {
    return fruits.length;
}

// 2. 인자가 1개일 때는 생략이 가능하다.
var filteredFruit = fruits.filter(fruits => fruits.price > 100); 
// 과일 가격이 100 넘는 것만 골라서 객체를 만들어줌
console.log(filteredFruit); // [{name: "banana", price: 120}]

// ES5
fruits.filter(function (fruit) {
   return fruit.price > 100;
}); 

// 3. 함수가 객체 리터럴을 반환하는 경우 꼭 () 괄호로 감싸야 한다.
var inventory = fruits.map(fruit => ({name:fruit.name, storage: 1})); 
// 과일을 받아다가 {name:fruit.name, storage: 1} 형태로 변환한 리스트 객체를 반환
console.log(inventory); // [{name: "apple", storage: 1}, {name: "orange", storage: 1}, {name: "banana", storage: 1}]

// ES5
var inventory = fruits.map( function (fruit) {
   return {
       name: fruit.name,
       storage: 1
   }
});

// 4. 명령 구분으로 이뤄져 있고 결과를 반환해야할 때 {} 괄호가 필요하다.
var inventory = fruits.map(fruit => {
    console.log('checking ' + fruit.name + ' storage');
    return { name: fruit.name, storage : 1};
});

// ES5
var inventory = fruits.map(function(fruit) {
    console.log('checking ' + fruit.name + ' storage');
    return { name: fruit.name, storage : 1};
});

---

🔸 Destructuring (Array & Object)

• Destructuring은 배열과 객체에 패턴 매칭을 통한 데이터 바인딩을 제공한다.
• Destructuring은 할당 실패에 유연하며, 실패 시 undefined 값이 자동할당 된다.

• 객체 Destructuring
  ES6의 객체 Destructuring은 객체를 import 하거나 가져다 쓸 때 원하는 객체의 키 값만 사용할 수 있기 때문에 메모리 효율에 좋다.

// (1) 기존 객체 키값을 해체(ES6전 코드)
//객체선언
const animals = {
  cat: 'CAT',
  dog: 'DOG',
  tiger: 'TIGER'
}

//각각변수담기
const cat = animals.cat;
const dog = animals.dog;
const tiger = animals.tiger;

//각각호출
console.log(cat);
console.log(dog);
console.log(tiger);

// (2) 비구조화 할당방식 객체 선언 및 호출
// 비구조할당방식을 이용하면 4줄을 1줄 코드로 변경 가능,  패턴 매칭을 통한 데이터 바인딩의 결과
const { cat2, dog2, tiger2 } = {
  cat2: 'CAT',
  dog2: 'DOG',
  tiger2: 'TIGER'
};

console.log(cat2);
console.log(dog2);
console.log(tiger2);



// object matching
let { first: a, second: { fourth: b }, third: c }

// object matching 단축 표기
let {first, second, third} = getASTNode()
// `first`, `second` and `third`를 하나의 함수 scope에 바인딩한다



// spread 문법
const { cat3, ...animals3 } = {
  cat3: 'CAT',
  dog3: 'DOG',
  tiger3: 'TIGER'
};

console.log(cat3);  // CAT
console.log(animals3);  // {dog3: 'DOG', tiger3: 'TIGER'}

• 배열 Destructuring
  ES6의 배열 Destructuring은 배열의 각 요소를 배열로부터 추출하여 변수 리스트에 할당한다. 이때 추출/할당 기준은 배열의 인덱스이다.

// (1) 기존 배열 값을 해체(ES6전 코드)
const animalList = ['CAT', 'DOG', 'TIGER'];  //배열선언

//각각 변수담기
const cat = animalList[0];
const dog = animalList[1];
const tiger = animalList[2];

//각각호출
console.log(cat);
console.log(dog);
console.log(tiger);

// (2) 비구조화 할당방식 배열 선언 및 호출
// 비구조할당방식을 이용하면 4줄을 1줄 코드로 변경 가능,  패턴 매칭을 통한 데이터 바인딩의 결과
const [cat1, dog1, tiger1] = ['CAT', 'DOG', 'TIGER'];

console.log(cat1);
console.log(dog1);
console.log(tiger1);

// 배열 디스트럭처링 사용예시
let x, y, z;

[x, y] = [1, 2];
console.log(x, y); // 1 2

[x, y] = [1];
console.log(x, y); // 1 undefined

[x, y] = [1, 2, 3];
console.log(x, y); // 1 2

[x, , z] = [1, 2, 3];
console.log(x, z); // 1 3

// 기본값
[x, y, z = 3] = [1, 2];
console.log(x, y, z); // 1 2 3
// z의 기본값을 설정해 줌

[x, y = 10, z = 3] = [1, 2];
console.log(x, y, z); // 1 2 3
// x,y에 대한 기본값이 있어도 새로 지정된 값을 우선(최근) 적용

// spread 문법
[x, ...y] = [1, 2, 3];
console.log(x, y); // 1 [ 2, 3 ]

const animalList = ['CAT', 'DOG', 'TIGER'];
const [cat2, ...restAnimalList] = animalLis;
//앞의 요소 1개와 나머지 요소를 분리하고 싶을 때 위 예시 코드처럼 사용 가능

console.log(cat);  // CAT
console.log(restAnimalList);  // ["DOG", "TIGER"]

• 스프레드 오퍼레이터(Spread Operator)
  • 특정 객체나 배열의 값을 복제할 때 사용한다.
  • 기본형태

    let 새로운객체명 = {...기존객체명};
    let 새로운배열명 = [...기존배열명];

// Spread Operator 예시 코드

// obj 객체를 newObj 객체에 복제
let obj = {
  a: 10,
  b: 20
};

let newObj = {...obj};
console.log(newObj); // {a: 10, b: 20}


// arr 배열을 newArr 배열에 복제
let arr = [1,2,3];

let newArr = [...arr];
console.log(newArr); // [1, 2, 3]

---

🔸 Class

ES6에서 class 라는 문법이 추가 되었고, 기존의 prototype 기반으로 클래스를 만드는 것보다 명료하게 클래스를 만들 수 있게 되었다.

• 기존의 프로토타입 기반 객체지향(OOP) 패턴을 더 쉽게 사용할 수 있는 대체재.
• 클래스 패턴 생성을 더 쉽고 단순하게 생성할 수 있어서 사용하기도 편하고 상호운용성도 증가.
• 함수와 동일하게 클래스 선언(Class declarations)과 클래스 표현(Class expressions)으로 클래스를 만들 수 있다.

// 클래스 선언(Class declarations)
class Polygon {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
}

❗ 클래스 선언은 함수 선언과 달리 호이스팅 되지 않는다.

var p = new Polygon(); // Reference Error
class Polygon {}
// 클래스가 정의(선언)되기 전에 인스턴스를 먼저 정의하면 error 

---

//클래스 표현(Class expressions) ➡ 익명 클래스와 기명 클래스를 만들 수 있다.

// unnamed
var Polygon = class {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
};

// named
var Polygon = class Polygon {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
};

❗ 클래스 표현(Class expressions) 또한 클래스 선언(Class declarations)와 같이
호이스팅(hoisting)이 되지 않는다.

🐥 생성자(Constructor)
생성자 메소드는 객체의 생성과 초기화를 하는 특별한 메소드이다. 클래스에서 constructor 이름을 갖는 메소드는 하나여야 한다.

// constructor가 2개이기 때문에 ERROR!!!
var Polygon = class {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
    constructor(height2, width2) {
        this.height = height2 * 2 ;
        this.width = width2 * 2;
    }
};

🐥 super 키워드
생성자 메소드에서 super 키워드를 통해 상위 클래스의 생성자 메소드를 호출 할 수 있다.

class Polygon {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
}

class Square extends Polygon {
    constructor(length) {
        // length로 다각형의 넓이와 높이를 정의하기 위해 부모클래스의 생성자를 호출.
        super(length, length);
        // Note: 파생 클래스에서, 'this'를 사용하기 전에는 반드시 super()를 호출해야한다.
        // 그렇지 않을 경우 참조에러가 발생.
        this.name = 'Square';
    }

    get area() {
        return this.height * this.width;
    }

    set area(value) {
        this.area = value;
    } 
}

var test = new Square(4);
console.log(test.area);
// 생성자 메소드에서 this를 사용하기 위해서 super 메소드를 먼저 호출해야 한다!!!

🐥 클래스 상속(sub classing)
extends 키워드를 통하여 클래스를 상속 받아, 자식 클래스를 만들 수 있다.

// ES6의 클래스 상속
class Animal { 
    constructor(name) {
        this.name = name;
    }
 
    speak() {
        console.log(this.name + ' makes a noise.');
    }
}

class Dog extends Animal {  // Animal을 상속받아서 Dog라는 자식 클래스생성
    speak() {
        console.log(this.name + ' barks.');
    }
}

var d = new Dog('Mitzie');
d.speak();

cf) 프로토타입 기반의 클래스 상속
프로토타입 기반의 클래스도 extends 키워드를 통해 상속 할 수 있다.

// 프로토타입 기반의 클래스 상속
function Animal (name) {
    this.name = name;  
}

Animal.prototype.speak = function () {
    console.log(this.name + ' makes a noise.');
}

class Dog extends Animal {
    speak() {
        console.log(this.name + ' barks.');
    }
}

var d = new Dog('Mitzie');
d.speak();

---

🔸 Enhanced Object Literals

• ES6에서 객체 리터럴은 선언문에서 프로토타입 설정, foo: foo 선언을 위한 단축 표기법, 메서드 정의, super 클래스 호출 및 동적 속성명을 지원하도록 향상 되었다.

let obj = {
    // __proto__
    __proto__: theProtoObj,

    // ‘handler: handler’의 단축 표기
    handler,

    // Methods
    toString() {

     // Super calls
     return "d " + super.toString();
    },

    // Computed (dynamic) property names
  [ 'prop_' + (() => 42)() ]: 42
};

---

📌 Default parameters + Rest parameters + Spread Operator

파라미터에 기본 값을 설정할 수 있다.

function f(x, y=12) {
  // y값이 따로 지정되지 않는다면 기본값 12이다.
  return x + y;
}
f(3) // 15
가변인자를 사용가능하며, 배열로 치환시켜 준다. Rest parameters는 arguments 보다 직관성을 제공합니다.

function f(x, ...y) {
  // y is an Array ["hello", true]
  return x * y.length;
}
f(3, "hello", true) // 6
함수 호출 시 배열을 일련의 인자에 나누어 주입시켜 준다.

function f(x, y, z) {
  return x + y + z;
}
// Pass each elem of array as argument
f(...[1,2,3]) // 6

---

🔸 Iterators + For..Of

Iterator 객체는 사용자 정의의 반복을 가능하게 해준다. for..of 반복문이 ES6에서 추가 되었으며 for..in 반복문과 달리 iterator 기반의 컬렉션 전용 반복문이다.

for (variable of iterable) {
  statement
}


const array123 = ['a', 'b', 'c'];

for (const element of array123) {
  console.log(element);
}

// expected output: "a"
// expected output: "b"
// expected output: "c"

---

🔸 Template Literals

• 문법적으로 더 편하게 string을 생성할 수 있게 한다.
• Tagged template literals는 인젝션 공격 방어 혹은 문자열로 부터 상위 데이터 구조체 재조립 등을 위해 string 생성을 커스터마이징이 가능하게끔 해줍니다.

// Basic literal string creation
`In JavaScript '\n' is a line-feed.`

// Multiline strings
`In JavaScript this is
 not legal.`

// String interpolation
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

// Construct an HTTP request prefix is used to interpret the replacements and construction
POST`http://foo.org/bar?a=${a}&b=${b}
     Content-Type: application/json
     X-Credentials: ${credentials}
     { "foo": ${foo},
       "bar": ${bar}}`(myOnReadyStateChangeHandler);

---

🔸 Unicode

• 완전한 유니코드를 지원하기 위해 문자열에 새로운 유니코드 리터럴과 정규표현식에 u 모드가 추가되었다.
• 또한 21비트 형식까지 처리하기 위한 신규 API가 추가되었다. 이 추가된 기능은 JavaScript로 글로벌 앱을 만들 수 있도록 지원한다.

// same as ES5.1
"𠮷".length == 2

// new RegExp behaviour, opt-in ‘u’
"𠮷".match(/./u)[0].length == 2

// new form
"\u{20BB7}" == "𠮷"  == "\uD842\uDFB7"

// new String ops
"𠮷".codePointAt(0) == 0x20BB7

// for-of iterates code points
for(var c of "𠮷") {
    console.log(c); // 𠮷
}

---

🔸 Modules

• 언어 차원에서 컴포넌트 정의를 위한 모듈을 지원한다.
• 유명한 JavaScript 모듈 로더들(AMD, CommonJS)의 패턴을 적용시켰다.
• 런타임 동작은 호스트에 정의된 기본 로더에 의해 정의된다.
• 묵시적 비동기 형태로 요구되는 모듈들이 정상적으로 로드되기 전까지 코드가 실행되지 않는다.

🔸 Symbols

• 심볼(Symbol)은 객체 상태의 접근 제어를 가능하게 한다.
• Symbol은 새로운 원시 타입으로 이름 충돌의 위험 없이 속성(property)의 키(key)로 사용할 수 있다.
• Symbol은 고유(unique)하며, Object.getOwnPropertySymbols와 같은 reflection 기능들로 접근할 수 있기 때문에 private 하진 않는다 (for in나 Object.keys()로는 접근 불가).

---

🔸 Binary and Octal

2진법 (b), 8진법 (o) numeric 리터럴 형식이 추가되었다.

---

🔸 Reflect API

• Reflection API는 런타임 시 객체에 대해 작업을 수행할 수 있다.
• 프록시 트랩(proxy traps)와 같은 메타 함수들을 가지고 있다.
• Reflection은 프록시를 구현하는데 유용.

class Greeting {
    constructor(name) {
        this.name = name;
    }

    greet() {
      return `Hello ${name}`;
    }
}

function greetingFactory(name) {
    return Reflect.construct(Greeting, [name], Greeting);
}

greetingFactory('a'); // Greeting {name: "a"}

---

🔸 Tail Calls

마지막에 호출되는 함수가 호출 스택이 초과되게 하지 않는다. 재귀 알고리즘을 매우 큰 입력 값에서도 안전하게 만든다.

function factorial(n, acc = 1) {
    'use strict';
    if (n <= 1) return acc;
    return factorial(n - 1, n * acc);
}

// 현재 대부분의 자바스크립트 엔진에서 스택 오버플로우가 일어나지만,
// ES6에서는 입력 값이 커도 안전하다
factorial(100000);

---

🔸 Generators