JS Essential: 반복문

해당 게시물은 도서 <모던 자바스크립트 Deep Dive>와 패스트캠퍼스 강의 "김민태의 프론트엔드 아카데미 : 제 1강 JavaScript & TypeScript Essential"를 참고하여 작성되었습니다.

반복문

자바스크립트의 제어문 중에서, 조건문은 저번 글을 통해 알아 보았습니다. 이제 반복문을 알아볼 차례입니다.

사람은 똑같은 일을 계속 반복하는데 그리 적합하지 않습니다. 싫증이 날 수도 있고, 어디까지나 인간인지라 똑같은 결과를 매번 내지 못할 때도 있고요.

컴퓨터는 이와 다르게 전력만 공급해주면 똑같은 일을 영원히 반복할 수 있습니다. 그리고 이러한 특성을 살려 자바스크립트에도 특정 코드를 반복할 수 있는 반복문이 탑재되어 있습니다.

반복문은 조건문과 마찬가지로, 자바스크립트 코드를 짤 때 아주 빈번하게 사용되는 제어문입니다. 알고리즘을 짜거나, 자바스크립트 심화 내용을 이해하는 데에도 중요하니 꼭 짚고 넘어가야 하겠습니다.

For 문

가장 많이 쓰이는 반복문 형태인 for 문을 먼저 살펴보겠습니다. 배열을 하나 만들어서, 그 배열의 아이템을 반복하면서 나열해보려고 합니다.

const arr = [0,1,2,3,4]

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

일단 for 문의 구조를 살펴 보면, 앞 부분의 소괄호에 반복의 조건식이 들어가고, 뒤의 중괄호 안 쪽에 반복해서 실행할 코드가 들어갑니다.

앞 쪽의 소괄호 안에 들어가는 부분은 세미콜론을 기준으로 세 부분으로 나뉘어 집니다.

반복문 실행 시 최초 1회만 실행하는 부분 / 반복을 유지하는 조건식 / 반복문 실행 시 매번 실행할 부분

위 코드를 풀어보면, 반복문 최초 실행 시 변수 i에 0이라는 값을 할당합니다.

그리고 두 번째 부분에서는 i값을 비교해서, 5보다 작다면 반복문을 실행합니다.

마지막 i++는 증감형 연산자라는 것으로, 코드가 실행된 뒤 i에 1을 더해주라는 의미입니다.

그래서 처음에 i가 0이었으니까, 콘솔에는 arr[0]이 찍힐 것입니다. 그 다음번에는 arr[1]이 출력되겠죠.

그러다가 i가 5가 되는 순간, 반복문은 실행되지 않고 끝납니다. 저번 글에서 살펴본 switch문의 break처럼요.

While 문

방금 for 문을 예시를 통해 살펴보았습니다. for 문이 가장 기본적인 형태고, 다른 종류의 반복문을 통해서 똑같은 결과를 내는 코드를 한번 만들어 보겠습니다. 이번에는 while 문을 한 번 써보죠.

const arr = [0,1,2,3,4]

let i = 0;

while(i < 5) {
  console.log(arr[i]);
  i++;
}

아까 for 문에서는 i라는 변수를 반복문 내에서 선언해주었습니다. 하지만 while 문 같은 경우에는 함수 바깥에서 전역으로 선언해주었습니다.

그 이유는 while 문 안에는 반복문을 유지하는 조건식 하나만 들어가기 때문입니다.

그리고 console.log 뒤에 i를 1씩 증가시키는 증감형 연산자를 사용해주었습니다. 왜 인지 감이 오시죠?

i++라는 코드를 while 문 안에 포함시키지 않으면 i는 영원히 5보다 작을 것이고, 그렇게 되면 console.log(arr[i])라는 코드는 영원히 실행될 것입니다.

이러한 상황을 무한 루프 라고 칭하고, 이를 막기 위해 뒤에 i의 값을 증가시키는 코드를 포함시킨 것입니다.

참고로, 예시로 든 while 문은 do...while 의 형태로도 작성할 수 있습니다.

...

do {
  console.log(arr[i]);
  i++;
}
while(i < 5) 

실행할 코드와 조건식의 순서가 바뀌었습니다. 이렇게 되면 원래 while 문과 한 가지 차이점이 있습니다. 바로 조건식 보다 실행할 코드가 먼저 오기 때문에, 무슨 일이 있어도 한 번은 실행된다는 것이죠.

while문은 실행할 코드가 뒤에 있기 때문에, 만약 조건식이 처음부터 충족되지 않는다면 아예 아무것도 실행하지 않을 것입니다. do...while 문은 그런 상황에서도 무조건 한번은 코드를 실행합니다.

결론적으로 어떤 일이 있어도 최소 한번은 실행해야 하는 반복문을 만들어야 한다면 do...while이 적합합니다.

For...of 문, For...in 문

이번엔 조금 더 세련된 반복문을 들고 와 봤습니다. for...of 문입니다.

const arr = [0,1,2,3,4]

for(const item of arr) {
 console.log(item)
}

for...of 문의 조건식은 조금 특이합니다. item of arr라는 것은 arr라는 배열 변수에 들어있는 아이템들을 지칭합니다.

(이름은 item이 아니어도 상관없습니다. 원하시는 걸로 지으시면 되요.)

그러고 이 item을 넣은 코드를 실행하면 배열 안의 아이템을 순차적으로 넣어서 코드를 실행해줍니다. 코드도 좀 짧아졌고, 쓰기도 쉽죠.

for...of 문은 배열의 특정 위치와는 상관없이 쭉 한번 순회하는 데 적합합니다.

배열과 관련해서 사용할 수 있는 반복문이 하나가 더 있는데, 바로 for in 문입니다.

const arr = [0,1,2,3,4]

for(const index in arr) {
 console.log(arr[index])
}

for...of 문과 거의 비슷합니다. 그런데 한 가지 차이점이 있네요. 콘솔에 출력할 내용은 arr[index]를 가져오고 있습니다.

for...of가 배열 내의 아이템을 하나씩 꺼내 반복문을 실행하는 것과 달리, for...in은 배열 내의 아이템들의 위치를 하나씩 꺼내옵니다.

그래서 동일한 결과를 출력하려면 arr[index]로 접근하는 것입니다. index 안에는 배열의 아이템 그 자체가 아니라 위치값이 들어오기 때문입니다.