어차피 다 똑같은 반복인데 for문만 사용하면 안되는걸까

자바스크립트에는 다양한 반복 방법이 존재합니다.

먼저 문의 형태인 `for, for...of, for...in, while, do while`이 있습니다.

그리고 메서드의 형태인 `forEach, map, reduce, some, every, find, filter,` ...등이 있습니다.

아니 어차피 반복하는 것이 목적인데, for 하나면 충분하지 않을까요?

왜 이렇게 다양한 반복 방법이 존재하는 걸까요?

 

 

 

코드는 반복이 싫어요

사실 반복을 위해서는 for문도 필요가 없습니다.

그냥 코드를 여러번 쓰면 됩니다.

 

초보 vs 고수

 

위의 그림처럼 별 다섯 줄을 출력하는 코드는 그냥 여러번 쓰는 것이 더 효율적입니다.

하지만 별 5천 줄, 5만 줄을 출력해야 한다면,

그리고 실무에서 5백만 행의 데이터를 반복해서 처리해야 한다면 얘기가 달라질 거에요.

 

우리는 비효율을 피하고, 효율적이고 빠르게 일을 처리하기 위해 프로그래밍을 하잖아요?

그래서 우리는 코드의 반복을 줄이기 위해 반복문을 사용합니다.

 

 

 

for는 가장 완벽한 반복문일지도 몰라요

왜냐하면 사실 거의 모든 반복 작업은 for 문으로 표현이 가능하니까요.

 

예시로, while 문을 for 문으로 바꾸면 다음과 같습니다.

// while 문
let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

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

 

조금 더 의사코드(pseudo-code)의 형태로 단순화해서 바라보면,

while (condition) {
  body
}

for (; condition; ) {
  body
}

 

이런 느낌입니다.

사실상 하는 일은 거의 비슷하다고 보면 됩니다.

 

다른 것도 볼까요?

map은 이렇게 바꿀 수 있습니다.

const arr = [1, 2, 3];

const result1 = arr.map((item) => item * 2);

// result1은 아래 result2와 동일한 결과를 가집니다.
const result2 = [];
for (let i = 0; i < arr.length; i++) {
  result2.push(arr[i] * 2);
}

 

마찬가지로 filter도 for문으로 구현할 수 있습니다.

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

const result1 = arr.filter((item) => item % 2 === 0);

// result1은 아래 result2와 동일한 결과를 가집니다.
const result2 = [];
for (let i = 0; i < arr.length; i++) {
  if (arr[i] % 2 === 0) {
    result2.push(arr[i]);
  }
}

 

find도 마찬가지입니다.

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

const result1 = arr.find((item) => item > 3);

// result1은 아래 result2와 동일한 결과를 가집니다.
let result2;
for (let i = 0; i < arr.length; i++) {
  if (arr[i] > 3) {
    result2 = arr[i];
    break;
  }
}

 

그럼 for문만 쓰면 되는데, 왜 이런 다양한 반복문과 메서드들이 존재하는 걸까요?

 

 

 

다 의도가 있어서 그래

 

while문은 for문으로 풀어 쓸 수 있고, 마찬가지로 for문도 while문으로 구현할 수 있지만 두 반복문은 의도가 다릅니다.

 

보통 반복 횟수가 중요하고 증감이 분명한 경우에는 for문을 사용하고,

반복 횟수보다는 종료 조건이 중요하고 증감 방식이 상대적으로 자유롭다면 while문을 사용합니다.

 

예를 들어, 0에서 100까지 증가하며 반복해야 한다면 for문이 자연스럽고

사용자 입력이 들어올 때까지 계속 반복해야 한다면 while문이 자연스럽습니다.

 

영어 단어를 봐도 그래요. for는 주어진 조건을 "위해" 반복하는 느낌이라면 while은 주어진 조건이 "지속되는 동안" 반복하는 느낌이죠.

 

 

 

템플릿처럼... 필요할 때 쉽게 쓰는 메서드의 추상화

고수분들은 이미 눈치채셨겠지만, for문으로 복잡한 반복을 구현한 것들은 좀 길고 장황합니다.

코드만 딱 봤을때 뭘 하려는 건지 한 눈에 들어오지 않아요.

 

반면 메서드를 사용한 코드는 명확하고 쉽게 읽힙니다.

// 좀 장황하고, 한 눈에 들어오지 않아요.
let hasNegative = false;
for (let i = 0; i < arr.length; i++) {
  if (arr[i] < 0) {
    hasNegative = true;
    break;
  }
}

// 쉽게 읽힙니다. 코드도 짧습니다.
const hasNegative = arr.some(x => x < 0);

 

기본적으로 메서드는 이런 복잡한 구현을 추상화한 것입니다.

 

메서드에는 동작에 대한 명확한 의도가 담긴 이름이 붙어 있습니다. 그래서 읽고 이해하기도 쉽습니다.

또 메서드는 기본적으로 함수이기 때문에 재사용이 가능합니다. 그래서 중복 코드도 적어집니다.

또 이런 언어 레벨에서 지원하는 메서드는 내부적으로 성능 최적화가 되어 있는 경우가 많습니다. 따라서 의도대로만 잘 사용한다면, 직접 구현하는 것보다 빠르고 효율적입니다.

 

---

 

for는 거의 모든 반복을 표현할 수 있고, 잘 동작합니다.
하지만 단지 동작하는 코드를 만드는 일이 프로그래밍의 전부라면 좀 아쉽겠죠.

 

우리는 여러 명이 협업하여 만드는 큰 프로그램을 유지보수해야 하기에, 사람이 읽고 이해하기 쉬운 코드를 작성합니다.

그래서 같은 반복이라도 그 의도를 잘 드러내기 위한 알맞은 코드를 골라서 쓰는 것 같아요.
무엇을 하려는지 그 의도가 바로 읽히는 쉽고 좋은 코드 작성.. 저도 계속 연습해 봐야겠습니다.