반복문

---

반복문(iteration statements)이란?

• 반복문은 조건식의 평가 결과가 참인 경우 코드 블럭을 실행한다. 그 후 조건식을 다시 평가하여 여전히 참인 경우 코드 블럭을 다시 실행한다. 이를 조건식이 거짓이 될 때까지 반복한다.

1. for 문

---

• for 문은 조건식이 거짓으로 평가될 때까지 코드 블럭을 실행한다.

기본 문법

for (변수 선언문 또는 할당문; 조건식; 증감식) {
  조건식이 참인 경우 반복 실행할 문;
}

let myNum = [79, 98, 86, 61];

for (let n = 0; n < myNum.length; n++) {
  console.log(myNum[n]);
}

let myNum = [10, 20, 40, 10];
let sum = 0;

for (let n = 0; n < myNum.length; n++) {
  sum = sum + myNum[n]; 
}  // 80

• 아래 예제는 i 변수가 0으로 초기화된 상태에서 시작하여 i가 num보다 작을 때까지 코드 블럭을 5번 반복 실행한다. 예제의 for 문의 동작 순서는 다음과 같다.

// 1부터 num까지 숫자의 합을 구하는 for문
function sumTo(num) {
  let sum = 0;

  for (let i = 1; i <= num; i++) {
    sum = sum + i;
  }
  return sum;
}

console.log(sumTo(5));  // 15

1. for 문을 실행하면 제일 먼저 변수 선언문 let i = 0이 실행된다. 변수 선언문은 단 한번만 실행된다.

2. 변수 선언문의 실행이 종료되면 조건식이 실행된다. 현재 i 변수의 값은 0이므로 조건식의 평가 결과는 true이다.

3. 조건식의 결과가 true이므로 코드 블럭이 실행된다. 증감문으로 실행 흐름이 이동하는 것이 아니라 코드 블럭으로 실행 흐름이 이동하는 것에 주의해야 한다.

4. 코드 블럭의 실행이 종료되면 증감식i++가 실행되어 i 변수의 값은 1이 된다.

5. 증감식 실행이 종료되면 다시 조건식이 실행된다. 변수 선언문이 실행되는 것이 아니라 조건식이 실행되는 것에 주의해야 한다. 현재 i 변수의 값은 1이므로 조건식의 평가 결과는 true이다.

6. 조건식의 평가 결과가 true이므로 코드 블럭이 다시 실행된다.

7. 코드 블럭의 실행이 종료되면 증감식 i++가 실행되어 i 변수의 값은 가 된다.

8. 증감식 실행이 종료되면 다시 조건식이 실행된다. 이러한 과정이 i가 num보다 작을때까지 계속 반복되어 i가 5가 될때 조건식의 평가 결과는 false이므로 for 문의 실행이 종료된다.

2. 중첩 for 문

---

• for 문 내에 for 문으로 중첩해 사용할 수 있다.
• 아래는 두 개의 주사위를 던졌을 때 두 눈의 합이 6이 되는 모든 경우의 수를 출력하는 예제이다.

for (let i = 1; i <= 6; i++) {
    for (let j = 1; j <= 6; j++) {
        if (i + j === 6) {
            console.log(`[${i}, ${j}]`)
        }
    }
}
// [1, 5]
// [2, 4]
// [3, 3]
// [4, 2]
// [5, 1]

2. while 문

---

• while 문은 주어진 조건식의 평가 결과가 참이면 코드 블럭을 계속해서 반복 실행한다.
• for 문은 반복 횟수가 명확할 때 주로 사용하고, while 문은 반복 횟수가 불명확할 때 주로 사용한다.
• 반복할 조건 중, 초기화, 증감문은 따로, 조건식만 괄호 안에 넣어준다.

기본 while 문 문법

while (조건식) {
    조건식의 결과가 참인 경우 반복 실행할 문;
}

• for 문을 while 문으로 변경

// for 문
let sum = 1;

for (let n = 2; n <= 4; n++) {
  sum = sum + n;
}
console.log(sum);  // 10

// while 문
let sum = 1;
let n = 2;

while (n <= 4) {
  sum = sum + n;
  n++;
}
console.log(sum);  // 10

3. do ~ while 문

---

• do ~ while 문은 코드 블럭을 먼저 실행하고 조건식을 평가한다. 따라서 코드 블럭은 무조건 한 번 이상 실행된다.

let count = 0;

do {
  console.log(count);  // 0 1 2
  count++;
} while (count < 3);

4. for in 문

---

• for in 문은 해당 객체의 모든 셀 수 있는 프로퍼티(enumerable properties)를 순회한다.
• for in 문은 '객체'에 주로 사용한다. 즉, 객체 자료형에 있는 자료들을 꺼내고 싶을때 사용한다.
• 객체의 키값의 갯수만큼 반복하여 첫 번째 키값부터 마지막 키값까지 반복한다.

기본 for in 문 문법

for ('변수선언 키워드' '루프변수명' in 객체) {
// 객체의 모든 셀 수 있는 프로퍼티의 개수만큼 반복적으로 실행하고자 하는 실행문;
}

• 아래 예제의 객체 obj에는 3개의 프로퍼티가 있으며 for in 문에서 프로퍼티명(key)인 a, b, c 문자열이 루프변수 key에 대입된다.
• 루프변수에는 객체를 연관 배열로 하고, 키를 연산하는 k 나 key, 또는 프로퍼티명을 상기시키는 p 나 n(name)이란 변수명을 주로 사용하는 것이 관례이다.
• 프로퍼티값(value)을 표시할 때는 obj[key]와 같이 대괄호 연산을 사용한다.

let obj = {
    a: '가', 
    b: '나', 
    c: '다'
};

for (let key in obj) {
    console.log(key); // a, b, c
  	console.log(key, obj[key]);  // a 가, b 나, c 다
  	console.log(key + ":" + obj[key]);  // // a : 가, b : 나, c : 다
}

• 배열에 for in 문을 사용할 때는 자바스크립트에서는 배열도 objec 타입으로 인식하기 때문에 아래와 같이 결과가 나오긴 한다. 그러나 일치하는 값이 아닌 해당 배열의 index가 출력된다.

let arr = [1, 2, 3];

for (let key in arr) {
    console.log(key)  // 0, 1, 2
}

5. for of 문

---

• for of 문은 반복할 수 있는 객체(iterable objects)를 순회할 수 있도록 해주는 반복문이다.
• for of 문은 '배열'에 주로 사용한다. 즉, 배열 안에서 자료들을 하나씩 꺼내고 싶을 때 사용한다.
• for of 문은 iterable하지 못한, 즉 [Symbol.iterator] 속성을 지니고 있지 않으면 사용할 수 없다.
• 배열 뿐만 아니라 array, map, set, arguments 객체에서도 사용 가능하다.

기본 for of 문 문법

for ('변수선언 키워드' '루프변수명' of 객체) {
// 객체의 모든 셀 수 있는 프로퍼티의 개수만큼 반복적으로 실행하고자 하는 실행문;
}

let array = [1, 2, 3];

for(let key of array) {
    console.log(key);  // 1, 2, 3
}

let string = 'hello';

for(let key of string) {
    console.log(key);  // h, e, l, l, o
}

let map = new Map([['a',1], ['b',2], ['c',3]]);

for(let key of map) {
    console.log(key);  // ['a', 1], ['b',2], ['c',3]
}
for(let[key,value] of map) {
    console.log(`${key}=${value}`);  // a=1, b=2, c=3
}

for in 문과 for of 문의 차이점

• 1. for in : 객체의 모든 열거 가능한 속성에 대해 반복한다.
• 2. for of : [Symbol.iterable] 속성을 가지는 컬렉션 전용

Object.prototype.objCustom = function () {};
Array.prototype.arrCustom = function () {};

let iterable = [3, 5, 7];
iterable.foo = "hello";

for (let key in iterable) {
  console.log(key);  // 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (let value of iterable) {
  console.log(value);  // 3, 5, 7
}