map, filter

기존 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);