본문 바로가기
프론트엔드/JavaScript

배열 함수 예제 (forEach, includes, indexOf, findIndex, find)

by step 1 2024. 7. 28.
반응형

1. forEach

선언된 배열을 길이만큼 반복하여 콜백함수를 호출 한다.

let arr1 = [1,2,3];

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

// 배열에 데이터 삽입
let doubleArr = [];
arr1.forEach((item) => {
  doubleArr.push(item*2);
})

console.log(doubleArr);

 

2. includes

찾고싶은 값을 매개변수에 입력하면 해당 값이 존재하는지 확인하여 boolean(true(있을 경우) / false(없을 경우))값으로 반환

et arr2 = [1,2,3];
let isInclude = arr2.includes(2);  // true / false 반환
console.log(isInclude)

 

3. indexOf

찾고싶은 값을 매개변수에 입력하면 해당 값이 존재하는지 확인하여 해당값에 위치를 반환 

처음 발견된 위치가 발견되고 0부터 시작된다.

let arr3 = [2,2,3];
let index = arr3.indexOf(3); // 같은 값이 있을 경우 처음 발견된 데이터 위치 반환
console.log(index);

 

4. findIndex

모든 요소를 순회하여 조건에 맞는지 확인하여 조건에 일치 하면 해당되는 인덱스 반환

let arr4 = [1,2,3];
const abc = arr4.findIndex(
  (item,idx,arr) => {
    console.log('item', item)
   return item === 2
  }
)
console.log(abc);

let arr45 = [
  { name: "lee", age: 29},
  { name: "han", age: 33}
];
const abc77 = arr45.findIndex(
  (item,idx,arr) => {
    console.log('item', item)
   return item.name === "han"
  }
)
console.log(abc77);

 

 

5. find

모든 요소를 순회하여 조건에 맞는지 확인하여 조건에 일치 하면 해당되는 객체를 반환

let arr5 = [
  { name: "lee", age: 29},
  { name: "han", age: 33}
];

const aa  = arr5.find(
  (item) => {
    console.log('item', item)
    return item.age < 30
  }
)

console.log('aa', aa)

반응형