JavaScript, Array 함수(forEach, map, filter, some, every, find, findindex)

let arr = ["apple","banana","orange","lemon"];

forEach()

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

→ apple 0 [ 'apple', 'banana', 'orange', 'lemon' ]
    banana 1 [ 'apple', 'banana', 'orange', 'lemon' ]
    orange 2 [ 'apple', 'banana', 'orange', 'lemon' ]
    lemon 3 [ 'apple', 'banana', 'orange', 'lemon' ]

• return이 없는 콜백함수
• 매개변수에 값, 인덱스, 배열 전체가 들어가지만 필요한 것만 사용할 수 있음

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

→ apple
    banana
    orange
    lemon

 

map

배열 내 요소를 새로운 배열로 반환

let data = arr.map((item) => {
  return item + "hello" ;
});

→ [ 'applehello', 'bananahello', 'orangehello', 'lemonhello' ]

• return 부분에서 배열 요소 + " hello" 가 수행된 모습으로 배열이 반환되었다.

 

filter

이름에서 알 수 있든 배열 내 특정 조건에 해당하는 요소만 걸러 새로운 배열을 반환한다.

let data = arr.filter((item) => {
  return item.startsWith("l");
});

→ [ 'lemon' ]

• return 부분에서 "l" 로 시작하는 단어를 간추려서 'lemon'을 반환했다.
• 배열 내 객체에서도 사용 가능하다. 

let fruit = [
  {
    name: "apple",
    price: 1000,
  },
  {
    name: "banana",
    price: 5000,
  },
  {
    name: "orange",
    price: 3000,
  },
  {
    name: "lemon",
    price: 2000,
  },
];



let fruitFilter = fruit.filter((item) => {
  return item.price <= 3000;
});

→ [ { name: 'apple', price: 1000 }, { name: 'orange', price: 3000 }, { name: 'lemon', price: 2000 }]

• 배열 내 가격 값이 3000 원 이하인 객체를 간추려 새로운 배열을 만들었다. 
• API 를 사용해 필요한 데이터를 추출할 때 유용하게 사용되니 잘 알아두자

 

some

배열 내 return 부분의 조건에 부합한지 boolean 값으로 반환

let data = arr.some((item) => {
  return item.startWith("a");
});

→ true

• a 로 시작하는 배열이 있는지를 판단해서 boolean 값으로 반환한다. apple 이 있기 때문에 true 반환

 

every

배열 내 모든 값이 return 부분 의 조건에 부합하는지 boolean 값으로 반환

let data = arr.every((item) => {
  return item.startWith("a");
});

→ false

• 배열 내 모든 값이 a로 시작하진 않기 때문에 false 가 반환된다.

 

let data = arr.every((item) => {
  return typeof item === "string";
});

→ true

• 배열 내 모든 값은 문자열이기 때문에 true 가 반환된다.

 

find

배열 내 return 조건에 부합하는 첫 번 째 요소 1개만 반환

let data = arr.find((item) => {
  return item.length === 5;
});

→ apple

• apple 뿐만 아니라 lemon 도 조건에 부합하지만 첫 번 째에 있는 apple 한 개만 반환한다.

 

findIndex

배열 내 return 조건에 부합하는 요소의 index를 반환

let data = arr.findIndex((item) => {
  return item.length === 5;
});

• find 와 마찬가지로 조건에 부합하는 첫 번 째 요소의 인덱스  1개만 반환한다.