반복문

yeonhwan619·2022년 8월 25일

JavaScript

기록) JS 기초

목록 보기

6/10

for 반복문을 사용하여 자바스크립트에서 반복되는 작업을 단순화하자

• 자바스크립트에서의 반복문

1) for 문

자바스크립트에서 반복문을 사용하기 위한 첫번 째 방법으로는 키워드 ' for '를 사용하여 for 문을 코드안에서 선언하는 것이다. for 반복문의 문법은 다음과 같다.


for(선언식; 조건식; 증감식) {
  반복시키길 원하는 코드문
}

다음과 같은 형식의 문법을 지킬 경우, 자바스크립트는 for 문안의 조건식을 판단하여, 조건식의 판별값이 참일 경우 동안 코드 블록 안에 있는 코드를 실행시킬 것이다. for문을 사용하여 10이하의 자연수를 모두 더해보자.

let sum = 0;
for(let i = 1; i <= 10; i++) {
  sum += i;
}

console.log(sum); //55

for 문의 선언식에는 새롭게 변수를 선언하여 조건식과 증감식에서 활용할 수도 있으며, 이미 존재하고 있는 변수를 할당하여 for 문에서 활용할 수 있다. (다만 이렇게 할 경우, for 문의 증감식을 통해 변수의 값이 오염될 수 있기 때문에 추천하지 않는다.) for 문의 조건식 안에 어떠한 식도 선언하지 않을 수 있는데, 이럴 경우 for 문은 무한루프를 돌며 코드를 실행하게 된다.

⚐
for 문 안에 또 다른 for 문을 사용하는 중첩 for문을 사용하여 코드를 작성할 수도 있다.

//중첩 for문을 사용해서 구구단을 출력해보자

for(let i = 1; i <= 9; i++) {
  for(let j = 1; j <=9; j++) {
    console.log(`${i} * ${j}`);
  }
}

2) while 문

자바스크립트에서 반복문을 선언하는 또 다른 방법은, ' while ' 키워드를 사용하는 것이다. while 문의 문법은 다음과 같다.

while(조건식) {
  반복시키길 원하는 코드문
}

for 문과 동일하게 while 문 또한 조건식이 참인지 거짓인지를 판별하여, 조건식의 값이 참일 경우 코드 블록 내에 존재하는 코드를 반복시키며 실행한다. 여기서 주의해야 할 것은 while 문은 for 문과는 다르게 '( )' 내에 조건의 증감식을 작성할 수 없기 때문에 while 문의 코드블록 내에 증감식 과 탈출조건을 작성해주어야 한다는 것이다. 만약 아무런 탈출조건이 적혀있지 않다면 while 문은 무한루프를 돌며 코드 문을 실행시킨다.

// 10 이하의 자연수를 모두 더한 합을 구해보자.
let sum = 0;
let count = 1;
while(count <= 10) {
  sum += count;
  count++;
}
console.log(sum, count); // 55 11

조건식을 while 문의 코드블록내에 작성함으로써 반복문을 탈출할 수 있다. 다음은 무한루프를 만든뒤 if 조건문과 break 키워드를 통해서 탈출하는 방법이다.

let count = 0;
while(1) {
	console.log(`현재 count 값은 ${count}입니다. 10일 때, 탈출합니다.`);
  if(count === 10) break;
  count++;
}
console.log(count); // 10;

⚐
do.. while 문은 while 문과는 다르게 코드 블록을 반드시 먼저 실행시킨뒤, while문의 조건식을 판별한다. 따라서, while 문의 조건식이 거짓일지라도 반드시 한 번은 코드가 실행된다. 코드의 논리에 맞게, while 문과는 다르게 while 키워드의 위치가 반복문의 맨 아래로 변경된다.

let sum = 0;
let count = 1;
do{
  sum += count;
  count++
} while(count <= 10)
  console.log(sum, count); // 55, 11

do{
  sum += count;
  count++
} while(count <= 10);

console.log(sum, count); // 66, 12 (조건식이 거짓임에도 실행이 되었다.)

3) 키워드 break 과 continue

키워드 break 과 continue를 사용하면 반복문을 보다 의도에 맞게 조절하여 사용할 수 있다.

1. break

break 키워드를 사용하면 레이블 문, 반복문, 또는 switch 문의 코드 블록을 탈출한다. 코드가 순차적으로 진행되다가, break 키워드를 만나는 순간 해당 코드 블록을 탈출하게 된다. (레이블 문이란 { } 문으로 임의적으로 코드 블록을 만들어 식별자를 할당한 문을 의미한다.) 중첩된 for 문안에서 break 키워드를 사용할 경우, break 문이 작동하고 있는 해당 코드 블록을 탈출한다.

for(let i = 0; i <= 10; i++) {
  console.log(`break은 i가 7일 때 작동합니다. 현재 i는 ${i}`);
  if(i ===7) break;
}

2. continue

continue 키워드를 만나면 해당 코드는 그 즉시 continue 이후의 코드 실행을 무시하고 증감식 판별로 되돌아간다. break 키워드와는 다르게 반복문을 탈출하지는 않는다.

//continue 를 이용해서 10 이하의 홀수만을 출력하기

for(let i = 1; i <= 10; i++) {
  if(i % 2 === 0) continue;
  console.log(`현재 홀수 : ${i}`);
}

참조) Javascript DeepDive

반복문