콜백함수. Map/ Filter/Find

map:

배열을 순회하며 지정된 콜백 함수를 적용하여 각 요소를 변환하고, 그 변환된 값을 모아서 새로운 배열로 매핑(mapping)한다.

구조

arr.map(callbackFn((currentValue, index, array)), [thisArg])

1. callbackfn 매개변수

• currentValue (필수 값): 처리할 현재 요소
• index (선택 사항): 처리할 현재 요소의 인덱스 (생략 가능)
• array (선택 사항): map() 함수를 호출한 배열 (생략 가능)

2. thisArg:

• callbackFn 함수 내부에서 사용할 this 값으로 사용할 값 (생략 가능)
  
  
  

예제)

1. 각 숫자의 제곱을 구하는 문제

const numbers = [1, 2, 3, 4];
//한 줄로 표현
const squares = numbers.map((item) => item * item);

//두 줄로 표현
const squares = number.map((item) => {
  return item * item
});
console.log(squares); // [1, 4, 9, 16]

2. 각 객체의 사용자 이름만을 포함하는 새 배열 생성

const users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 },
];
const names = users.map((item) => item.name);

console.log(names); // ["Alice", "Bob"]

filter:

주어진 조건에 만족하는 모든 요소를 모아 새 배열로 매핑(mapping)한다.

구조
arr.filter(callbackFn(element[, index[, array]])[, thisArg])

1. callbackfn 매개변수

• element: 현재 처리 중인 배열 요소
• index: 현재 처리 중인 배열 요소의 인덱스 (생략 가능)
• array: filter()를 호출한 배열 자체 (생략 가능)
  
  

2. thisArg:
callbackFn 함수 내부에서 사용할 this 값으로 사용할 값 (생략 가능)

• 필터링된 요소가 없으면 빈 배열로 출력
• true를 반환하면 해당 요소가 필터링된 배열에 포함되고, false를 반환하면 해당 요소가 필터링된 배열에 포함되지 않습니다.

예제)

1. 주어진 숫자 중 짝수인 경우에만 출력

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

//한줄로 표현
const evens = numbers.filter((item) => item % 2 === 0 ? true : false;

//두줄로 표현
const evens = numbers.filter((item) => {
return item % 2 === 0 ? true : false;
});

console.log(evens); // [2, 4, 6]
                            

2. isActive가 true인 사용자 중 30세 이상인 사용자를 구하는 문제

 
 const users = [
    {name: "Alice", age: 25, isActive: true},
    {name: "Bob", age: 30, isActive: true},
    {name: "Charlie", age: 35, isActive: false}
];
const activeUsersOver30 = users.filter((item) => {
   return item.isActive && item.age >= 30 ? true : false;
});

console.log(activeUsersOver30); // [{name: "Bob", age: 30, isActive: true}]

Find:

조건에 만족하는 첫 번째 요소의 값을 반환합니다. 만족하는 값이 없으면 undefined가 반환
구조:
arr.find(callbackFn(element[, index[, array]])[, thisArg])

1. callbackfn 매개변수:

• element: 현재 처리 중인 배열 요소
• index: 현재 처리 중인 배열 요소의 인덱스 (생략 가능)
• array: find()를 호출한 배열 자체 (생략 가능)

2. thisArg:
callbackFn 함수 내부에서 사용할 this 값으로 사용할 값 (생략 가능)

findIndex(): 배열에서 찾은 요소의 인덱스가 필요한 경우에 사용
indexOf(): 값의 인덱스를 찾아야 하는 경우에 사용

TIP <알아두기>

• const로 선언된 변수 evens에 map() 함수의 반환 값을 할당 가능

const evens = array.map(); 

• const로 선언된 변수 evens를 초기화하고 나중에 재할당 불가능

const evens = [];
evens = numbers.filter((item) => (item % 2 === 0 ? item : null));
 console.log(evens);  // TypeError: Assignment to constant variable.에러 발생

for, forEach, map 관련 추가 내용 정리

👇👇👇
https://velog.io/@leejungoo1396/for-forEach-map-%EC%B0%A8%EC%9D%B4