[javascript] 6. 배열 내장 함수 - map, indexOf, findIndex, find

그래도 공부만 하면서 글을 쓰는 것보단 오래오래 코딩하려면 운동을 병행해야 한다는 생각을 실천해 보자!라는 생각으로 헬스장을 등록하고 (원래 계속 운동했었음) 하체 운동을 마친 후 기술정리하며 공부중인데진짜 죽을 맛이다.

1. map

아 map 꽤 헷갈린다.

먼저 map은 배열 안의 원소를 변환할 때 사용하며 모든 원소를 변환하고 싶을 때 사용한다.

배열 안의 모든 숫자를 제곱으로 만들어 보자

for

• 예제 1

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

for (let i = 0; i < array.length; i++) {
  squared.push(array[i] * array[i]);
}

console.log(squared);
// [1, 4, 9, 16, 25, 36, 49, 64]

forEach

• 예제 2

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

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

console.log(squared)
//[1, 4, 9, 16, 25, 36, 49, 64]

map

• 예제 3-1

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

const square = (n) => n * n;
const squared = array.map(square);

console.log(squared);
//[1, 4, 9, 16, 25, 36, 49, 64]

• 예제 3-2

const array = [1, 2, 3, 4, 5, 6, 7, 8];
const squared = array.map((n) => n * n);

console.log(squared);
//[1, 4, 9, 16, 25, 36, 49, 64]

map 함수를 사용하는 게 오히려 더 간단하다. 조금 헷갈리긴 하지만 굳이 비어있는 배열을 만들 필요도 없고 코드도 더 간결하게 작성이 가능하다.

map 예제 - 객체 배열들을 텍스트로만 이루어진 문자열로 바꾸기

const items = [
  {
    id: 1,
    text: "hello"
  },
  {
    id: 2,
    text: "bye"
  }
];

const texts = items.map((item) => item.text);
console.log(texts);
// ["hello", "bye"]

const texts = items.map((item) => item.text); 이 코드에 있는 item은 items의 객체를 뜻하고 .text를 붙이면서 text의 내용을 가져올 수 있다.

map을 정리하면서 느낀 건데 배열 내장함수는 어디에 어떻게 쓰이는지 예제를 더 찾아보고 직접 코드를 실행해보는 게 좀 더 와닿을 것 같다.

2. indexOf

추가로 배열의 원소가 어디있는지 알려주는 함수

const mbc = ["유재석","박명수","정준하","하하"];
const index = mbc.indexOf('박명수');
console.log(index);
// 1

3. findIndex

• 만약에 배열안에 있는 값이 문자열이나 숫자 boolean이면 찾고자 하는 index가 몇 번째인지indexOf로 충분히 알 수 있다.
• 하지만 만약에 배열 안에 들어있는 값들이 객체이거나 특정 조건으로 찾는다면 indexOf로 할 수 없다. 이때 사용할 수 있는 게findIndex이다.

const todos = [
  {
    id: 1,
    text: "자바스크립트 입문",
    done: true
  },
  {
    id: 2,
    text: "함수배우기",
    done: true
  },
  {
    id: 3,
    text: "객체와 배열 배우기",
    done: true
  },
  {
    id: 4,
    text: "배열 내장 함수 배우기",
    done: false
  }
];

위와 같이 객체를 가진 배열이 있다고 가정해 보자.
id가 3인 값을 찾고 싶을 때 배웠던 indexOf를 사용해 보면

const index = todos.indexOf(3);
console.log(index);
// -1

-1이 나오게 된다.
여기서 나오는 -1은 값이 없다는 걸뜻한다.

• 그렇다면 다른 방법으로 findIndex를 사용해 보자

const index = todos.findIndex((todo) => todo.id === 3);
const indexText = todos.findIndex((todo) => todo.text === "배열 내장 함수 배우기");

console.log(index);
console.log(indexText);
// 2
// 3

배열 안에 값들이 객체이거나 특수한 조건이나 특정값들의 위치를 확인해야 하는 경우엔 findIndex를 사용하자!

4. find

• findIndex는 몇 번째인지 알려주지만 find는 그 객체 자체나 원소를 그대로 반환한다.

const indexId = todos.find((todo) => todo.id === 3);
console.log(indexId);
// {id: 3, text: "객체와 배열 배우기", done: true}

const indexDone = todos.find((todo) => todo.Done === false);
console.log(indexText);
// {id: 4, text: "배열 내장 함수 배우기", done: false}


// find로 찾은 값 원소에도 접근할수 있다.
console.log(indexDone.id)
// 4