#22. 자바스크립트(javascript) - 내장함수(forEach, map, index, findindex, find)

내장함수

내장함수란 자바스크립트에서 자체적으로 제공하는 함수를 내장 함수라고 합니다. 내장 함수는 이미 시스템에 정의되어 있기 때문에 사용자가 별도로 정의하지 않고 주어진 원칙에 따라 사용하면 되는 함수입니다.

---

forEach

forEach 함수는 for문과 마찬가지로 반복적인 기능을 수행할 때 사용합니다.
하지만 for문처럼 index와 조건식, 증감 등을 정의하지 않아도 callback 함수를 통해 기능을 수행할 수 있습니다.

const superHeros = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];

아래 방법은 forEach 함수를 이용해 원소를 hero라는 파라미터로 받아 출력하는 방법입니다.

function print(hero) {
    console.log(hero);
}

superHeros.forEach(print);

---

아래 방법은 forEach 함수안에 직접 함수를 선언함으로써 간단하게 만드는 방법입니다. 출력값은 위의 출력값과 동일합니다.

superHeros.forEach(function(hero) {
    console.log(hero);
});

아래 방법은 forEach 내부에 있던 함수 마저도 간략화한 arrow function(화살표 함수)으로 변경한 방법입니다.

superHeros.forEach(hero => {
    console.log(hero);
});

---

map

map 함수는 callback 함수를 실행한 결과를 가지고 새로운 배열을 만들 때 사용합니다. 우선 아래 예시를 보겠습니다. array라는 배열에는 1부터 8까지의 숫자가 있습니다. for문을 통해 각 원소들을 제곱해주는 함수입니다. 

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

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

아래 코드는 앞서 배운 forEach 함수를 활용한 방법입니다. 출력값은 아래 사진과 같이 동일합니다.

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

console.log(squared);

다음은 square라는 callback 함수를 만들어 map을 통해 제곱된 수들로 배열을 반환하도록 하겠습니다.

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

조금 더 간단하게 map 함수 안에 callback 함수를 직접 선언합니다.

const squred = array.map(n => n * n);

 

 

---

이번에는 객체에 대해서 map함수를 사용해보도록 하겠습니다.

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

 아래에서 map 함수에 대해 자세히 설명해보도록 하겠습니다.

const texts = items.map(item => item.text);
console.log(texts);

먼저 items.map 은 items 배열에서 한 개의 원소(객체)를 한개씩 차례로 불러옵니다. 불러온 객체를 map() 함수 내부 함수의 파라미터(item)로 받고 그 파라미터의 text를 추출해 texts라는 새로운 배열에 저장합니다. 이 과정은 items의 모든 원소(객체)를 거칠 때까지 진행됩니다.

그 결과 출력값은 아래와 같습니다.

---

indexOf, findIndex, find

Index는 배열 함수에 있는 특정 원소의 위치를 숫자로 표현한 것입니다. 밑에 코드에서 '아이언맨' 원소의 위치(index)는 0, '캡틴 아메리카' 원소의 위치(index)는 1입니다. 보통 숫자와는 다르게 배열의 index는 0부터 시작합니다.

const superHeros = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];

const index = superHeros.indexOf('토르');
console.log(index);

---

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

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

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

findindex 함수는 조건을 만족하는 원소의 위치를 반환합니다. 위의 예시에서 id가 3인 원소의 위치는 3번째이므로 index는 2를 반환합니다. 앞서 언급했듯, index를 계산할 때는 0부터 시작이기 때문에 원래 3번째 위치임에도 index는 2를 반환합니다.

find 함수는 조건을 만족하는 원소를 반환합니다. 위의 예시에서 id가 3인 원소의 index는 2로, index가 2에 해당하는 원소를 반환합니다. 따라서 id: 3인 객체 전부를 반환합니다.