[JavaScript] 14. 자바스크립트 배열의 내장함수 01

# forEach

forEach은 기존에 사용했던 for문을 대체하여 사용할 수 있는 반환 값이 없는 배열의 내장 함수입니다.

const animals = ['Dog', 'Rabbit', 'Pig'];
const copyAnimals = [];

// for문
for (let i=0; i<animals.length; i++) {
    copyAnimals.push(animals[i]);
}

// forEach문
animals.forEach(function(value){
    copyAnimals.push(animals);
});

 

# map

map은 배열 안의 요소들에 대해 한 번씩 순서대로 불러 그 함수의 반환 값으로 새로운 배열을 생성하여 줍니다.

예를 들어, 홀수가 들어있는 배열에 각 요소들을 제곱한 값을 가지는 새로운 배열을 만들려고 합니다.

먼저, 앞에서 다룬 forEach를 사용하여 작성해본다면 다음과 같습니다.

const oddNum = [1, 3, 5, 9];
const square = [];

oddNum.forEach(num => square.push(num * num));

console.log(square); // [1, 9, 25, 81]

 

다음은 map을 사용하여 작성한 코드입니다. map을 사용하면 forEach를 사용했을 때보다 좀 더 간단하게 작성할 수 있습니다.

const oddNum = [1, 3, 5, 9];

const square = oddNum.map(num => (num * num));

console.log(square); // [1, 9, 25, 81]

 

 

# indexOf

indexOf는 배열에서 원하는 항목의 인덱스를 반환하며, 존재하지 않는 경우에는 -1을 반환합니다.

const animals = ['Dog', 'Rabbit', 'Pig'];

// 'Pig'의 인덱스를 찾고 싶다면
console.log(animals.indexOf("Pig")); // 2

console.log(animals.indexOf("Tiger")); // -1, 존재하지 않는 요소

 

# findIndex

findIndex는 배열 안에 값이 원시 타입이 아닌 배열 또는 객체일 때 해당 요소의 인덱스를 찾을 때 사용됩니다.

찾으려는 요소가 존재하지 않는다면 -1을 반환합니다.

const people = [{name : "송우든"},{name : "먹깨비"},{name : "권수염"}];

console.log(people.findIndex(({name}) => name === "송우든")); // 0
console.log(people.findIndex(({name}) => name == "수봉이"));  // -1, 존재하지 않는 요소

 

# find

find는 findIndex와 유사하지만 값의 인덱스를 반환하는 것이 아닌, 값 자체를 반환하는 함수입니다.

요소가 존재하지 않는다면 undefined를 반환하여 줍니다.

const people = [{name : "송우든"},{name : "먹깨비"},{name : "권수염"}];

console.log(people.find(({name}) => name === "송우든")); // 송우든
console.log(people.find(({name}) => name == "수봉이"));  // undefined