일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- Infra
- intellij ide
- AWS
- Logrus
- 대규모 시스템 설계
- 윈도우키보드
- goland
- Bastion Server
- 컴포지트패턴
- Intellij
- GoF
- Helm V3
- go
- Kubernetes
- golang
- http 413
- 배포 파이프라인
- tenneling
- GoF 디자인패턴
- body size
- 디자인패턴
- Golines
- 배포 프로세스
- notification system
- AWS Infra
- Buffered channel
- gitops
- UnBuffered channel
- apollo router
- System Design
Archives
- Today
- Total
Fall in IT.
자바스크립트 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() {
runTimeout() {
setTimeout(function() {
this.printData();
}, 200);
},
}, 200);
},
printData() {
console.log('hi codesquad!');
}
}
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/
모두 즐거운 코딩하세요~
'프로그래밍언어 > Javascript & Typescript' 카테고리의 다른 글
자바스크립트 최대값/최소값 구하기 (0) | 2018.06.26 |
---|---|
async/await이 promise보다 좋은 이유 (0) | 2018.06.26 |
자바스크립트 프로토타입, 클로저, 디바운싱 알아보기 (0) | 2018.05.26 |
알고리즘 문제 풀때 유용한 javascript 함수들 (0) | 2018.05.20 |
기본적으로 알아야할 javascript 개념 (0) | 2018.04.17 |
Comments