React/이론
map, filter
2주녘
2023. 8. 31. 13:36
반응형
기존 for문
기존 배열을 정의하고 for 문을 사용하여 출력할 수 있습니다.
const numArr = [1, 2, 3, 4];
// for문을 이용한 배열 처리
for(let i = 0; i < numArr.length; i++){
console.log(numArr[i]);
}
[출력결과]
// 1
// 2
// 3
// 4
map 함수 이용
1) 배열 정의
const numArr = [1, 2, 3, 4];
// 배열.map()을 이용
const numArr2 = numArr.map();
// 배열.map(함수) 이용
const numArr2 = numArr.map(()=>{});
.map( ) 괄호 안에 함수를 입력합니다.
함수는 임의의 이름을 붙인 인수를 받을 수 있고 거기에 배열의 값이 들어갑니다. 그리고 반환하는 요소를 함수안에서 return 합니다.
const numArr = [1, 2, 3, 4];
// 인수 num에 배열의 값이 저장되고 return 으로 반환
const numArr2 = numArr.map((num)=>{
return num;
});
console.log(numArr2); // [1, 2, 3, 4]
이 상태는 numArr2에 numArr을 그대로 저장한 것이나 다름 없으므로 맨 위의 for 문과 같이 수정해줍니다.
const numArr = [1, 2, 3, 4];
const numArr2 = numArr.map( num => console.log(num) );
[결과]
filter 함수
map 함수와 비슷한 filter 함수에 대해 알아봅시다.
filter 함수는 map 함수의 이용방법과 거의 동일하지만 return 뒤에 조건식이 들어가는 것에서 차이가 납니다.
다음 코드는 배열에서 홀수만 출력하는 예입니다.
// 배열 정의
const numArr = [1, 2, 3, 4, 5, 6];
// 홀수만 추출
// 2로 나누어 나머지가 1이면 홀수!
const newNumber = numArr.filter((num) => {
return num % 2 === 1;
})
console.log(newNumber); // [1, 3, 5]
index 다루어보기
반복문을 사용해 배열을 처리할 때 몇 번째 요소인지 알아야하는 경우가 생깁니다.
for문을 사용하면 애초에 index 값을 이용하기 때문에 순서에 대한 개념을 이용할 수 있습니다.
// 배열 정의
const nameArr = ["철수", "영희", "민수"];
// for 문을 사용한 index 이용
for(let index = 0; index < nameArr.length; index++){
console.log(`${index + 1} 번째 사람의 이름은 ${nameArr[index]} 입니다.`)
}
같은 코드를 map 함수를 이용해 처리해봅시다.
// 배열 정의
const nameArr = ["철수", "영희", "민수"];
// map 함수 이용
let newArr = nameArr.map((name, index)=>{console.log(`${index + 1} 번째 사람의 이름은 ${name} 입니다.`)});
map 함수를 이용한 활용예
이름이 철수, 영희, 민수 라는 배열이 선언되어있고, 철수 이름 뒤에는 님이라는 존칭이 붙은 새로운 배열을 생성해보자.
// 배열 정의
const nameArr = ["철수", "영희", "민수"];
// map 함수 이용
let newNameArray = nameArr.map((name) => {
if(name === "철수") {
return `${name}님`;
} else {
return name;
}
})
console.log(newNameArray);
반응형