Fall in IT.

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

프로그래밍언어/Javascript & Typescript

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

D.Y 2018. 6. 25. 16:26
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/


모두 즐거운 코딩하세요~

Comments