Array의 반복 관련 메서드(1)

 

forEach, map, reduce 등 javascript에서의 반복 관련 메서드가 있는데, 그냥 편하게 반복문이라고도 하지만 정확히는 Array 객체의 메서드이다.

 

다만 for문 등 반복문과 비교가 되어 반복문으로 분류하기도 하지만 뭐 이렇든 저렇든 상관은 없다.

 

forEach

const ary = [1, 2, 3, 4, 5];

ary.forEach((e) => {
    console.log(e); // 1, 2, 3, 4, 5
});

// 이렇게 람다식으로 써도 된다.
ary.forEach(e => {
    console.log(e); // 1, 2, 3, 4, 5
});

// 두 번째 인자는 Array의 index를 의미한다.
ary.forEach((e, i) = > {
    console.log(e); // 1, 2, 3, 4, 5
    console.log(i); // 0, 1, 2, 3, 4
});

// 세 번째 인자는 반복해서 돌고 있는 Array 그 자체를 의미한다.
ary.forEach((e, i, a) = > {
    console.log(e); // 1, 2, 3, 4, 5
    console.log(i); // 0, 1, 2, 3, 4
    console.log(a); // [1, 2, 3, 4, 5], [1, 2, 3, 4, 5], [1, 2, 3, 4, 5], [1, 2, 3, 4, 5], [1, 2, 3, 4, 5]
});

// for문으로 쓰면 다음과 같다
for (let i = 0; i < ary.length; i++) {
    const e = ary[i];
    console.log(e);
    console.log(i);
    console.log(ary);
    // console 찍히는 거는 위와 같다.
}

forEach문은 for문이나 while문 등 순수 반복문으로도 대체가 가능하지만 좀 더 직관적이기 때문에 많이 쓴다.

굳이 따지자면 속도는 순수 반복문이 더 빠르다고 하지만 실무에서는 별로 의미 없다.

for문으로 리버스로 돌리거나 특정 인덱스부터 시작하는 게 아니면 그냥 forEach가 편하다.

 

map

const ary = [1, 2, 3];

const ary2 = ary.map(e => {
    return e + 1;
});
console.log(ary); // [1, 2, 3];
console.log(ary2); // [2, 3, 4];

// 이렇게 해도 똑같다.
const ary2 = ary.map(e => e + 1);

// forEach문으로 표현하면 다음과 같다.
const ary = [1, 2, 3];
let ary2 = [];
ary.forEach(e => {
    ary2.push(e + 1);
});

// for문으로 표현하면 다음과 같다.
const ary = [1, 2, 3];
let ary2 = [];
for (let i = 0; i < ary.length; i++) {
    const e = ary[i];
    ary2.push(e + 1);
}

for문이나 forEach문으로 돌려도 되나 역시 특수한 경우가 아니라면 그냥 map이 편하다.

 

filter

const ary = [1, 2, 3, 4, 5];
const ary2 = ary.filter(e => {
    return e < 3;
});
console.log(ary); // [1, 2, 3, 4, 5]
console.log(ary2); // [1, 2]

// 이렇게 해도 똑같다.
const ary = [1, 2, 3, 4, 5];
const ary2 = ary.filter(e => e < 3);

// forEach문으로 표현하면 다음과 같다.
const ary = [1, 2, 3, 4, 5];
let ary2 = [];
ary.forEach(e => {
    if (e < 3) {
        ary2.push(e);
    }
});

// for문으로 표현하면 다음과 같다.
const ary = [1, 2, 3, 4, 5];
let ary2 = [];
for (let i = 0; i < ary.length; i++) {
    const e = ary[i];
    if (e < 3) {
        ary2.push(e);
    }
}

for문이나 forEach문으로 돌려도 되나 역시 특수한 경우가 아니라면 그냥 filter가 편하다.

 

find

const ary = [1, 2, 3, 4, 5];
const findElement = ary.find(e => {
    return e === 3;
});
console.log(findElement); // 3

// 이렇게 해도 똑같다.
const ary = [1, 2, 3, 4, 5];
const findElement = ary.find(e => e === 3);

// 만약에 아예 조건이 안맞으면 이렇게 된다.
const ary = [1, 2, 3, 4, 5];
const findElement = ary.find(e => e === 7);
console.log(findElement); // undefined

// 조건이 여러 엘리먼트를 만족하면 이렇다.
const ary = [1, 2, 3, 4, 5];
const findElement = ary.find(e => e > 3);
console.log(findElement); // 4
// 즉, 조건에 맞는 가장 첫번째 엘리먼트를 가져온다.

// for문으로 표현하면 다음과 같다.
const ary = [1, 2, 3, 4, 5];
let findElement;
for (let i = 0; i < ary.length; i++) {
    const e = ary[i];
    if (e > 3) {
        findElement = e;
        break;
    }
}

// forEach문으로도 가능하긴 하나 forEach문은 break가 되지 않는다.
// 즉,find문은 내부적으로 break를 하나 forEach문은 조건에 맞는 엘리먼트를 찾아도 끝까지 돈다.
// 그래서 find문을 대체하려면 for문과 break를 조합해서 써야 한다.

 

reduce

Array의 반복 관련 메서드들 중에 가장 강력한 것이 reduce다.

이건 내용이 조금 길어지기 때문에 다음 포스트에서 다루겠다.

 

제한

이 메서드들은 정확히는 반복문이 아니기 때문에 break와 continue를 쓸 수 없다. (물론 어떻게든 꼼수는 가능하지만 그럴 바엔 그냥 반복문 쓴다.)

 

또한 async, await 구문으로 동기적으로 함수 호출이 되지 않는다고 알고 있다. (다시 확인 필요)

 

같이 보기

반복문 - for문

 

반복문 - while문, break, continue, 무한루프

 

Array의 반복 관련 메서드(2) - reduce