[JavaScript] 04. 반복

교재 : 비전공자를 위한 프로그래밍 입문 - 04. 반복

반복문 

: 어떤 동작을 반복할 때 사용한다. 

 

 while문

반복 조건을 만족하는 동안 { } 안에서 설정해놓은 것을 반복한다.

while(반복조건) {
   반복하고 싶은 처리기능(복수행 가능함)
}

반복조건에 대한 변수 정의(선언 및 초기화)
...
while(반복조건식) {
   반복하는 처리
   반복조건에 대한 변수 업데이트
}

카운터 변수(counter variable) = 루프카운터(loop counter) : 반복 조건을 위해서 사용되는 변수

 

[예제]

const DIAM = 100;
let x = 50;
let cnt = 1; // 10 회 계산하기 위한 초기화 변수

function setup() {
  createCanvas(1000, 200);
  background(102, 103, 171);
  noLoop();
}

function draw() {
  while (cnt <= 10) { // 카운터 변수 : 변수 cnt가 10이하인 동안 반복 
    circle(x, height / 2, DIAM);
    x += 100;
    cnt += 1; // 변수 cnt를 1씩 증가
  }
}

 

 

 for문

카운터 변수 준비, 반복조건 확인, 카운터 변수 업데이트를 구문에 포함시킨 것.

· ( )안에 3개 항목은 때에 따라 생략 가능하다.

· 카운터 변수 준비, 업데이트에서는 ,콤마를 이용해 복수 배열이 가능하다.

for (카운터 변수준비; 반복조건식; 카운터변수 업데이트) {
   반복하는 처리
}

( ) 괄호 안에서 구분 기호는 ;세미콜론이다.

 

 

[예제]

// 카운터 변수 준비, 업데이트 생략
let x = 50;

for (; x < width;) { // while(x < width)과 동일함
  circle(x, height / 2, DIAM);
  x += 100;
}

let x = 50;

for (; x < width; x += 100) { // 준비만 생략
  circle(x, height / 2, DIAM);
}

// ,콤마를 사용하여 카운터 변수 준비, 업데이트 부분에서 복수로 배열 가능

for (let i = 0, x = 50; i < 5; i += 1, x += 100) {
  circle(x, height / 2, DIAM);
}

 

for문 중첩

if문과 마찬가지로 for문 안에 for문을 넣어 중첩으로 사용할 수 있다.

 

[예제]

const DIAM = 100;

function setup() {
  createCanvas(500, 500);
  background(102, 103, 171);
  noLoop();
}

function draw() {
  for (let y = 50; y <= height; y += 100) {
    for (let x = 50; x <= width; x += 100) {
      circle(x, y, DIAM)
    }
  }
}

▽ 실행화면 ▽