TIL (2024.03.19) - JavaScript 문법 (Map, Set, Array)

 

안녕하세요. pitang입니다.

 

어제는 문자열 오늘은 Map객체, Set객체 그리고 Array 메서드에 대해 정리하도록 하겠습니다.

 

Map

 

key, value에 해당하는 자료형태이다.

 

1. set

맵 객체.set(key, value);

let map = new Map();

map.set(1, "value1");
map.set(2, "value2");

console.log(map);
=> return Map(2) {1=>"value1", 2=>"value2");

 

 

add 형태, 값을 추가한다.

 

2. get

맵 객체.get(key);

let map = new Map();

map.set(1, "value1");
map.set(2, "value2");

console.log(map.get(2));
=> return value2

 

key에 해당하는 value를 리턴한다.

 

3. has

맵 객체.has(key);

let map = new Map();

map.set(1, "value1");
map.set(2, "value2");

console.log(map.has(2));
=> return true
console.log(map.has(3));
=> return false

 

 

key에 해당하는 값이 있는지 체크하고 true/false로 리턴한다.

 

 

4. delete

맵 객체.delete(key);

let map = new Map();

map.set(1, "value1");
map.set(2, "value2");

map.delete(2);

console.log(map.has(2));
=> return false

 

key에 해당하는 값을 제거한다..

 

5. size

맵 객체.size;

let map = new Map();

map.set(1, "value1");
map.set(2, "value2");

console.log(map.size);
=> return 2

 

map의 개수를 구한다. 함수의 형태가 아닌 것 주의 필요.

 

6. Map 객체 순환하기

for(let [key, value] of 맵 객체) {...}

let map = new Map();

map.set(1, {id:"aaa", pw:1111});
map.set(2, {id:"bbb", pw:2222});
map.set(3, {id:"ccc", pw:3333});

for(let[key, value] of map) {
	console.log(value.id);
}
=> return
aaa
bbb
ccc

 

 

 

7. Map 정렬하기

let arr = [...맵 객체];
arr.sort(...);
let newMap = new Map(arr);

let map = new Map();

map.set(1, {id:"aaa", pw:1111});
map.set(2, {id:"bbb", pw:2222});
map.set(3, {id:"ccc", pw:3333});

let arr = [...map];
arr.sort((a,b) => b[1].pw-a[1].pw);

let newMap = new Map(arr);

console.log(newMap);
=> return
Map(3) {
  3 => { id: 'ccc', pw: 3333 },
  2 => { id: 'bbb', pw: 2222 },
  1 => { id: 'aaa', pw: 1111 }
}

 

형태=> 배열로 만들어서 정렬하고 다시 Map 객체로 바꾸는 것이 포인트이다.

 

Set

 

중복을 허용하지 않는 value를 가진 자료구조이다.

 

1. add

셋 객체.add(value);

let set = new Set();

set.add("value1");
set.add("value2");

console.log(set);
=> return Set(2) {"value1", "value2"}

 

2. has

셋 객체.has(value);

let set = new Set();

set.add("value1");
set.add("value2");

console.log(set.has("value1");
=> return true
console.log(set.has("value3");
=> return false

 

3. delete

셋 객체.delete(values);

let set = new Set();

set.add("value1");
set.add("value2");

set.delete("value2");

console.log(set.has("value2"));
=> return false

 

4. size

셋 객체.size;

let set = new Set();

set.add("value1");
set.add("value2");

console.log(set.size);
=> return 2

 

Map 객체와 같이 함수 형태가 아니다!

 

5. Set 객체 순환하기

for(let value of 셋 객체) {...}

let set = new Set();

set.add({id:"aaa", pw:1111});
set.add({id:"bbb", pw:2222});
set.add({id:"ccc", pw:3333});

for(let value of set) {
	console.log(value.id);
}
=> return
aaa
bbb
ccc

 

6. Set 정렬하기

let arr = [...셋 객체];
arr.sort(...);
let newSet = new Set(arr);

let set = new Set();

set.add({id:"aaa", pw:1111});
set.add({id:"bbb", pw:2222});
set.add({id:"ccc", pw:3333});

let sortArr = [...set];
sortArr.sort((a,b) => b.pw-a.pw);

let newSet = new Set(sortArr);
console.log(newSet);
=> return
Set(3) {
  { id: 'ccc', pw: 3333 },
  { id: 'bbb', pw: 2222 },
  { id: 'aaa', pw: 1111 }
}

 

Map 객체와 마찬가지이다. 배열로 만들어 정리하고 다시 Set으로 가져온다.

 

Array

 

1. forEach

배열.forEach((element, index) => {...});

let arr = [{id:"aaa", pw:1111},{id:"bbb", pw:2222},{id:"ccc", pw:3333}];

arr.forEach((element, index) => {
	console.log("element=", element);
    console.log("index=", index);
}
=> return
element={id:"aaa", pw:1111}
index=0
element={id:"bbb", pw:2222}
index=1
element={id:"ccc", pw:3333}
index=2

 

2. map

대체적으로 map은 배열에서 어떤 과정을 거친 배열을 만들어낼 때 많이 사용한다.

순환하고 있는 요소를 리턴 값과 바꾼다?

배열.map((element,index)=> {
	...
    return 만든 배열 값
})

let arr = [{id:"aaa", pw:1111},{id:"bbb", pw:2222},{id:"ccc", pw:3333}];

let mapArr = arr.map((element, index) => {
	element.pw = element.pw*2;
    return element;
}
=> return
[
	{id:"aaa", pw:2222}
    {id:"bbb", pw:4444}
    {id:"ccc", pw:6666}
]

 

3. filter

배열.filter((element,index)=> {
	...조건
    return true;
    ...조건
    return false;
})

let arr = [{id:"aaa", pw:1111},{id:"bbb", pw:2222},{id:"ccc", pw:3333}];

let filterArr = arr.filter((element, index) => {
	if(element.pw>2000) return true;
    else return false;
}
console.log(filterArr);
=> return
[
    {id:"bbb", pw:2222}
    {id:"ccc", pw:3333}
]

 

4. reduce

함수를 실행하고 하나의 결과값을 반환한다.

배열.reduce((acc, cur)=> {
    return 변수로 바꿀 값
}, 초기값)

let arr = [{id:"aaa", pw:1111},{id:"bbb", pw:2222},{id:"ccc", pw:3333}];

let sumArr = arr.reduce((a, b) => {
    return a+b.pw;
}, 0);
console.log(sumArr);
=> return 13332

 

 

 

 

 

감사합니다.