[JavaSciprt] 배열메서드(forEach, includes, indexOf, findIndex, find)

forEach

모든 요소를 순회하면서, 각각의 요소에 특정 동작을 수행하는 메서드

arr1 = [1, 2, 3];

arr1.forEach((item, idx, arr) => {
  console.log(item);
});

// 1
// 2
// 3

includes

배열에 특정 요소가 있는지 확인하는 메서드

arr1 = [1, 2, 3];

console.log(arr1.includes(1));
let isInclude = arr1.includes(1);
console.log(isInclude);

// ture

indexOf

특정 요소의 인덱스를 반환하는 메서드
같은 값이 여러개일 때는 맨 처음 인덱스 반환
없으면 -1 반환

let arr3 = [1, 2, 3];
let index = arr3.indexOf(2);
console.log(index);

// 1

findIndex

모든 요소를 순회하면서, 콜백함수를 만족하는 특정 요소의 인덱스를 반환

let arr4 = [1, 2, 3];
//let find = arr4.findIndex((item) => {
//  if (item === 2) {
//    return true;
//  }
// });
let find = arr4.findIndex((item) => item === 2);
console.log(find);

// 1

🥕 indexOf와 findIndex의 차이점

indexOf : 간단한 배열에서 사용
findIndex : 객체가 들어있는 복잡한 배열에서 사용

let arr5 = [{ name: "포도" }, { name: "감자" }];

let objFindIdx = arr5.findIndex((item) => {
  if (item.name === "포도") {
    return true;
  }
});

// 0

위와 같은 상황에서 indexOf를 쓰면 -1이 나옴
❓indexOf에서는 === 즉, 얕은 복사(참조값으로 비교함)
property는 같을 수 있어도 같은 주소값이 아니기 때문에 다른것이라고 판단

하지만, findIndex에서는 property만 같아도 됌!
따라서 객체가 들어있을 땐, findIndex

find

findIndex와 똑같지만, find는 값을 반환

let objFind = arr5.find((item) => {
  if (item.name === "포도") {
    return true;
  }
});

console.log(objFind);

// {name: "포도"}