[JavaScript] 반복문

반복문이란?

일반명사) 되풀이하는 것

고유명사) 프로그램 소스 코드 내에서 조건을 만족할 때까지 특정한 부분의 코드가 반복적으로 수행될 수 있도록 하는 구문

반복문의 종류

for 문

for 문은 조건식이 거짓으로 판별될 때까지 코드 블록을 반복 실행한다.

문법 :

for (초기화식; 조건식; 증감식) {
    // ... 조건식이 참인 경우 반복 실행될 코드 ...
}

예시)

for (let i = 0; i < 3; i++) { // 0, 1, 2 가 출력된다.
    console.log(i);
}

초기화식 let i = 0 반복문에 진입할 때 단 한 번 실행됨.

조건식	i < 3	반복마다 해당 조건이 확인됨. false 이면 반복문을 멈춤.
본문	console.log(i)	조건이 true 일 동안 계속해서 실행된다.
증감식	i++	각 반복의 본문이 실행된 이후에 실행된다.

일반적인 반복문 알고리즘은 다음과 같다.

초기화식을 실행함
-> (조건이 true 이면 -> 본문을 실행한 후, 증감식을 실행함.)
-> (조건이 true 이면 -> 본문을 실행한 후, 증감식을 실행함.)
-> (조건이 true 이면 -> 본문을 실행한 후, 증감식을 실행함.)
-> ...

예시)

for (let i = 3; i >= 0; i--) { // 3, 2, 1, 0 이 차례로 출력된다.
    console.log(i);
}

예시) for문 내에 for 문을 중첩해 사용

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]

while 문

while 문은 주오진 조건식의 평가 결과가 거짓으로 판별될 때까지 코드 블록을 계속해서 반복 실행한다. 만약 조건식의 평가 결과가 불리언 값이 아니면 불리언 값으로 강제 변환되어 논리적 참, 거짓을 구별한다.

예시)

let count = 0;

// count 가 5보다 작을 때까지 코드 블록 반복 실행 
while (count < 5) {
    console.log(count);
    count++;
} // 0 1 2 3 4

예시) 무한 루프

// 무한 루프
while (true) { }

예시) 무한 루프 탈출

let count = 0;

// 무한 루프
while (true) {
    console.log(count);
    count++;
    // count 가 3 이면 코드 블록을 탈출한다.
    if (count === 3) break;
} // 0 1 2

do...while문

do...while 문은 코드 블록을 실행하고 조건식을 평가한다. 코드 블록은 무조건 한 번 이상 실행된다.

예시)

let count = 0;

// count 가 5보다 작을 때까지 코드 블록을 계속 반복 실행한다.
do {
    console.log(count);
    count++;
} while (count < 5); // 0 1 2 3 4

for...in 문

• ES6 에 새로 도입되었으며 객체의 속성들을 반복하여 작업을 수행할 수 있다.
• 객체의 key 값에 접근할 수 있지만 value 값에 접근하는 방법은 제공하지 않는다.
• 객체의 모든 열거 가능한(enumerable) 속성에 대해 반복
• 열거 가능한 속성: [[Enumerable]] 이 true 로 설정되어 있는 속성
• 객체의 key 값에 정해진 순서 없이 무작위로 접근한다.
• 만약 객체의 key 값에 순서대로 접근해야 하는 경우 for...in 문은 사용하면 안 된다.

예시) for...in and Objects

const person = {name: "SpongeBob", lastName: "SquarePants", age: 35}
for (let property in person) { // person 객체의 key 값에 접근
    console.log(`${property}: ${person[property]}`); 
    // person[key 값]: person 객체의 value 값에 접근 시 person 객체의 key 값 이용
}

// 결과값
// "name: SpongeBob"
// "lastName: SquarePants"
// "age: 35"

예시) for...in and Arrays

const array = ['a', 'b', 'c', 'd'];

for (const index in array) {
    console.log(array[index]);
}

// 결과: a, b, c, d

배열의 요소에 대한 key 값은 인덱스 번호이다. 인덱스 번호는 객체의 key 값처럼 enumerable 한 속성이므로 for...in 문 사용이 가능하다.

하지만, 반복이 인덱스 번호에 따라 순차적으로 일어나지 않을 수 있어 배열에 대해서 사용 가능하지만 권장하지 않음.

예시) for...in and Strings

const string = 'Ire Aderinokun';

for (const index in string) {
    console.log(string[index]);
}

// 결과: I, r, e, , A, d, e, r, i, n, o, k, u, n

문자열의 각 문자 또한 배열처럼 인덱스 번호를 가지고 있어 for...in 문 사용이 가능하다.

for...of 문

• ES6 에 새로 도입되었으며 [Symbol.iterator] 속성을 가지는 컬렉션 전용 반복 구문이다. (직접 명시 가능)
  • 컬렉션(collection) :
    • 일반명사) 관련된 물건이나 상품들의 집합
    • 고유명사) 프로그래밍 언어가 제공하는 값을 담을 수 있는 컨테이너
      • 참고) JavaScript 에서는 다음과 같은 컬렉션들이 존재한다.
        • Indexed Collection: Arrays, Typed Array
        • Keyed Collection: Objects, Map, Set, Weak Map, Weak Set
• 객체는 iterable 하지 않으므로 for...of 문을 사용할 수 없다.
• 배열, 문자열은 iterable 하므로 for...of 문을 사용할 수 있다.

예시)

// 배열은 iterable 하다.
const iterable = [10, 20, 30];

for (let value of iterable) {
    console.log(value); // 10, 20, 30
}

// 문자열은 iterable 하다.
const string = 'Ire Aderinokun';

for (const character of string) {
	console.log(character)
}
// Result: I, r, e, , A, d, e, r, i, n, o, k, u, n

 

for...in 문과 for...of 문 비교

	for...in	for...of
Applies to	Enumerable Properties	Iterable Collections
Use with Objects?	Yes	No
Use with Arrays?	Yes, but not advised	Yes
Use with Strings?	Yes, but not advised	Yes

forEach 문

• 오직 Array 객체에서만 사용 가능한 메서드 (ES6 부터는 Map, Set 등에서도 지원됨.)
• 배열의 요소들을 반복하여 작업을 수행할 수 있다.
• forEach 구문의 인자로 callback 함수를 등록할 수 있고, 배열의 각 요소들이 반복될 때 이 callback 함수가 호출됩니다.
• callback 함수에서 배열 요소의 인덱스와 값에 접근할 수 있다.

문법 :

arr.forEach(callback(currentElement, index, array) {
    // do something <- this is a callback
});

• currentElement: 배열의 각 요소들이 반복될 때 활성화된 현재 요소의 값
• index: 배열의 각 요소들이 반복될 때 활성화된 현재 요소의 인덱스 번호
• array: 현재 요소들에 대해 반복되고 있는 대상이 되는 배열

예시)

const items = ['item1', 'item2', 'item3'];

items.forEach(function(item) {
    console.log(item);
});

// 출력 결과: item1, item2, item3

반복문의 흐름 제어

break 문

break 문은 레이블 문, 반복문 (for, for...in, for...of, while, do...while) 의 코드 블록을 탈출한다.

참고) 레이블 문: 식별자가 붙은 문

• 프로그램의 실행 순서를 제어하기 위해 사용
• 레이블 문을 탈출하려면 break 문에 레이블 식별자를 지정

// foo 라는 식별자가 붙은 레이블 블록문
foo: {
    console.log(1);
    break foo; // foo 레이블 블록문 탈출
    console.log(2);
}

console.log('Done!');

// hello 라는 레이블 식별자가 붙은 레이블 문
hello: console.log('hello');

예시) 중첩된 for 문의 내부 for 문에서 외부 for 문 탈출

outer: for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) {
        // i + j === 3 이면 외부 for 문 탈출
        if (i + j === 3) break outer;
    }
}

console.log("Done!");

continue 문

continue 문은 반복문 (for, for...in, for...of, while, do...while) 의 코드 블록 실행을 현 시점에서 중단하고 반복문의 증감식으로 이동.

break 문처럼 반복문을 탈출하지는 않는다.

예시) 문자열에서 특정 문자의 개수를 카운트하는 예제

let string = 'Hello World';
let count = 0;

for (let i = 0; i < string.length; i++) {
    // 'l' 이 아니면 현 시점에서 실행을 중단하고 반복문의 증감식으로 이동
    if (string[i] !== 'l') continue;
    count++; // continue 문이 실행되면 이 문은 실행되지 않음.
}

console.log(count); // 3

참조

https://betterprogramming.pub/difference-between-javascript-loops-for-foreach-for-of-and-for-in-91cd8fe884fd

https://jsdev.kr/t/for-in-vs-for-of/2938

https://poiemaweb.com/js-control-flow

https://bitsofco.de/for-in-vs-for-of/