[JavaScript] 배열 내장 함수 정리

📝 JS에도 많이 사용하지만 React에서도 많이 사용하는 배열 내장 함수에 대해 정리해보려고 합니다!

📌 forEach()

: 반환값(return)이 없고, 단순 for문과 같이 작동한다.

let names = [
    "Steven Paul Jobs",
    "Bill Gates",
    "Mark Elloit Zuckerberg",
    "Elon Musk",
    "Jeff Bezos",
    "Wwarren Edward Buffett",
    "Larry Page",
    "Larry Ellison",
    "Tim Cook",
    "Lloyd Blankfein"
];

names.forEach((item, index) => console.log(item, index)); // Steven Paul Jobs 0 Bill Gates 1...

👉 forEach가 알아서 회전을 하면서 매번 (배열에 있는) 아이템을 하나씩 넘기는 식으로 동작한다.

---

📌 map()

: forEach와 다르게 반환값(return)이 있다. 반환값을 배열에 담아 반환하는 것이 특징이다.

let ceoList = [
    {name: "Larry Page", age: 23, ceo: true},
    {name: "Time Cook", age: 40, ceo: true},
    {name: "Elon Musk", age: 55, ceo: false}
];

let data = ceoList.map((item) => {
    return item.age;
});
console.log(data); // [23, 40, 55]

---

📌 filter()

: 조건에 충족하는(true) 아이템만 배열에 담아 반환한다.

let names = [
    "Steven Paul Jobs",
    "Bill Gates",
    "Mark Elloit Zuckerberg",
    "Elon Musk",
    "Jeff Bezos",
    "Wwarren Edward Buffett",
    "Larry Page",
    "Larry Ellison",
    "Tim Cook",
    "Lloyd Blankfein"
];

let data2 = names.filter((item) => { // 조건을 넣고, 조건에 대해 참인 것만 반환됨(true인걸 다 반환)
    return item.startsWith("L");
});
console.log("filter:", data2); // filter: (3) ['Larry Page', 'Larry Ellison', 'Lloyd Blankfein']

---

📌 some()

: 조건에 충족하는 아이템이 하나라도 있으면 true 반환, 아니면 false.

let data3 = names.some((item) => { // 조건에 충족하는 아이템이 하나라도 있으면 true 반환, 아니면 false.
    return item.startsWith("L");
});
console.log("some:", data3); // some: true

---

📌 every()

: 모든 배열에 아이템이 조건을 충족하면 true 반환, 아니면 false.

let data4 = names.every((item) => { // 모두가 그값이면 true반환, 아니면 false.
    // return item.startsWith("L") -> false
    return item.length > 0; // -> true
});
console.log("every:", data4); 

---

📌 find()

: 조건에 충족하는 아이템 하나만 반환(여러개라면 첫번째 것만 반환)

let data5 = names.find((item) => {
    return item.startsWith("L");
});
console.log("find:", data5); // find: Larry Page

---

📌 findIndex()

: 조건에 충족하는 아이템의 인덱스값 반환(여러개라면 첫번째 아이템의 인덱스번호만 반환)

let data6 = names.findIndex((item) => {
    return item == "Larry Page";
});
console.log("findIndex:", data6); // findIndex: 6

---

📚 Reference

: 국비지원 수업