자바스크립트 ES6(ES2015) 내용 정리2

1. for of

    - String을 순회할때 사용해도 좋다. "ASDF"를 for of로 돌릴 경우 "A", "B" ... 가 순회 된다.

2. startWith, endWith

     - 메소드를 사용하여 시작 문자열, 끝문자열을 매칭해볼 수 있다.

3. include

     - 메소드를 사용하여 문자열 포함 여부를 확인할 수 있다.

     - a = "dylee"; a.includes("dy"); // true

4. const 

    - ES6에서는 const를 기본으로 사용하고, 변경이 필요한 변수에만 let을 사용하는 것을 추천한다.

    - const 변수는 immutable 하다. 하지만, 값에 대한 immutable은 아님!

    - 즉, Object, Array(사실 object임)의 경우 해당 값이 추가되거나 삭제되는 것은 가능하다.

5. spread operator

    - let pre = ['a', 'b', 'c'];

    - let newData = [...pre];

    - 두개의 값은 다르다. spread operator를 사용하여 배열을 복사한 것이다.

    - 사용 예제

6. spread operator 활용

    - let pre = ['a', 'b', 'c'];

    - let newData = [1, 2, ...pre, 4];

    - 배열을 합칠때 유용하다.

7. spread operator 활용2

     - 기존 방식

     - function sum(a,b,c) {

          return a+b+c;

      }

     - let pre = [100, 200, 300];

    - console.log(sum.apply(null, pre));

    - 새로운 방식

    - console.log(sum(...pre));  // ...pre === 100, 200, 300

    - 매개변수를 쉽게 넘길 수 있다.

8. arguments와 같은 array-like 객체를 진짜 배열로 만들기

    - Array.from(arguments)

9. Destructuring 

    - Destructuring Array

    - let arr = [1,2,3,4];

    - let [jisu,,jung] = arr;

    - jisu에 1이 할당되고, jung에 3이 할당 됩니다.

    - Destructuring Object

    - let obj = {

          name: "crong",

          address: "korea",

          age: 10

     }

    - let {name: myName, age: myAge} = obj;

    - // 혹은 let {name, age} = obj;

    - addEventListener에서 event object에서 target만 추출하여 뽑아낼 수 있다.

    - document.querySelector("div").addEventListener("click", function({target}) {

          console.log(target);

     });

10. Set

    - 중복없이 유일한 값을 저장하려고 할때. 이미 존재하는지 체크할때 유용하다.

    - let mySet = new Set();

    - console.log(toString.call(mySet));

    - mySet.add('crong');

    - mySet.add('crong');

    - console.log(mySet.has('crong'));

    - mySet.delete('crong');

    - WeakSet

    - 참조를 가지고 있는 객체만 저장이 가능하다.

    - let arr = [1,2,3,4];

    - let ws = new WeakSet();

    - ws.add(arr);

11. Map & Weak Map

    - map은 key/value, 딕셔너리 형태로 저장된다.

    - let wm = new WeakMap();

    - let myfunc = function() {};

    - wm.set(myfun, 0);

    - wm.get(myfun);

    - private 변수 만들기

12. template literals

    - cosnt tempalte = fn`<div>welcome ${data[0].name} ! </div>

     <h2>주문가능항목</h2><div>${data[1].items}</div>`;

    - function fn(tags, name, items) {

          if( typeof items === 'undefined') {

              items = '주문 가능한 상품이 없습니다!';

          }

          return (tags[0] + name + tags[1] + items + tags[2]);

     }

13. arrow function

     - arrow function을 쓸때와 쓰지 않을때 this context는 다르다.

     - const myObj = {
          runTimeout() {
              setTimeout(function() {

                   this.printData();
              }, 200);
          },

          printData() {
              console.log('hi codesquad!');
          }
     }

    - myobj.runTimeout(); //error (window 객체에 printData()가 정의되어 있지 않음)

    - setTimeout안에 함수를 arrow function으로 수정하면 this가 현재 obj의 context를 가르키게 되므로 정상 동작함.

14.  rest parameters

    - 매개변수가 가변적으로 들어가는 함수에서 arguments를 사용하는데, arguments는 배열이 아니기 때문에 처리하기 불편합니다.

    - rest parameters를 사용하면 쉽게 해결할 수 있습니다.

    - function checkNum(...argArray) {

          console.log(toString.call(argArray));
     }

15. Proxy interception

    - 왜 쓰는건지 잘 모르겠음.

참고

ES2016 & ES2017자료, https://gomugom.github.io/ecmascript-proposals-1-intro/

모두 즐거운 코딩하세요~