JavaScript 기초5 반복문(iteration)

 

 

• 학습내용

 반복문이란 컴퓨터에게 같은 동작을 반복하여 수행하도록 지시를 내리는 것이다. 좀 더 코드적으로 보자면 프로그램 소스 코드 내에서 특정한 코드가 반복하도록 지시하는 구문이다. 예를 들어 보면 우리가 구구단 2단을 코드로 작성한다고 하면 이렇게 작성할 수 있다.

let num = 2;
console.log(num * 1);
console.log(num * 2);
console.log(num * 3);
console.log(num * 4);
console.log(num * 5);
console.log(num * 6);
console.log(num * 7);
console.log(num * 8);
console.log(num * 9);

그러나 이러한 반복은 인간에게는 아주 지루하고 피곤한 작업이다. 이 반복을 반복문으로 컴퓨터가 대신 수행하도록 할 수 있다. 

let num = 2;
for (let i = 1; i < 10; i++) {
  let result = num * i;
  console.log(result);
}

만약 반복의 수가 기하급수적으로 늘어난다면 반복문의 유용함 역시 기하급수적으로 늘어날 것이다. 

 

• while문

 자바스크립트에는 대표적으로 2가지의 반복문 형태가 있다. 먼저 while문이다. 

let i = 0;
while (i < 4) {
  console.log(i);
  i++;
}

while문은 이런 형태로 작성한다. 기본적으로 반복문에는 초기화, 조건, 증감문으로 구성되는데, while문의 경우 먼저 초기화를 하고, 조건을 지정한 후 while문 내부에 증감문을 넣어주는 구조이다. 여기서 주의할 점은 while문의 형태는 전위형 증감 연산자('++i')인지 후위형 증감 연산자('i++')인지에 따라 결괏값이 다르다는 것이다. 전위형은 증감을 먼저 한 후 값을 할당하고 후위형은 할당을 먼저 한 후 증감을 한다. 그렇기 때문에 전위형 증감 연산자를 사용한 경우 i = 4, 4 < 4인 경우 먼저 증감을 하기 때문에 4로 증가한 후 결과를 반환한다. 그러나 후위형 증감 연산자는 반대로 i = 4, 4 < 4인 경우 반환을 먼저 하기 때문에 조건을 통과하지 못해 3까지만 출력하는 모습을 보여준다.

 

 while문의 경우 무한으로 반복시키는 방법이 있다. 조건에 'true'를 사용하면 조건이 falsy를 불러오지 않는 이상 무한히 반복된다.

let i = 0;
while (true) {
  console.log(i);
  i++;
  if (i === 4) {
  break
  }
}

이와 같은 방법으로 사용할 수 있다. 단, 무한반복 루프에 빠지면 강제로 탈출하는 방법 외에는 반복을 종료시킬 수 없다. 그래서 if조건문 내에서 'break'를 사용해 탈출을 지정해 줄 수 있다.

 

 while문은 또한 do ~ while문의 형태로도 작성할 수 있다.

let i = 0;
do {
  console.log(i);
  i++;
} while (i < 4);

이렇게 사용하면 본문이 먼저 실행되고 조건을 나중에 확인하는 형태로 코드가 진행된다. do ~ while 형태는 조건이 truthy여부와 상관없이 본문을 한번이라도 실행시키고 싶을 때 사용하는 방법이다. 

 while문은 코드가 한줄로 작성된다면 {} 중괄호를 생략할 수 있다.

let i = 3
while(i) console.log(i--);

 

• for문

 두번째 반복문 형태는 for문이다.

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

for문은 이러한 형태로 작성한다. 조건 안에 초기화와 조건 그리고 증감문을 ;(세미콜론)으로 구분하여 한번에 작성한다. 

초기화와 조건문 증감문을 생략할 수 있다. 생략하는 경우에는 세미콜론만 넣어 생략을 표현한다.

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

 

• break와 continue

 기본적으로 반복문은 조건이 falsy가 되면 본문을 탈출한다. 그 외에도 위에서도 살핀 break를 사용하여 본문을 탈출할 수 있다. 조건문을 활용하여 break를 지정해주면 그 조건이 truthy일 때 break가 작동하여 그 반복문을 탈출한다.

let i = 0;
while (true) {
  console.log(i);
  i++;
  if (i === 4) {
  break
  }
}

 continue는 작동원리는 break와 같지만 break와 다르게 조건에 truthy한 값들을 넘어간다.

let i = 0;
while (i < 10) {
  i++;
  if (i % 2 === 0) {
  continue
  }
  console.log(i);
}

 

• 레이블

 중첩된 반복문을 빠져나와야 하는 경우가 있다. 그러나 일반적인 방법으로 break나 continue를 사용해서는 중첩 반복문을 탈출할 수 없다. 예를 들어 이런 경우는 반복문을 탈출하지 못한다.

let n = 50;
for (let i = 2; i <= n; i++) {
  for (let j = 2; j < i; j++) {
    if (i % j === 0) {
     continue
    }
  }
console.log(i)
}

위는 소수를 구하는 반복문이다. 그러나 이렇게 작성하게 되면 내부 for문에서만 continue가 작동하고 외부 for문에서는 continue가 작동하지 않는다. 이때 사용할 수 있는 것이 레이블이다. 레이블은 for문 앞에 이름을 지정하고 (:) 콜론을 붙이는 식별자이다.

let n = 50;
allContinue:
for (let i = 2; i <= n; i++) {
  for (let j = 2; j < i; j++) {
    if (i % j === 0) {
     continue allContinue
    }
  }
console.log(i)
}

레이블은 이렇게 사용할 수 있다. 이렇게 사용하면 continue에서 레이블을 부르고 위치를 식별하여 continue를 진행한다. 이렇게 중첩된 반복문을 모두 탈출할 수 있다.