![[JavaScript] 21. 배열메소드 / 순회와 탐색](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2026-02-02T07%3A45%3A34.594Z-09b08447-2887-4e29-b4d6-dd2ebdb8bf04&w=3840&q=75)
5가지 요소 순회 및 탐색 메서드
1. forEach
모든 요소를 순회하면서, 각각의 요소에 특정 동작을 수행시키는 메서드
// 5가지 요소 순회 및 탐색 메서드
// 1. forEach
// 모든 요소를 순회하면서, 각각의 요소에 특정 동작을 수행시키는 메서드
let arr1 = [1, 2, 3];
arr1.forEach(function (item, idx, arr) {
console.log(idx, item * 2);
});
예제
let doubledArr = [];
arr1.forEach((item) => {
doubledArr.push(item * 2);
});
console.log(doubledArr);
2. includes
배열에 특정 요소가 있는지 확인하는 메서드 ⇒ true/false 반환
// 2. includes
// 배열에 특정 요소가 있는지 확인하는 그런 메서드
let arr2 = [1, 2, 3];
let isInclude = arr2.includes(10);
console.log(isInclude);
3. indexOf
특정 요소의 인덱스(위치)를 찾아서 반환하는 메서드
// 3. indexOf
// 특정 요소의 인덱스(위치)를 찾아서 반환하는 메서드
let arr3 = [1, 2, 3];
let index = arr3.indexOf(2);
console.log(index);
✅ 찾으려는 값이 두 개 이상 일때
let arr3 = [2, 2, 2];
let index = arr3.indexOf(2);
console.log(index);
⇒ 가장 먼저 찾은 곳의 index 값을 반환한다
✅ 찾으려는 값이 해당 배열 내에 존재하지 않을 때
let arr3 = [2, 2, 2];
let index = arr3.indexOf(20);
console.log(index);
⇒ 존재하지 않는다는 의미의 -1을 반환한다
4. findIndex
특정 요소의 인덱스를 반환하는 메서드
그와 함께 모든 요소를 순회하면서 콜백함수를 만족해야한다.
여기서 콜백함수를 만족한다는 말은 콜백 함수가 반환하는 값이 참 일 때를 말한다.
// 4. findIndex
// 모든 요소를 순회하면서, 콜백함수를 만족하는
// 특정 요소의 인덱스(위치)를 반환하는 메서드
let arr4 = [1, 2, 3];
const findedIndex = arr4.findIndex((item) => {
if (item === 2) return true;
});
console.log(findedIndex);
⇒ 간략하게도 표현할 수 있다. 람다식 참고!
✅ 어떤 경우에 indexOf가 아닌 findIndex를 사용하나?
indexOf는 얕은 비교로 값이 같은지 비교를 하게 된다. 하지만 객체같은 경우는 비교를 할 때 참조값을 통해 서로 같은지 비교하기 때문에 사람이 보기에 같은 값 처럼 보인다고 해서 같은 값이라고 인식되지 않는다.findIndex 메서드를 사용하면 특정 property를 기준으로 값을 비교할 수 있다. 따라서 원시타입이 아닌 객체타입을 찾기 위해서는 indexOf가 아닌 findIndex를 통해 비교하고 찾아야한다.원시타입과 객체타입의 차이에 대해서는 먼저 포스팅된 원시타입VS객체타입 글을 참고하면 된다.
let objectArr = [
{ name: "서회정" },
{ name: "홍길동" }
];
console.log(objectArr.indexOf({ name: "서회정" }));
⇒ 객체 타입은
indexOf 메서드로 찾을 수 없다let objectArr = [
{ name: "서회정" },
{ name: "홍길동" }
];
console.log(objectArr.findIndex((item) => item.name === "서회정"));
⇒
findIndex 메서드로는 name이라는 특정 프로퍼티를 통해 비교를 하여 잘 찾아지는 것을 확인할 수 있다.5. find
모든 요소를 순회하면서 콜백함수를 만족하는 요소를 찾는데, 인덱스가 아닌, 요소를 그대로 반환
// 5. find
// 모든 요소를 순회하면서 콜백함수를 만족하는 요소를 찾는데, 요소를 그대로 반환
let arr5 = [{ name: "서회정" }, { name: "홍길동" }];
const finded = arr5.find((item) => item.name === "서회정");
console.log(finded);
Share article