JS(2) - ES6 문법과 map, set

𝟏. 전개구문

배열이나 객체를 전개하는 문법이다.

// 배열
let arr = [1,2,3];

let newArr = [...arr, 4];
console.log(newArr) // [1,2,3,4]

// 객체
let user = {name: "nbc", age: 30};
let user2 = {...user}

user2.name = "nbc2"

console.log(user.name) // nbc
console.log(user2.name) // nbc2

JS(1)에서 객체 병합에서도 {...obj1, ...obj2}처럼 전개를 사용해서 병합하는 부분이 나온다.

𝟐. 나머지 매개변수

function func (a, b, ...args) {
	console.log(...args)
}

func(1, 2, 3) // 3
func(1, 2, 3, 4, 5, 6, 7) // 3 4 5 6 7

함수의 매개변수로 정해진 개수가 아닌 유동적으로 매개변수를 더 받을 수 있는 상황이라면 나머지 매개변수 ...args를 받아서 사용하면 된다.

𝟑. 일급객체 함수

JS에서 함수는 일급객체 (first-class object)로 취급되기 때문에, 다른 객체들처럼 다양한 연산에 사용되는 값으로서의 역할을 할 수 있다.

1. 함수의 매개변수
2. 변수에 할당
3. 객체의 프로퍼티에 할당
4. 배열의 요소로 할당
5. 함수로 반환 (return 값이 함수)

𝟒. Map과 Set

🧚 Map 정리

map에 대한 자세한 설명은 map mdn에 잘 나와있다.
먼저 정리하고 싶은 부분은

1. map 객체는 키-값 쌍과 키의 원래 삽입 순서를 기억한다. 따라서 인덱스가 존재하지 않고 for..of와 같은 반복문 사용시 키-값을 삽입한 순서대로 반복한다.

2. map의 key 값은 유일하다. 따라서 map끼리 병합하거나 배열과 병합할 때, 중복된 key가 있다면 가장 마지막에 병합된 key의 value를 저장하게 된다.

3. map을 for..of 돌리면 key, value를 사용할 수 있게된다. entrie를 쓰지 않고도 가능하다.

const myMap = new Map();
myMap.set(0, 'zero');
myMap.set(1, 'one');

// [key,value] 형태로 명시하여 사용
for (const [key, value] of myMap) {
  console.log(`${key} = ${value}`);
}
// 0 = zero
// 1 = one

// myMap.entries로 key와 value를 얻어도 된다.
for (const [key, value] of myMap.entries()) {
  console.log(`${key} = ${value}`);
}
// 0 = zero
// 1 = one

4. 특이하게 forEach를 사용하면 거꾸로 value, key 쌍으로 사용해야 한다.

myMap.forEach((value, key) => {
  console.log(`${key} = ${value}`);
});
// 0 = zero
// 1 = one

정리하자면 map 자료구조는 map.set(key,value)로 값을 저장하고, map.get(key)로 값을 가져올 수 있고, map.size로 map의 크기를 확인할 수 있고, map.has(key)로 특정 key가 존재하는지 boolean 값으로 확인가능하다.
맵 정렬(JS(1) 포스트)에서 정리했듯이 Array.from(map)을 통해 배열로 저장할 수도 있다.
가장 핵심은 iterator이기 때문에 for...of 반복문으로 키-값을 활용할 수 있다!

👛 Set 정리

set도 mdn 문서를 참고하는 것이 가장 좋다. set mdn 문서

정리하고 싶은 부분은

1. set 자료구조는 value만 저장하는데, 고유한 값만 저장하기 때문에 중복되지 않는 유일한 요소로만 구성된다.

2. 신기하게 set 자료구조는 for..of문에서 values()와 keys(), entries() 모두 사용가능한데 결론적으로는 value 값만 나온다. entries로 [key, value] 찍어도 둘 다 value다.

map과 마찬가지로 set.size로 set의 크기를 알 수 있고, set.has(value)로 boolean 값을 받을 수 있고, 값 추가는 set.add()로 할 수 있으며, set.values()를 사용하여 for...of 반복문을 돌릴 수 있다.