forEach

 

for문 사용

const array = [ '강아지', '고양이', '토끼', '햄스터'];

for (let i = 0; i < array.lenght; i++){
  console.log(array[i]);
};

 

forEach문 사용

const array = [ '강아지', '고양이', '토끼', '햄스터'];

array.forEach(ani => {
  console.log(ani);
};

 

 

 

map

 

제곱일경우 forEach 예시

const array = [1, 2, 3, 4, 5, 6, 7];

const squared = [];

array.forEach(number => {
  squared.push( number * number );
});

 

map 사용

const array = [1, 2, 3, 4, 5, 6, 7];

const square = n => n * n;
//             n => 1 * 1;
//             n => 2 * 2;
//             n => 3 * 3;  ... 

const squared = array.map(square);
console.log(squared);



// 또는 이런식으로 작성 가능
const squared = array.map(n => n * n);

- 변화를 주는 함수를 전달(변화함수)

- 배열을 순회하면서 element의 값을 변경하여 새로운 배열을 만듬

- return 되는 값을 배열로 만듬

 

 

 

indexOf

const array = [ '강아지', '고양이', '토끼', '햄스터'];

const index = array.indexOf('햄스터');
console.log(index);
// 3

원하는 값을 찾아 몇 번째 원소인지 반환

findIndex

const todos = [
  {
    id: 1,
    name: 'text1'
  },
  {
    id: 2,
    name: 'text2'
  },
  {
    id: 3,
    name: 'text3'
  },
  {
    id: 4,
    name: 'text4'
  },
  {
    id: 5,
    name: 'text5'
  }
];

const index = todos.findIndex(todo => todo.id === 4);
console.log(index);
// 3

id 값이 4인 객체가 몇 번째인지 찾아야 할 경우

find

const todo = todos.find(todo => todos.id === 4);
console.log(index);

// { id: 4, text: 'text4' }

id 값이 4인 객체 값을 반환

 

 

 

 

 

 

 

 

참고

https://learnjs.vlpt.us/basics/09-array-functions.html#map

 

09. 배열 내장함수 · GitBook

09. 배열 내장함수 이번에는 배열을 다룰 때 알고있으면 너무나 유용한 다양한 내장 함수들에 대하여 알아보겠습니다. forEach forEach 는 가장 쉬운 배열 내장함수입니다. 기존에 우리가 배웠던 for

learnjs.vlpt.us

 

+ Recent posts