오늘 배운 것
ES6 문법
1. 구조분해할당(destructing)
1) 배열에 저장
>>> let [value1, value2] = [1, 'val'];
>>>let arr = ['val1', 'val2', 'val3'];
>>>let [x, y, z] = arr; // x => 'val1', y => 'val2', z => 'val3'
2) 객체에 저장
let { key1, key2} = {
key1: val1,
key2: val2
};
3) 새로운 이름으로 저장
let user = {
name: 'john',
age: 20
};
let { name: newName, age: newAge } = user;
console.log("newName : ", newName); // newName : john
console.log("newAge : ", newAge); // newAge : 20
2. 단축속성명 (property shorthand)
const name = 'john';
const age = 20;
const obj = {
name, // 이전에 선언한 변수와 속성 이름이 같다면 생략 가능 => obj.name === 'john'
age: age
}
const obj2 = { name, age }; // 단축속성명을 사용한 객체 선언
3. 전개구문 (spead operator)
let arr = [1, 2, 3];
console.log(arr); // [1, 2, 3]
console.log(...arr); // 1 2 3
let newarr = [...arr, 4];
console.log(newarr) = [1, 2, 3, 4];
let user = {
name : 'john',
age : 30
}
let user2 = {...user}
console.log(user2); // { name : 'john', age : 30 }
4. 나머지 매개변수 (rest parameter)
function func(a, b, c, ...args){
console.log(a, b, c);
console.log(args);
}
func(1, 2, 3, 4, 5, 6, 7);
// 1 2 3
// [4, 5, 6, 7];
5. 템플릿 리터럴 (template literal)
console.log(`Hello World! ${3 + 3}`); // Hello World! 6
***작은 따옴표가 아니고 백틱임에 주의***
-여러 줄에 걸친 텍스트를 사용할 수 있다
일급 객체로서의 함수
### 일급객체(first-class object)란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다.
-함수를 매우 유연하게 사용할 수 있다
1. 변수에 함수 할당 // c#의 delegate와 같은, c++의 함수포인터와 같은 개념
const foo = func(){
console.log('Hello');
}
*** 콜백함수 : 매개변수로써 쓰이는 함수 ***
*** 고차함수 : 함수를 인자로 받거나 반환하는 함수 ***
const person = {
name : 'john',
age : 31,
print : () => { // 람다식은 this를 바인딩하지 않는다
console.log(`name: ${this.name}, age: ${this.age}`); // 이름과 나이가 undefined로 출력됨
}
};
Map과 Set
Map (https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Map)
-key : value 구조이지만, key에 어떤 객체도 들어올 수 있음
=> 키가 정렬된 순서로 저장되기 때문
- 추가, 삭제, 검색 기능 제공
const myMap = new Map(); // map 선언
myMap.set('key', 'value'); // 맵에 엔트리 추가
const myValue = myMap.get('key'); // 맵에서 엔트리 획득
반복자(iterator)를 이용한 map 순회
for(const key of myMap.keys()){
...
}
for(const value of myMap.values()){
...
}
for(const entry of myMap.entries()){
...
}
myMap.size // map의 사이즈
myMap.has(target) // myMap에 target이 있는지 확인
Set(집합) (https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Set)
-고유한 값을 저장하는 자료구조
-값이 중복되지 않는다
-추가, 삭제, 검색 기능 제공
const mySet = new Set(); // set 선언
mySet.add(value); // set에 요소 추가, 중복이 있으면 추가하지 않음
for(const value of mySet.values()){ // set의 value를 순회
...
}