자바스크립트의 반복문의 종류와 각각의 사용법, 특징 등에 대한 내용입니다. 😊

🔃 자바스크립트의 반복문

반복문(loop)은 프로그래밍에서 일정 구간을 조건에 따라 지속적으로 반복하는 구문을 의미한다.

반복문을 사용하면 단순히 같은 기능을 하는 구문들을 비효율적으로 여러 번 작성하지 않고, 한 번의 구문 작성만으로 똑같은 작업을 실행할 수 있다.

자바스크립트에는 대표적인 반복문으로 for 문과 while 문이 있고, while 문의 경우 변형되어 do~while 문으로도 작성 가능하다.

이번 포스팅에서는 해당 세 가지의 반복문 형태와 각각의 사용법 그리고 특징을 구분지어 알아볼 것이다.

For 문

for 문은 자바스크립트 반복문 생성 시, 일반적으로 사용하는 반복문 형태이다.

for 문 또한 변형된 형태가 몇 가지 존재하는데, 해당 형태들이 언제 사용되는지 그리고 어떻게 작동하는지에 대해 함께 알아볼 것이다.

For 문의 문법

기본적인 for 문은 for 키워드를 통해 작성 가능하고 구성 요소로 변수 초기화, 조건식, 증감식이 있다.

let arr = [1, "two", true]

for (let i = 0; i < arr.length; i++) {
	console.log(arr[i]) 
} // output : 1 two true

위 예시는 배열 arr 을 순회하며 console 에 arr 의 각 요소들을 출력하는 작업을 진행한다.

예시에서 for 다음의 괄호 안에 세미콜론(;)으로 구분된 요소들이 for 문의 구성 요소에 해당한다.

우선 let i = 0 을 통해 배열을 순회할 인덱스 요소가 될 변수 i를 선언과 동시에 초기화한다. 이어서 i 가 배열 arr 의 길이(arr.length) 보다 짧아야 함을 조건으로 제시하고, 반복의 기준이 되는 i 가 어떻게 변화할지에 대한 증감식을 작성한다. 예시의 경우 하나씩 증가하도록(i++) 작성하였다.

그렇게 작성된 해당 for 문은 총 배열 길이인 3 만큼 console.log(arr[i]) 구문을 반복하여 위와 같은 결과를 출력한 것이다.

💡 for 문의 동작 순서

for 문의 동작 순서에 대한 이해는 for 문의 작성에 있어 유연한 작성에 도움을 준다.

for (A; B; C) {
   D
}
// A : 변수 초기 선언, B : 조건식, C : 증감식, D : 실행 구문

위 예시는 for 문 요소들의 각 위치를 알파벳으로 정의한 것이다.

for 문의 변수 초기화(A)는 for 문 시작과 함께 처음에만 실행되고 이후 반복 실행하지 않는다. 이후 조건식(B)으로 넘어와 제시된 조건의 반환 값이 true 인지를 구분하여 true 일 경우, 구문(D)을 실행한다. 그리고 증감식(C)으로 넘어와 증감식에 해당하는 변화를 준다.

이후엔 다시 조건식으로 넘어와 조건을 확인하고, 구문을 실행한 뒤, 다시 증감식을 실행하는 것을 반복한다. 해당 순서를 작성하면 다음과 같다.

: A → B → D → ( C → B → D → ) (이후 괄호 안 반복)

for 문이 해당 순서로 작동하기 때문에, 이를 고려하여 for (let i = 0; i < arr.length; i++) 와 같은 보편적인 형태가 아니라 유동적으로 조건식과 증감식을 작성하여 for 문을 더욱 효과적으로 활용할 수 있다.

이어서 for 문 구성 요소의 기능에 대해 자세히 알아보자.

구성 요소 중 변수 초기화(위 예시 A) 부분의 경우, 배열의 인덱스 변수의 초기화 외에도 해당 반복문에서 사용될 변수의 초기화에 사용된다.

let arr = [1, 2, 3, 4, 5]

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

해당 예시의 경우, 조건식에서 호출되는 배열의 속성인 길이(length)에 대해 특정 변수(len)로 미리 할당하여 조건식이 순환할 때마다 배열 길이를 반환하는 과정을 생략하도록 할 수 있다. 이때, 각 변수의 초기화는 콤마(,)를 통해 구분한다.

두 번째로, 조건식(위 예시 B)의 경우 주로 초기 변수의 상태 평가에 사용되지만, 외부 전역 변수를 사용하는 등의 방식으로도 조건을 자유롭게 설정할 수 있다.

또한, 조건식의 경우에는 생략할 수도 있으며, 해당 경우에는 break 를 반복문 내부에 삽입해야 한다.

💡 break 문과 continue 문

반복문에서 반복을 제어할 수 있는 구문이다.

break 문은 반복문을 더 이상 반복하지 않고, 바로 해당 반복문을 끝내라는 의미를 갖는다.

break 문의 경우, 조건문(if 등)을 활용하여 특정 조건에 해당하는 경우 조건문을 끝내는 기능을 작성할 수 있다.

let sum = 0;
for (let number=1;; number++) // 조건식 생략 가능
{
    if ( number == 5) // 5일 경우 break 실행
    {
        break;
    }
      sum = sum+number;
      console.log(sum) // 합이 10이 되고 반복문 종료
}

continue 문은 break 문과 달리 반복문을 끝내지 않지만, continue 문을 기준으로 아래에 있는 구문을 넘기고 반복문을 진행한다.

해당 경우에도 조건문(if 등)을 활용하여 특정 조건에 해당하는 경우만 넘어가고 반복문을 진행하는 기능을 작성할 수 있다.

let sum = 0;
for (let number=1; number<=10; number++)
{
    if ( number == 5) // 5일 경우 continue 실행
    {
        continue;
    }
      sum = sum+number;
      console.log(sum) // 합이 15가 되는 경우가 사라짐
}

break 문과 continue 문은 for 문 말고도 다른 반복문(while, do~while 문)에서도 사용할 수 있다.

🔖 출처

break & continue : 연금술사님 블로그 : 반복_break/continue문

마지막으로, 증감식(위 예시 C)의 경우에는 주로 초기 변수의 증감에 사용된다. 증감식 또한 선택 사항이며 생략 가능하고, 초기 변수 외에도 다른 요소의 증감에도 사용 가능하다.

🔖 출처

for 문의 구조 : jun.hansung : JavaScript For 루프(Loop)

앞에서 알아본 기본적인 for 문 이외에도 다양한 형태가 있는데, for...in 문과 for...of 문 등이 이에 해당한다.

for...in 문은 열거 가능한 속성(enumerable)이 있는 객체들에 사용할 수 있고, 객체의 경우 객체 내 프로퍼티들을 순환하면서 key 값에 접근할 수 있다.

let obj = {
    a: 1,
    b: 2,
    c: 3
};
for (let i in obj) { // i = key 값
    console.log(i + ': ' +obj[i]);
};
// output : a: 1, b: 2, c: 3

for...of 문은 반복자(iterator)가 있는 요소들은 모두 순환할 수 있으며, String 과 같은 문자열도 각 문자를 순환할 수 있다.

let arr = ["a", "b", "c"];
for (let i of arr) {
    console.log(i);
};
// a, b, c
let fruit = 'orange';
for (let i of fruit) { // i = 'orange'의 각 문자 단위
    console.log(i);
};
// o, r, a, n, g, e

🔖 출처

for...in, for...of : Swimjiy devlog : [JavaScript] forEach, for...in, for...of 정리

💡 for...in 사용 시 주의사항

for...in 은 배열의 순회에 사용하지 않도록 한다.

그 이유는 보통 객체 프로퍼티를 순회하는데 사용하는 for...in 은 배열 요소를 순회할 경우 모든 프로퍼티를 순회하기에 일반적인 for 를 사용하는 것 보다 느린 결과를 보여준다.

또한, 브라우저마다 순회 순서가 다르기 때문에, 매번 index 순서대로 수행되지 않을 수 있다는 문제점이 존재한다.

위와 같은 이유로 배열의 순회에서는 for...in 의 사용을 지양한다.

🔖 출처

for...in 주의사항 : TOASTUI : 안티 패턴

💡 반복문과 배열(Array)

반복문과 배열은 자주 함께 사용되는데, 그 이유를 이해하기 위해 자료 구조와 탐색 알고리즘에 대해 간단히 알아보자.

배열의 자료 구조에 대한 내용은 배열 관련 포스팅에 작성 했으니, 가서 확인하고 오자!

그렇다면 탐색 알고리즘과 반복문을 연관지어서 개념을 이해해보자. 탐색 알고리즘이란 수많은 데이터 중 원하는 데이터를 찾는 알고리즘으로 선형, 이진, 해시 탐색법 등이 이에 해당한다. 그 중 지금 알아볼 선형 탐색법은 데이터를 순서대로 하나씩 검색하는 방식이다.

배열의 자료 구조에 대한 이해가 됐다면, 배열은 선형 자료 구조라는 부분을 인지했을 것이다. 선형 자료 구조의 데이터는 일대일 관계를 갖고 순차적으로 연결되어 있기에 순서대로 하나씩 검색하는 방식인 선형 탐색법이 용이하다.

그렇기 때문에 배열의 매 요소를 순환하면서 데이터를 탐색하는 반복문이 배열과 자주 사용된다고 생각할 수 있을 것이다.

While 문과 do~while 문

while 문은 for 문과 유사하지만, 문법이나 구조에 있어서 차이를 보인다.

while 문의 정해진 구조는 조건을 제시하는 부분만 존재하고, 나머지 부분은 유동적으로 작성할 수 있다.

그리고 do~while 문의 경우 while 문과 유사하지만, 실행 구조에 있어 차이를 보여준다.

우선 while 문을 먼저 알아보자.

whlie 문

while 문은 조건문이 참일 때 실행되는 반복문이고. 문장이 실행되기 전 참과 거짓을 판단한다.

while 문의 문법은 간략하게 while (condition) {statement} 으로 구성되고, condition 부분이 true 이면 statement 부분을 반복적으로 실행한다.

let i = 0 // 변수 선언

while (i < 10) { // 조건식
  console.log(i)
  i++ // 변수 증감
}

예시를 보면 while 의 경우에는 for 문과 달리 변수 초기화나 증감식을 작성하는 구간이 고정적이지 않다. 그렇기 때문에, 자칫하면 무한 루프의 구간에 빠질 수 있다.

만약, 정해진 반복 횟수가 있다면 while 보다는 for 를 사용하는 것이 효율적일 수 있다.

반대로 정해진 조건을 만족할 때까지 실행해야 하는 구문이라면 for 문 보다 while 문이 효율적일 수 있다.

앞에서도 언급했지만, while 문의 경우에도 break 와 continue 문을 사용할 수 있다.

while 문의 실행 순서를 알아보면 다음과 같다.

while (A) { // A : condition
	B // B : Statement
}

while 문은 단순하게 조건(A) 부분이 통과되면, 지문(B)을 실행하고 다시 조건으로 순환하는 구조를 갖는다.

do~while 문

do~while 문은 while 문과 조건의 위치가 다르다.

그렇기 때문에 do~while 문은 조건 여부와 상관 없이 무조건 한 번 실행하고 반복문을 진행한다.

do~while 문의 문법은 간단하게 do { statement } while (condition) 이고 다음과 같은 예시로 작성할 수 있다.

let i = 0;

do {
  console.log(i);
  i++;
} while (i < 10)

예시를 보면 실행 구문보다 조건이 아래에 적혀있다. 해당 구조를 확인하고 do~while 문의 실행 순서를 확인하면 다음과 같이 이해할 수 있다.

do {
	B
} while (A)

위와 같이 실행 구문(B)을 조건에 상관 없이 실행하고 조건(A)에 걸리므로 while 문과 다르게 조건에 일치하지 않아도 무조건적으로 한 번은 실행하는 것이다.

🔖 전체적인 참고

반복문 : ZeroCho님 개인 블로그 : 반복문(loop - while, for, do)