유용한 배열 메서드 3가지

📖 .find()

.find 는 배열 내에서 항목을 찾는데 쓰인다.
✍

function findFruit(currFruit) {
  return currFruit === "apple";
}
const fruits = ["banana", "cherry", "apple", "melon"];
const apple = fruits.find(findFruit);

.find 는 필요한 파라미터가 하나뿐이고 그것은 callback function 이다.
cllback function은 호출하는 것이 아니고 함수의 이름만 적으면 된다.
Javascript 가 인수와 함께 findFruit 함수를 호출한다.
즉 Javascript 가 하는 작업은 다음과 같다.
✍

const apple = fruits.find(
  findFruit("banana")
  findFruit("cherry")
  findFruit("apple")
  findFruit("melon")
);

작동하지 않지만 이해하기 쉽게 예를 든 것이다.
callback function 에 있는 파라미터 이름은 중요하지 않고 중요한 것은 Position 인 것이다.
findFruit 함수가 무엇을 하는지 보면 각 메서드에는 callback function 이 수행하는 작업에 대한 규칙이 있다.
.find 의 규칙은 callback function 이 true 를 반환할 경우 찾고있던 항목을 찾았음을 의미한다.
findFruit 함수에서 true 가 되는 조건은 currFruit 가 apple 과 같으면 되고 그렇지 않을 경우 false 가 된다.
findFruit 함수가 true 를 return 한 후 처리중인 현재 항목은 .find 함수의 결과 값이 되고
이것이 const apple 이 보유하게 될 값이다. 📌true or false

---

📖 .map()

.map 을 사용하면 배열의 요소를 가져와 변환한 다음 새 배열에 배치할 수 있다.
.map 은 source 배열을 수정하지 않고 변환한 값으로 새로운 배열을 만든다.
✍

function sum(currNumber) {
  return currNumber + 2;
}
const source = [2, 4, 6, 8];
const convert = source.map(sum);	// [4, 6, 8, 10]

.find 처럼 callback function 은 배열의 각 항목에 대해 호출되고 첫번재 인수는 현재 처리 중인 항목이 된다.
✍

const convert = source.map(
  sum(2)
  sum(4)
  sum(6)
  sum(8)
);

마찬가지로 작동하지 않지만 이해하기 쉽게 표현한 것이다.
.map 의 규칙은 callback function 에 의해 반환되는 값이 새 배열의 값이 된다는 것이다.
현재 callback function은 currNumber 인수 안에 배열의 각각 숫자를 받고 있고
currNumber + 2 의 값을 return 하고 있다.
즉 .map 함수가 완료되면 const convert 의 값은 const source 와 같은 길이 이지만
숫자는 2 가 더해진 배열이 된다.

---

📖 .filter()

.filter 를 사용하면 배열에서 항목을 제거할 수 있다.
.filter 는 .map 처럼 source 배열을 변형시키지 않고 지정한 항목만 제거한 상태로 새로운 배열을 만든다.
✍

const yami = ["banana", "cherry", "apple", "melon", "peach"];
const fruits = yami.filter((currYami) => currYami !== "melon");

Arrow Function 에 대해서는 👉여기를 참조
.filter 는 true 를 반환하면 항목이 새 배열로 이동하고 false 를 반환하면 해당 항목은 새 배열에서 제거 된다.
여러 과일이 있는 yami 라는 배열이 있고 그중 melon 빼서 좋아하는 과일만 있는 배열을 만들고 싶을 때 callback function 에서 currYami가 melon 인지 체크를 하면 된다.
위 callback function 에서는 melon 이 아니면 새 배열로 이동하게 되고 melon 이라면 false 가 리턴되면서 새 배열에서 제외된다.

📌 callback function 은 반드시 return 을 한다.

출처 : Nomad Coders Youtube