[JavaScript] 반복문 while과 for 이해하기

개념

while

var a = 1;
while (a < 3) {
  document.write(a);
  a++; // 무한 반복을 방지하기 위한 장치
};

while은 평가 결과가 false가 나올 때까지 문장을 무한 반복하여 실행한다. 무한 반복 방지를 위해 위의 코드처럼 'a++'같은 장치가 필요하다.

 

(  ) 안에는 조건식이 들어가며, {  } 안에는 조건식이 true일 때 실행될 문장이 들어간다.

따라서, a가 3보다 작을 때 k를 문서에 작성하겠다는 뜻이다. 밑에 k++가 있기 때문에 처음 1이었던 a는 2가 되어 다시 처음 조건식으로 돌아간다.

 

do ~ while

var a = 1;
do {
  document.write(a);
  a++;
} while (a < 3) {
  document.write("done"); // false일 때 실행문 (필수 아님)
};

do ~ while은 while과 다를바가 없다. do에 해당하는 문장을 while의 조건식의 결과가 true인 경우 무한 반복하라는 뜻이다. while 뒤에 오는 {  } 안의 실행문은 조건식의 결과가 false인 경우 실행되는 문장으로 필수가 아닌 선택이기 때문에 false인 경우 무시하고 싶다면 굳이 쓰지 않아도 된다.

 

for

for (var k = 0; k < 2; k++) {
  document.write(k);
};

while에서는 따로 초기값을 선언해야 하고, 누적연산자를 통해 무한 반복을 방지했었다.

for는 따로 선언할 필요없이, (  )안에 초기값; 조건문; 누적연산자를 넣어 한 줄로 압축할 수 있다.

실행 순서는 "① var k = 0; ② k를 k < 2와 비교 ③ true인 경우 {  }안의 문장을 실행한다 ④ k++로 이동  ⑤ k < 2에 false가 나올 때까지 반복"이며 (  )안의 각각의 값들은 모두 생략이 가능하다.

 

참고로, for와 while은 둘 다 반복문이라는 공통점을 가진 식으로 while문은 for문으로, for문은 while문으로 상호 바꿔쓸 수 있다. 보통 for가 while보다 직관적이기 때문에 for를 주로 쓴다.

 

for ~ in

var myName = "Shawn";
var result = {
  name: myName
}
for (var item in result) {  // item이 아닌 임의의 이름을 선언해도 된다. (var도 생략 가능)
  document.write(result[item]);
}
/* result[item] = Shwan */
/* item = name */

사실 for ~ in문은 반복문과 전혀 상관없는 식이다. 하지만, for와 외관상으로 비슷하다는 이유로 헷갈릴까봐 for문과 같이 한 페이지에 정리하고자 가져왔다. 우선 for ~ in을 쓰기 위해서는 오브젝트가 필요하다.

위의 코드에서 var result = {  }의 형태로 되어있는 부분이 바로 Object이다. 

오브젝트 안에는 name과 name의 값인 myName 프로퍼티(속성)가 존재하는데, 이 프로퍼티를 가져오는 역할을 수행하는 게 바로 for ~ in문이라고 할 수 있다.

 

var myName = "Shawn";
var result = new Object;  // 오브젝트를 이런 식으로 만들 수 있다.
result.name = myName;  // 오브젝트의 프로퍼티를 이런 식으로 만들 수 있다.

for (var item in result) {
  document.write(result[item]);
}
/* result[item] = Shwan */
/* item = name */

오브젝트를 만드는 방법은 다양한데, 맨 위의 코드처럼 var result = { 프로퍼티 }의 형식으로 써도 되지만 생성연산자 new를 이용하여 var result = new Object; 처럼 오브젝트를 만들 수 있다.

이렇게 오브젝트를 만들면, 안에 프로퍼티들은 .(점)을 이용하여 만들 수 있는데, '오브젝트 명.프로퍼티 명 = 프로퍼티 값'의 형식으로 표현한다.

 

문제

for문과 while문을 각각 활용하여 구구단 2단을 만들어라.

// 1. for문 활용
for (i = 1; i <= 9; i++) {
  var result = 2 * i;
  document.write(2 + "X" + i + "=" + result + "<br>")
};

// 2. while문 활용
var i = 1;
while (i <= 9) {
  var result = 2 * i;
  document.write(2 + "X" + i + "=" + result + "<br>")
  i++;
}

for문에서 while문으로 바꿀 때는 초기값 변수를 먼저 선언해주고, 실행문 안에 누적연산자를 넣어준다.

 

for문과 while문을 각각 활용하여 구구단 n단을 만들어라.
(단, 구구단의 n은 유저가 직접 입력한 값을 변수로 가져와야 한다.)

// 1. for문 활용
var num = prompt("구구단 몇 단?")
for (i = 1; i <= 9; i++) {
  var result = num * i;
  document.write(num + "X" + i + "=" + result + "<br>")
}

// 2. while문 활용
var num = prompt("구구단 몇 단?");
var i = 1;
while (i <= 9) {
  var result = num * i;
  document.write(num + "X" + i + "=" + result + "<br>")
  i++;
}

prompt()는 유저에게 질의하는 함수로, 페이지가 로드되면 값을 입력하는 창이 뜨게 된다.

※ 참고로 prompt()로 반환된 값은 모두 "String" 타입이라는 것을 알아두자!

 

이중 for문을 활용하여 2단에서 9단까지의 누적 구구단을 만들어라.
(단, 구구단의 n단은 유저가 직접 입력한 값을 변수로 가져와야 한다.)

var userNumber = parseInt(prompt("구구단 몇 단?"));
if (userNumber < 2) {
  alert("2 이상의 숫자를 입력해주세요.");
} else if (isNaN(userNumber) == true) {  // userNumber가 문자라면
  alert("문자는 입력하실 수 없습니다.")
}

for (i = 2; i <= userNumber; i++) {
  if (userNumber > 9) {
    alert("9 이하의 숫자를 입력해주세요.")
    break;  // userNumber의 숫자가 9 초과면, 즉시 중단한다.
  }
  document.write(i + "단<br>");
  for (j = 1; j <= 9; j++) {  // for문안에 for문 (이중 for문)
    var result = i * j;
    document.write(i + "X" + j + "=" + result + "<br>")
  }
}

parseInt()는 정수(양의 정수, 0, 음의 정수)를 리턴해주는 함수이며, prompt()와 같이 유저에게 정보를 얻어올 때

소수 정보를 정수로 바꿔주는 역할로 쓰면 좋다.

isNaN()은 숫자면 false, 문자면 true를 반환하는 함수로, 연산이 가능한 숫자의 값인지를 확인한다.