JS - 자주 쓰이는 메서드

📝 find()

배열에서 조건을 만족하는 첫 번째 요소를 반환합니다. 만족하는 요소가 없으면 undefined를 반환합니다.

문법

array.find(callback(element, index, array), thisArg);

• callback : 각 요소에 대해 실행할 함수입니다. 이 함수는 다음 세 가지 인수를 받습니다.
  1. element : 현재 처리 중인 배열 요소
  2. index : 현재처리 중인 요소의 인덱스
  3. array : find() 메서드가 호출된 배열

• thisArg : 선택 항목으로, callback을 실행할 때 this로 사용할 값입니다.
  
  

예제

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

// 짝수를 찾는 예제
const found = numbers.find(element => element % 2 === 0);

console.log(found); //2 (첫 번째 짝수)

특징

• find()메서드는 조건을 만족한는 첫 번째 요소만 반환합니다.
• 조건을 만족하는 요소가 여러 개 있어도, 첫 번째 요소만 반환하고 탐색을 멈춥니다.
• 배열이 변경되지 않으며, 원본 배열에 영향을 주지 않습니다.

---

📝 filter()

배열에서 조건을 만족하는 모든 요소를 새로운 배열로 반환합니다. 조건을 만족하는 요소가 없으면 빈 배열을 반환합니다.

문법

array.filter(callback(elemnent, index, array), thisArg);

• callback : 각 요소에 대해 실행할 함수입니다. 이 함수는 다음 세 가지 인수를 받습니다.

1. element : 현재 처리 중인 배열 요소
2. index : 현재 처리 중인 요소의 인덱스
3. array : filter() 메서드가 호출된 배열

• thisArg : 선택 항목으로, callback을 실행할 때 this로 사용할 값입니다.
  
  

반환 값

조건을 만족하는 요소로 구성된 새로운 배열. 조건을 만족하는 요소가 없다면 빈 배열을 반환합니다.

예제

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

const evenNumbers = number.filter(function(element){
	return element % 2 === 0;
});

console.log(evenNumbers);

// 화살표 함수 사용예시
const evenNumbers = numbers.filter(element => element % 2 === 0);
console.log(evenNumbers); // [2,4]

특징

• filter()는 원본 배열을 변경하지 않고, 조건을 만족하는 요소들만 포함된 새로운 배열을 반환합니다.
• 모든 요소를 순회하며, 조건을 만족하는 모든 요소를 필터링합니다.

---

📝 map()

각 요소에 대해 주어진 함수를 호출하여 그 결과를 새로운 배열로 반환하는 함수입니다.

기본 문법

const newArray = array.map(callback(currentValue, index, array));

• callback : 배열의 각 요소에 대해 실행할 함수입니다. 이 함수는 최대 세 가지 인수를 받을 수 있습니다.

1. currentValue : 현재 처리 중인 요소
2. index : 현재 요소의 인덱스(선택 사항)
3. array : map()메서드를 호출한 배열 자체(선택사항)

• newArray : 변환된 결과를 담은 변수입니다..

예제

1. 배열의 각 요소를 제곱으로 변환

const numbers = [1,2,3,4];
const result = numbers.map(num => num * num);
console.log(result); // [1,4,9,16]

2. 객체 배열에서 특정 속성만 추출

예를 들어, 객체 배열에서 각 객체의 이름만 추출하고 싶을 때 유용합니다.

const users = [
  {name : 'Joon', age : 25},
  {name : 'Cbum', age : 30},
  {name : 'Ramon', age : 30}
];
const names = user.map(user => user.name);
console.log(names); // ['Joon','Cbum','Ramon']

3. 인덱스를 이용해 각 요소에 문자열 추가

index 인수를 사용해 인덱스 기반으로 요소를 변환할 수 있습니다.

const fruits = ["apple","banana","cherry"];
const labeledFruits = fruits.map((fruit,index) => `${index + 1}. ${fruit}`);
console.log(labeledFruits); // ['1. apple','2. banana','3. cherry']

주의사항

• map()함수는 원본 배열을 변경하지 않고 새로운 배열을 반환합니다.
• 반환 값이 없는 forEach()와 달리 map()은 항상 배열을 반환하므로, 값 변환이 필요할 때 사용됩니다.

`