[SeSSAC] 웹 풀스택 영등포 5기 과정_javascript배우기(2)_map,filter,find메소드

안녕하세요,

점점 수업에 아는 내용보단 모르는 게 많아져서 열심히 감자가 되고 있습니다...

아무튼 저번 스토리에 이어서 배운 메소드에 대해 정리하도록 하겠습니다.

map, filter, find 메소드에 대해 기본 형태와 예시, 그리고 구현을 하게 된다면 어떤 식일지 생각을 써놓았습니다.

 

1. map 메소드

map 매소드는 함수에 쓰여진 연산 결과를 반환합니다.

대충 생김새는 이러합니다.

array.map(callback(currentValue[, index[, array]])[, thisArg])

array는 map함수를 실행할 배열을 의미하고,

callback은 각 요소마다 호출되는 '함수'로서 currentValue, index, array 세가지 요소를 가집니다.

 

currrentValue(현재 처리 중인 요소의 값), index(현재 처리 중인 요소의 인덱스 값), array(map을 처리 중인 배열)을 의미.

이 중 currentValue를 제외한 index와 array는 옵션으로 생략이 가능합니다.

(이는 하기의 filter와 find함수와 공통 내용이므로 이하 생략)

 

이 것만 보면 대체 뭐가 뭔지 모르겠고 어려우니 하기 예시를 들도록 하겠습니다.

const numbers = [1, 2, 3, 4, 5];

// 각 요소를 두 배로 만드는 새로운 배열 생성
const doubledNumbers = numbers.map((num) => num * 2);
console.log(doubledNumbers); // 출력: [2, 4, 6, 8, 10]

// 각 요소를 제곱하여 새로운 배열 생성
const squaredNumbers = numbers.map((num) => num ** 2);
console.log(squaredNumbers); // 출력: [1, 4, 9, 16, 25]

  보통 예시와 같이 새로운 변수에 map함수의 결과값을 대입하는 방식으로 많이 사용하는 것 같습니다.

 

그리고 각 요소를 돌면서 함수를 대입하는 로직을 보아하니, 아마 map함수를 구현하게 된다면 for문이나 while문 같은 반복문이 있지않을까하는 생각이 듭니다. 반복문으로 모든 배열의 요소를 돌면서 반환값을 차곡 차곡 쌓는 방식인 듯 합니다.

 

2. filter 메소드

filter 메소드는 배열 내부에서 조건에 부합하는 요소를 찾아서 반환합니다.

마찬가지로 생김새는 이러합니다.

array.filter(callback(currentValue[, index[, array]])[, thisArg])

눈치 채셨을 지 모르나, 여기서 [ ] 괄호 안에 들어있는 요소는 생략이 가능하다는 뜻입니다.

array는 마찬가지로 filter를 적용할 배열을 의미합니다.

callback위치에 있는 함수를 통해 해당 함수 안에 있는 조건식을 통과한 요소만 걸러내게 됩니다.

하기 예시를 들겠습니다. 

const numbers = [1, 2, 3, 4, 5];

// 짝수만 포함된 새로운 배열 생성
const evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log(evenNumbers); // 출력: [2, 4]

// 특정 범위의 숫자만 포함된 새로운 배열 생성
const numbersInRange = numbers.filter((num) => num >= 2 && num <= 4);
console.log(numbersInRange); // 출력: [2, 3, 4]

만약 callback함수에 부합하는 요소를 단 한개도 찾지 못할 경우, 그냥 빈 배열을 반환합니다.

 

  이 함수도 함수 자체에 for문 포함되어 요소를 하나씩 끝까지 돌면서 조건 callback함수에 넣어보고 충족한다면 반환해서 새로운 배열에 넣는 방식으로 많이 사용하는 것 같습니다.

 

3. find 메소드

find 메소드는 배열 내부에서 조건에 부합하는 '첫번째 요소만' 찾아서 반환합니다.

정확한 생김새는 하기와 같습니다.

array.find(callback(currentValue[, index[, array]])[, thisArg])

예시를 봅니다.

const numbers = [1, 2, 3, 4, 5];

// 짝수를 찾아 반환
const firstEvenNumber = numbers.find((num) => num % 2 === 0);
console.log(firstEvenNumber); // 출력: 2

// 특정 범위의 숫자를 찾아 반환
const numberInRange = numbers.find((num) => num >= 3 && num <= 5);
console.log(numberInRange); // 출력: 3

보시면 짝수에 해당하는수를 찾아서 전부 반환하는 것이 아닌, 첫번째 짝수만 반환하여 출력합니다.

이는 filter함수와 달리 딱 하나만 찾는다는 의미에서 다른 점인듯합니다.

그리고 find메소드는 만약 배열에서 callback함수 조건에 해당하는 요소를 하나도 찾지 못할 경우 undefined를 반환합니다.

 

만약이 find메소드를 구현한다면 for문 또는 while문을 돌면서 딱 하나를 찾는다면 그 값을 반환하고 반복문을 break해서 탐색을 멈추지 않을까라는 생각입니다.