[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 8회차 미션 - 26강 배열 내장함수 forEach, Map, indexOf, findIndex, find, filter

배열 내장함수1

forEach

먼저 아래와 같은 배열이 있고 이들을 콘솔로 각각 찍어볼 수 있는 반복문이 있다고 하자.

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

for (let i = 0; i < superHeroes.length; i++){
    console.log(superHeroes[i]);
}

위와 같이 긴 코드를 forEach를 사용하면 훨씬 간단하게 줄일 수 있다.

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

제이쿼리의 each문과 같이 각각의 배열안에 있는 값들에게 접근해서 함수를 돌린다.
이것을 forEach문 안에서 함수를 직접 만들어 쓸 수 있는데 아래와 같이 쓰면 된다.

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

forEach문 안에서의 함수는 화살표 함수로도 바꿔서 써줄 수 있다.

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

처음 코드와 비교해보면 훨씬 간단하고 직관적인 코드로 바뀌었음을 볼 수 있다.

Map

const array = [1, 2, 3, 4, 5];
const squared = [];
for (let = i; i < array.length; i++){
    squared.push(array[i] * array[i]);
}
console.log(squared); //[1, 4, 9, 16, 25]

위와 같은 for문을 forEach와 바꾸면 아래와 같다.

const array = [1, 2, 3, 4, 5];
const squared = [];
array.forEach(number => {
  squared.push(number * number);
});
console.log(squared); //[1, 4, 9, 16, 25]

한번더 나아가 forEach를 Map으로 바꿔보자

const array = [1, 2, 3, 4, 5];
const square = n => n * n;
const squared = array.map(square);
console.log(squared); //[1, 4, 9, 16, 25]

아래처럼 const square를 따로 안만들고 아예 map안에 function을 만들 수도 있다.

const array = [1, 2, 3, 4, 5];
const squared = array.map(n => n * n);
console.log(squared); //[1, 4, 9, 16, 25]

이것처럼 map은 배열이 있을 때 전체적으로 변환을 해주고 싶을때 사용하는 내장함수이다.

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

const texts = items.map(item => item.text);
console.log(texts);
//text만 불러서 배열로 만들어줌 ["hello", "bye"]

indexOf

indexOf는 특정값이 몇번째 인덱스에 있는지 반환해준다.

const superheroes = ['아이언맨', '캡틴아메리카', '토르', '닥터스트레인지'];
const index = superheroes.indexOf('토르');
console.log(index); 
// 2를 반환, 찾는 값이 없을경우는 -1을 반환한다.

findIndex

찾고자 하는 것이 객체이거나, 특정 값이 아니라 조건으로 찾는 경우는 indexOf로는 불가능하다. 그럴때는 findIndex를 사용한다.

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); //파라미터 todo, todo의 id가 3인 것은?
console.log(index); //2 반환

이런식으로 찾고자 하는 것이 객체 안에 있을 경우 특정 조건을 확인해야 하는 경우는 findIndex를 쓴다.

find

find는 findIndex와 찾는 방식은 비슷한데 반환하는 것이 인덱스 값이 아닌 값 전체를 반환한다.
이것들은 많은 값 중 제일 첫번째로 찾은 값을 반환한다.

filter

const todos = [
    {
        id: 1,
        text: '자바스트립트 입문',
        done: true
    },
    {
        id: 2,
        text: '함수 배우기',
        done: true
    },
    {
        id: 3,
        text: '객체와 배열 배우기',
        done: true
    },
    {
        id: 4,
        text: '배열 내장함수 배우기',
        done: false
    },
]
const result = todos.filter(todo => todo.done === false);
const resultSame = todos.filter(todo => !todo.done); //이렇게도 써줄 수 있음.
console.log(result);

filter는 위와 같이 배열에서 특정 조건에 해당하는 원소를 찾을 때 사용한다.

마치면서

내장함수 엄청 많다..
시청 영상 26강 23~25까지

프론트엔드 개발 올인원 패키지 with React Online. 👉 https://bit.ly/31Cf1hp