개요
forEach와 map의 차이
forEach : 배열의 요소를 하나씩 탐색하며, Callback 함수를 수행
map : 배열의 요소를 하나씩 탐색하며, Callback 함수의 return 값을 모아둔다. Array를 새롭게 만든다.
1. map
배열 안의 각 요소를 변환할 때 사용, 이 과정에서 새로운 배열이 만들어짐
const datas = [3, 5, 4, 2];
const newDatas = datas.map((data) => data + 1);
datas 배열 내 값에 1씩 더해진 값을 요소로 갖는 newDatas 배열을 새로 생성한다.
2. filter
배열에서 특정 조건을 만족하는 값들만 따로 추출, 이 과정에서 새로운 배열이 만들어짐
const datas = [3, 5, 4, 2];
const newDatas = datas.filter((data) => data > 3);
3을 초과하는 수 5, 4를 담은 newDatas 배열을 새로 생성한다.
3. reduce
Arrary.reduce( (acc, cur) -> {}, 초기값)
초기값은 생략이 가능하다.
초기값에 숫자뿐만 아니라, 문자, 배열, 빈 객체도 넣을 수 있다.
첫 번째 인자는 accumulator(누산기를 의미)
결과 값을 해당 acc에 담아서 출력
두 번째 인자는 현재 값을 의미
최종 결과 값이 accResult에 들어간다.
reduce를 통해 map, filter, find.. 등등 거의 모든 메서드가 구현가능
const datas = [1, 2, 3, 4, 5];
const accResult = datas.reduce((acc, cur) => acc + cur);
초기 acc는 0, cur에 배열의 각 요소가 들어가고 acc에 누적하여 cur을 더해준다.
accResult는 15가 저장되어 있다.
예제
1. 제곱의 값을 모아둔 Array를 생성하기
코드
const arr = [1, 2, 3, 4, 5];
const newarr = arr.map((data) => data * data);
console.log(newarr);
출력
2. 문자열 배열 요소의 길이를 모아 둔 Array를 생성하기
코드
const arr2 = ["a", "bcd", "ef", "g"];
const newarr2 = arr2.map((str) => str.length);
console.log(newarr2);
출력
3. 배열 내 특정 값만 뽑아와 새로운 배열 생성하기
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 을 하드코딩 하고
• arr1 에는 arr 의 값 중 홀수만 담아서 console.log로 나타내기
• arr2 에는 arr 의 값 중 3보다 크고 9보다 작은 숫자들만 담아서 console.log로 나타 내기
코드
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const arr1 = arr.filter((n) => n % 2);
const arr2 = arr.filter((n) => 3 < n && n < 9);
console.log(arr1);
console.log(arr2);
출력
4. 배열의 중복된 개수 찾기
코드
const arr = ["피카츄", "라이츄", "파이리", "꼬부기", "피카츄", "파이리"];
const result = arr.reduce((acc, cur) => {
if (acc[cur]) {
acc[cur] = acc[cur] + 1;
} else {
acc[cur] = 1;
}
return acc;
},{});
console.log(result);
출력
실습
1. 버킷 리스트 작성하기
본인의 bucketList를 작성하고 done 속성이 false인 객체들만 새로운 Array에 저장 후, Array 출력하기
코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const bucketList = [
{
id: 1,
text: "퇴근 하기",
done: false,
},
{
id: 2,
text: "점심 먹기",
done: true,
},
{
id: 3,
text: "코딩 하기",
done: true,
},
{
id: 4,
text: "술 먹기",
done: false,
},
];
const doit = bucketList.filter((list) => !list.done)
console.log(doit);
</script>
</body>
</html>
출력
'웹(WEB) > 자바스크립트(JS)' 카테고리의 다른 글
| 자바스크립트 Callback 콜백 (0) | 2024.08.06 |
|---|---|
| 자바스크립트 비동기 프로그래밍 (0) | 2024.08.06 |
| 자바스크립트 Array의 순회 메서드 (0) | 2024.08.06 |
| 자바스크립트 객체 지향(프로토타입, 클래스) (0) | 2024.08.05 |
| 자바스크립트 Spread, Rest (0) | 2024.08.05 |