배열 내장함수 - 1

배열을 순환하는 방법

for 문 사용 시

const arr = [1, 2, 3, 4];

for(let i = 0; i < arr.length; i++){
  console.log(arr[i]) // 1,2,3,4 출력
}

forEach

• 배열의 모든 요소를 한 번씩 순회 할 수 있도록 해주는 내장 함수
• 즉, elm 은 배열의 요소들을 한 번씩 전달 받습니다.

const arr = [1, 2, 3, 4];

arr.forEach((elm) => console.log(elm)); // 1,2,3,4 출력
arr.forEach((elm) => console.log(elm * 2)); // 2,4,6,8 출력

기존의 값으로 새로운 배열 만들기

push

• 위의 예시는 출력만 할 뿐 배열로 저장하고 있지는 않습니다.
• push 를 이용해 새로운 배열로 값을 추가 할 수 있습니다.

const arr = [1, 2, 3, 4];
const newArr = [];

arr.forEach((elm) => newArr.push(elm * 2));

console.log(newArr); // [2,4,6,8]

map

• 위의 코드를 map 을 사용하면 더 쉽게 만들 수 있습니다.
• map 은 원본 배열의 모든 요소를 순회하면서 return 된 값들만을 따로 새로운 배열로 만들어서 반환을 할 수 있습니다.
• 즉, 아래 예시는 1 * 2 , 2 * 2, 3 * 2, 4 * 2 를 리턴 합니다.

const arr = [1, 2, 3, 4];
const newArr = arr.map((elm) => {
  return elm * 2;
});

console.log(newArr); // [2,4,6,8]

배열안에 값이 있는지 찾는 방법( True / False )

forEach 사용 시

const arr = [1, 2, 3, 4];

let number = 3;

arr.forEach((elm) => {
  if(elm === number){
    console.log(true);
  }
});

includes

• 주어진 배열에서 전달 받은 인자와 일치하는 값이 존재하는지 확인 합니다.
• 만약 문자열 3 을 전달하게 되면 false 가 나옵니다.
• 즉, === 연산을 사용해서 값을 찾습니다.

const arr = [1, 2, 3, 4];

let number = 3;

console.log(arr.includes(number)); // true

배열 안에 값이 몇 번째에 있는지 ( 인덱스 번호 )

indexOf

• 배열의 인덱스는 0 부터 시작 합니다.
• 일치하는 값이 없는 경우는 -1 를 반환 합니다.

const arr = [1, 2, 3, 4];

let number = 3;

console.log(arr.indexOf(number)); // 2 

findIndex

• 객체 배열에서 원하는 속성을 가지는 인덱스를 가져오기

const arr = [
  { color : "red"},
  { color : "black"},
  { color : "blue"},
  { color : "green"}
];

console.log(arr.findIndex((elm) => elm.color === "green")); // 3
console.log(arr.findIndex((elm) => elm.color === "red")); // 0

만약 일치하는 요소가 다중으로 있을 경우 ?

• 가장 앞에 있는 요소를 반환 합니다.

const arr = [
  { color : "red"},
  { color : "black"},
  { color : "blue"},
  { color : "green"},
  { color : "blue"}
];

console.log(arr.findIndex((elm) => elm.color === "blue")); // 2

인덱스가 아닌 배열 요소에 직접 접근하고 싶은 경우 ?

• 아래 처럼 하는 방법도 있지만, find 를 이용하면 쉽게 할 수 있습니다.

const arr = [
  { color : "red"},
  { color : "black"},
  { color : "blue"},
  { color : "green"},
];

const idx = arr.findIndex((elm) => {
  return elm.color === "blue"
});

console.log(arr[idx]); // {color: "blue"}

조건에 일치하는 요소를 가져오기

find

• findIndex 와 find 의 전달하는 콜백 함수의 역할은 동일 합니다.
• 조건을 만족하는 첫 번째 요소를 반환 합니다.
• 차이점은 find 는 만족하는 요소 자체를 반환하고
  findIndex 는 만족하는 요소의 인덱스 번호를 반환 합니다.

const arr = [
  { color: "red" },
  { color: "black" },
  { color: "blue" },
  { color: "green" }
];

const idx = arr.find((elm) => {
  return elm.color === "blue";
});

console.log(idx); // {color: "blue"}

참조

• 인프런