링크: https://www.udemy.com/javascript-es6-tutorial/learn/v4/overview
강의주제: ES6에 대해 다룸.
가격: $10
걸린시간: 2일 (약 6시간)
평가: 꽤나 괜찮은 강의. 모든게 따라하기 식이며, PPT를 쓴다던가 그런거 없음. 다만 가끔 도식화 자료를 통해 설명하곤 하는데 설명이 꽤나 괜찮음. 일단 모든 새로운 feature에 대해 이걸 대체 어디다 쓰는지에 대해 설명해줘서 이해가 쉬움.
강의요약 (내맘대로..)
-
Array Helper Methods
- forEach
- map
- filter
- find
- every – 모두가 조건 만족
- some – 일부분만 조건 만족
- Reduce – array를 돌면서 하나로 reduce
-
Let vs const
- es6에선 보통 var안씀.
- const는 변경 불가
- let은 reassign가능.
-
String Template
- 백슬래쉬(`)를 사용해서 string 내에 변수를 직접 삽입가능. ${변수명} 으로.
-
Arrow Function
- const 함수명 = (파라미터들) => {내용}
- (혹은 인라인으로) const 함수명 = 파라미터들 => 내용
- 오브젝트 내의 함수에서 this를 통해 오브잭트 내의 변수를 사용 가능하게 함.
-
Enhance Object Literal
-
- function createBookShop(inventory){
- return{
- inventory: inventory,
- inventoryValue: function(){
- return this.inventory.reduce((curr, book) => curr += book.price, 0);
- },
- priceForTitle: function(title){
- return this.inventory.find((book) => book.title === title).price;
- }
- }
- }
- 위와 같은거에서 function을
- function createBookShop(inventory){
- return{
- inventory: inventory,
- inventoryValue(){
- return this.inventory.reduce((curr, book) => curr += book.price, 0);
- },
- priceForTitle(title){
- return this.inventory.find((book) => book.title === title).price;
- }
- }
- }
- 이와 같이 :function 생략 가능.
-
key와 value가 같으면 그냥 key만 쓰면됨.
-
Ex) function saveFile(url, data){
$.ajax({method: ‘POST’, url: url, data: data});
}위와 같은것을
function saveFile(url, data){
$.ajax({method: ‘POST’, url, data});
} - 이처럼 사용 가능.
-
Ex) function saveFile(url, data){
-
-
Default function
- 기본함수. 인자에 = 을 통해 기본값 할당 가능.
-
Rest and Spread
-
Function addNumbers(a,b,c,d,e){
const numbrers = [a,b,c,d,e];
return numbers.reduce((sum, numbrer) => {
return sum + number;
}, 0
}
addNumber(1,2,3,4,5) - 위와 같이 하면 매번 인자가 추가될 때마다 a,b,c,d,e를 늘려줘야함.
- rest를 쓰면 해결. … 을 붙인다.
-
Function addNumbers(…numbers){
return numbers.reduce((sum, numbrer) => {
return sum + number;
}, 0
}
addNumber(1,2,3,4,5) - Concat 대신 사용
- const defaultColors = [‘red’,’green’];
- const userFavoriteColors = [‘orange’,’yellow’];
- defaultColors.concat(userFavoriteColors);
- => 이렇게 하는 대신에
- […defaultColors, …userFavoriteColors];
- 이것도 똑같은 역할을 함. 즉, spread operator
-
Function addNumbers(a,b,c,d,e){
-
Destructor
- const {a,b,c} = obj obj안에 a,b,c 인자를 a,b,c로 나눠줌
- 배열: const [a,…last] = array array안에 첫번째 인자만 a로 가고 나머지는 last로 감.
-
- 이 경우는 mixin도 같이 사용.결과는 Mountain View
- Destructor 오브젝트를 함수 인자로 넘길때, 순서는 상관없음.
-
- 배열을 destructor할때는 이런식으로.
-
Class
-
Class Car{
constructor({title}){
this.title = title;
}
drive(){
return 'vroom';
}
}const car = new Car({title: 'Toyota'});
car - 상속
-
class Toyota extends Car{
constructor(options) {
super(options);
this.color = options.color;
}
honk() {
return 'beep';
}
}const toyota = new Toyota({color: ‘red’, title: ’Toyota'});
toyota.honk();
-
Class Car{
-
Generator
-
For…of loop
-
for(let color of colors){
console.log(color);
}
-
for(let color of colors){
- 함수명 앞에 *가 붙으면 Generator
-
- 이런식으로.
-
왜쓰나?
- Step-by-step 으로 함수를 실행하기 위해.
- Yield* -> Generator 안에 Generator를 yield.
-
- 위와 같이, engineeringTeam안에 testingTeam이 있을때, 원하는 값만 뽑아내기 위해서도 사용.함수를 통해 object를 컨트롤 하기 위함이라고 생각.
-
- Symbol.iterator 를 사용해서 위와같이도 표현 가능. 변수를 숨기기에 좋음.
- 실용적인 예: 코멘트 같은게 Node의 tree로 표현됨.
-
- 위와 같이, 하위 노드에서 또 하위의 노드를 yield하는데에 Symbol.iterator가 사용될 수 있음.
-
For…of loop
-
Promise & Fetch
- Ajax호출 등에서 느려짐을 방지하기 위해 사용
-
3 States of Promises
- Unresolved: 무언가 끝나기를 기다림.
- resolved: 무언가 잘 끝남
- Rejected: 무언가 잘못되게 끝남
- Promise – resolved – then
- Promise – rejected – catch
-
기본형
- promise = new Promise((resolve, reject) => {
- reject();
- });
- promise
- .then(() => console.log('finally finished'))
- .then(() => console.log('also running'))
- .catch(() => console.log('error'));
- 위와 같은 식으로, 기본적으로 resolve와 reject를 가지고 이 안에서 어떻게 하냐에 따라 then의 경우는 resolved로 묶이고, catch의 경우는 reject로 묶인다.
