[JavaScript] for, for in, for of, forEach 반복문

[JavaScript] for, for in, for of, forEach 반복문

언어와 상관없이 대표적으로 많이 사용되는 반복문이 while, do-while, for 구문이 있습니다. JavaScript 또한 위 3가지 반복문을 모두 가지고 있습니다. 그 중 for문에 대해 더 자세히 알아보겠습니다.

◆ for 문

for문 같은 경우 당연히 잘 알고 있을 것이라 예상됩니다.

for ([initialization]; [condition]; [final-expression])
   statement

위와 같이 생겼습니다. 아래 코드를 확인해봅시다.

for(let i = 0 ; i < 5 ; i++) {
    console.log(i);

    if(...) {
        break; 
    }
}

아마 대부분 for문을 위와 같이 사용할 것입니다. 반복을 할 수 있으면서 중간에 break를 통해 반복을 취소할 수도 있습니다. 너무 유명하고 다른 언어에서도 동일하게 사용하고 있으니 이정도로 넘어가겠습니다.

◆ for...in 문

for...in 문은 object를 반복할 때 사용할 수 있습니다. 문자열로 key가 지정된 열거 가능한 속성에 대해 반복합니다. (Symbol이 key인 경우 제외)

for (variable in object) { ... }

아래 예시 코드를 확인해봅시다.

const object = {
    lion: "사자",
    tiger: "호랑이",
    rabbit: "토끼",
};

for(const property in object) {
    console.log(`${property} : ${object[property]}`);
}

그렇다면 배열은 안될까요? 물론 배열도 됩니다 (안될 수도 있음). 아래 코드를 확인해봅시다.

const array = ["사과", "바나나", "멜론"];

for(const index in array) {
    console.log(`${index} : ${array[index]}`)
}

그러나 위 같은 경우 아래에서 확인해볼 for...of를 사용하는 것이 더 올바른 방법이라고 볼 수 있습니다. 왜냐하면 for...in 문은 순서에 상관없이 객체의 property를 하나씩 순회합니다. 따라서 배열의 index만 순회하는 것이 아닌, enumerable 한 property를 모두 순회합니다. 따라서 원하는 결과를 보장할 수는 없습니다.

◆ for...of 문

for...of 문은 반복가능한 객체를 반복할 수 있습니다. (Array, Map, Set, String, ...)

for (variable of iterable) {
  statement
}

위에서 for...in으로 배열을 반복한 것을 for...of로 수정해보겠습니다.

const array = ["사과", "바나나", "멜론"];

for(const fruit of array) {
    console.log(fruit);
}

코드가 훨씬 간단해진 것을 볼 수 있습니다.

◆ for...of vs for...in 2개의 차이

mdn 문서에 잘 나와있어 가져왔습니다.

for...in 은 객체의 모든 열거가능한 속성에 대한 반복

for...of 는 컬렉션 전용. 모든 객체보다는 [Symbol.iterable] 속성이 있는 모든 컬렉션 요소에 대해 반복

Object.prototype.objCustom = function () {};
Array.prototype.arrCustom = function () {};

let iterable = [3, 5, 7];
iterable.foo = "hello";

for (let i in iterable) {
  console.log(i); 
}

console.log("---------------");

for (let i of iterable) {
  console.log(i); 
}

위 결과를 보면 차이점이 더 확실하게 보입니다. for...in 의 경우 속성이 출력이 되었고, for...of의 경우 속성의 값이 출력이 되었습니다. 상황에 따라 맞게 사용하면 될 것 같습니다.

◆ forEach 문

forEach 문은 함수형 프로그래밍이 유명해지면서 요즘 많이 사용되고 있습니다.

arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])

배열 내장함수로 포함되어 있습니다. 아래 2개의 코드는 같은 동작을 하고 있습니다.

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

for(let i = 0 ; i < tmpArr.length ; i++) {
    console.log(`${i} : ${tmpArr[i]}`); 
}

tmpArr.forEach((item, index) => {
    console.log(`${index} : ${item}`); 
})

그렇다면 for문이랑 forEach랑 별반 차이 없지 않냐? 라고 생각하실 수 있습니다. 맞습니다. 기능 자체는 반복을 하는 것이기 때문에 동일합니다. 그러나 filter, sort, reduce, ... 등 다른 함수들과 사용할 때 for 문보다 더 편하고 가독성 있는 코드를 구현할 수 있습니다. 그리고 가장 큰 차이점은 중간에 반복을 멈출 수 있는 지 입니다. for문의 경우 for문에서 본 예시에서 보았듯이 break로 반복을 멈출 수 있습니다. 그러나 forEach의 경우 중간에 멈출 수 없습니다. 배열 크기가 100이면 100번 반복을 해야하는 것입니다. 무조건 배열 크기만큼 반복을 해야하거나 다른 배열 내장 함수와 같이 사용할 경우 forEach를 사용하는 것을 생각해보시면 됩니다.

◆ 간단정리

for 문으로 나머지를 모두 대체할 수 있다. 어차피 이것으로 다 만들 수 있음.

for, for...in, for...of 는 중간에 멈출 수 있다.

forEach 는 중간에 멈출 수 없다.

for...in 은 key 반복

for...of 는 key의 value 반복

◆ 참고자료

• for...in 알아보기
• for...of 알아보기

마지막

해당 내용은 틀릴 수도 있다는 것을 감안하여 봐주세요. 틀린 내용 및 오탈자 수정 요청 환영입니다.