TypeScript 반복문
이 글은 TypeScript의 반복문에 대해 설명합니다.
YouTube Video
TypeScript의 for 문
TypeScript에서 for 문은 반복 작업을 수행하기 위한 기본 루프 구조입니다. for 루프에서는 지정된 횟수나 조건에 따라 동일한 코드 블록을 반복적으로 실행할 수 있습니다.
기본 구문
1for (initialization; condition; update) {
2 // Code to execute repeatedly while the condition is true
3}- **: 반복을 시작하기 전에 한 번만 실행되는 부분입니다. 루프 카운터와 같은 변수를 초기화.
- 조건 (
조건): 루프가 계속되는지 결정. true, 계속 반복, false, 종료. - ** 업데이트 (
update)**: 각 루프의 끝에 실행하고 루프 카운터를 업데이트.
예제 1: 기본 for 루프
다음 예제에서는 0부터 4까지의 숫자를 순서대로 출력합니다.
1for (let i = 0; i < 5; i++) {
2 console.log("The value of i is: " + i);
3}
4// Outputs:
5// The value of i is: 0
6// The value of i is: 1
7// The value of i is: 2
8// The value of i is: 3
9// The value of i is: 4
예제 2: 배열과 함께 사용하는 for 루프
배열의 요소를 순서대로 처리하기 위해 for 루프를 사용할 수도 있습니다.
1let fruits: string[] = ["apple", "banana", "cherry"];
2
3for (let i = 0; i < fruits.length; i++) {
4 console.log("Fruit: " + fruits[i]);
5}
6// Outputs:
7// Fruit: apple
8// Fruit: banana
9// Fruit: cherry
예제 3: for-in 루프
for-in 루프는 객체의 속성이나 배열의 인덱스를 순서대로 반복하는 데 사용됩니다.
1let car = { brand: "Toyota", model: "Corolla", year: 2020 };
2
3for (let key in car) {
4 console.log(key + ": " + car[key]);
5}
6// Outputs:
7// brand: Toyota
8// model: Corolla
9// year: 2020
예제 4: for-of 루프
for-of 루프는 배열이나 문자열 같은 반복 가능한 객체에서 각 요소의 값을 순서대로 가져오는 데 사용됩니다.
1let colors: string[] = ["red", "green", "blue"];
2
3for (let color of colors) {
4 console.log("Color: " + color);
5}
6// Outputs:
7// Color: red
8// Color: green
9// Color: blue
예제 5: 중첩 for 루프
for 루프 내부에 다른 for 루프를 사용하는 것도 가능하며, 이를 중첩 루프라고 합니다. 이를 통해 중첩 루프 등 다양한 작업을 수행할 수 있습니다.
1for (let i = 0; i < 3; i++) {
2 console.log("Outer loop i: " + i);
3 for (let j = 0; j < 2; j++) {
4 console.log(" Inner loop j: " + j);
5 }
6}
7// Outputs:
8// Outer loop i: 0
9// Inner loop j: 0
10// Inner loop j: 1
11// Outer loop i: 1
12// Inner loop j: 0
13// Inner loop j: 1
14// Outer loop i: 2
15// Inner loop j: 0
16// Inner loop j: 1
요약
for문은 지정된 횟수나 조건에 따라 반복 처리를 수행합니다.for-in은 객체의 속성이나 배열의 인덱스를 가져오는 데 사용됩니다.for-of는 배열 같은 반복 가능한 객체에서 요소의 값을 가져옵니다.- 중첩된
for루프를 사용하여 복잡한 반복 처리도 가능합니다.
TypeScript의 for 문은 다른 루프와 유사하게 강력하고 유연한 반복 처리를 제공합니다.
TypeScript의 While 문
TypeScript에서 while 문은 지정된 조건이 true일 때 반복 처리를 실행하는 루프 구조입니다. for 루프와 유사하게, while 루프는 반복 횟수가 사전에 결정되지 않았거나 조건에 따라 반복을 제어하려는 경우에 적합합니다.
기본 구문
1while (condition) {
2 // Code to execute repeatedly while the condition is true
3}- 조건: 루프가 실행되는 조건. 이 조건이
true인 동안 루프가 계속 실행되며,false가 되면 중지됩니다.
예제 1: 기본 while 루프
아래의 예제에서는 i가 5보다 작은 동안 i의 값을 출력합니다.
1let i: number = 0;
2
3while (i < 5) {
4 console.log("The value of i is: " + i);
5 i++;
6}
7// Outputs:
8// The value of i is: 0
9// The value of i is: 1
10// The value of i is: 2
11// The value of i is: 3
12// The value of i is: 4
이 예제에서 조건이 false가 됨에 따라 i가 5 이상이 되면 루프가 종료됩니다.
예제 2: 무한 루프 예제
while 루프의 조건이 항상 true이면 무한 루프가 될 수 있습니다. 이로 인해 프로그램이 의도한 대로 중지되지 않을 수 있으므로 주의가 필요합니다.
1let x: number = 0;
2
3while (true) {
4 console.log("The value of x is: " + x);
5 x++;
6 if (x >= 5) {
7 break; // Exit the loop when the condition is met
8 }
9}
10// Outputs:
11// The value of x is: 0
12// The value of x is: 1
13// The value of x is: 2
14// The value of x is: 3
15// The value of x is: 4
조건이 충족되었을 때 break 문을 사용하여 루프를 강제로 종료할 수 있습니다.
예제 3: do-while 루프
do-while 루프는 최소 한 번 루프 처리가 실행되는 구조입니다. 조건이 처리가 끝난 후에 평가되므로, 조건이 false여도 프로세스는 최소 한 번 실행됩니다.
1let j: number = 5;
2
3do {
4 console.log("The value of j is: " + j);
5 j++;
6} while (j < 5);
7// Outputs: The value of j is: 5
이 예제에서 j는 처음부터 5이고 j < 5는 false이지만, do-while 루프에서는 조건과 상관없이 최소 한 번 실행됩니다.
요약
while루프는 조건이true인 동안 처리를 반복합니다.- 루프 종료 조건이 불분명할 경우 무한 루프에 주의해야 합니다.
do-while루프는 최소 한 번 처리가 실행된다는 점에서 일반적인while루프와 다릅니다.
TypeScript의 while 문은 반복 횟수가 불확실하거나 동적인 조건 검사가 필요한 경우 루프 처리에 유용합니다.
break와 continue
반복문 내부에서 break와 continue를 사용할 수 있습니다.
break는 반복문을 조기 종료하는 데 사용됩니다.continue는 현재 반복을 건너뛰고 다음 반복으로 이동하는 데 사용됩니다.
break 예제
1for (let i = 0; i < 10; i++) {
2 if (i === 5) {
3 break; // Exits the loop when i is 5
4 }
5 console.log(i);
6}
7// Outputs 0, 1, 2, 3, 4
8
9let i = 0;
10
11while (i < 10) {
12 if (i === 5) {
13 break; // Ends the loop when i is 5
14 }
15 console.log(i++);
16}
17// Outputs 0, 1, 2, 3, 4
이 경우 i가 5가 되면 break가 실행됩니다. 그 결과, 0부터 4까지의 숫자가 표시됩니다.
continue 예제
1for (let i = 0; i < 5; i++) {
2 if (i === 2) {
3 continue; // Skips when i is 2
4 }
5 console.log(i);
6}
7// Outputs 0, 1, 3, 4
8
9let i = 0;
10
11while (i < 5) {
12 i++;
13 if (i === 3) {
14 continue; // Skips when i is 3
15 }
16 console.log(i);
17}
18// Outputs 1, 2, 4, 5
이 경우 i가 2일 때 continue가 실행됩니다. 그 결과, 2를 제외한 숫자가 표시됩니다.
TypeScript의 중첩 반복문
중첩 반복문은 반복문 내부에 다른 반복문이 있는 구조를 나타냅니다. TypeScript에서는 for, while, do-while과 같은 반복문 구조가 지원됩니다. 중첩 반복문을 사용하면 이차원 배열(행렬)을 처리하거나 여러 조건에 따른 처리를 간소화할 수 있습니다.
기본 구문
중첩 반복문의 기본 구문은 다음과 같습니다.
1for (let i: number = 0; i < n; i++) {
2 for (let j: number = 0; j < m; j++) {
3 // Processing for the inner loop
4 }
5}외부 반복문이 한 번 실행될 때마다 내부 반복문이 모든 반복을 완료합니다. 이 구조는 여러 반복문이나 데이터 구조를 처리할 때 매우 유용합니다.
TypeScript의 중첩 반복문 예제
이차원 배열 순회
중첩 반복문은 이차원 배열과 같은 다차원 데이터 구조를 다룰 때 자주 사용됩니다. 다음 예제에서는 이차원 배열의 요소를 순회하며, 그 값이 콘솔에 표시됩니다.
1const matrix: number[][] = [
2 [1, 2, 3],
3 [4, 5, 6],
4 [7, 8, 9]
5];
6
7for (let row: number = 0; row < matrix.length; row++) {
8 for (let col: number = 0; col < matrix[row].length; col++) {
9 console.log(`matrix[${row}][${col}] = ${matrix[row][col]}`);
10 }
11}
12// Output
13// matrix[0][0] = 1
14// matrix[0][1] = 2
15// matrix[0][2] = 3
16// matrix[1][0] = 4
17// matrix[1][1] = 5
18// matrix[1][2] = 6
19// matrix[2][0] = 7
20// matrix[2][1] = 8
21// matrix[2][2] = 9
이 예제에서는 이차원 배열 matrix를 순회하고 있습니다. 외부 루프는 행을 처리하고, 내부 루프는 열을 처리하여 각 요소를 순서대로 표시합니다.
두 배열의 조합
다음으로, 두 배열의 모든 조합을 계산하는 예제를 소개합니다. 예를 들어, 두 배열에서 각각 하나의 요소를 선택하고 모든 가능한 쌍을 출력할 수 있습니다.
1const array1: string[] = ['A', 'B', 'C'];
2const array2: number[] = [1, 2, 3];
3
4for (let i: number = 0; i < array1.length; i++) {
5 for (let j: number = 0; j < array2.length; j++) {
6 console.log(`Pair: (${array1[i]}, ${array2[j]})`);
7 }
8}
9// Output
10// Pair: (A, 1)
11// Pair: (A, 2)
12// Pair: (A, 3)
13// Pair: (B, 1)
14// Pair: (B, 2)
15// Pair: (B, 3)
16// Pair: (C, 1)
17// Pair: (C, 2)
18// Pair: (C, 3)
이 예에서는 문자열 배열 array1과 숫자 배열 array2 간의 모든 쌍이 생성됩니다. 외부 루프는 array1에서 요소를 추출하고, 내부 루프는 array2에서 요소를 추출하여 각 쌍을 표시합니다.
삼중 루프를 사용하여 좌표 생성
삼중 중첩 루프를 사용하면 예를 들어 3차원 공간에서 좌표를 생성할 수 있습니다.
1for (let x: number = 0; x < 3; x++) {
2 for (let y: number = 0; y < 3; y++) {
3 for (let z: number = 0; z < 3; z++) {
4 console.log(`Coordinate: (${x}, ${y}, ${z})`);
5 }
6 }
7}
8// Output
9// Coordinate: (0, 0, 0)
10// Coordinate: (0, 0, 1)
11// Coordinate: (0, 0, 2)
12// ...
13// Coordinate: (2, 2, 1)
14// Coordinate: (2, 2, 2)
이와 같이, 삼중 중첩 루프를 사용하면 3차원 공간에서 좌표를 쉽게 생성할 수 있습니다.
중첩 루프의 성능
중첩 루프는 편리하지만, 루프의 깊이가 증가함에 따라 계산 비용이 급격히 증가합니다. 예를 들어, 외부 루프의 반복이 n번이고 내부 루프의 반복이 m번이라면, 총 반복 횟수는 n * m이 됩니다. 이것이 더욱 중첩되면 계산 복잡도가 기하급수적으로 증가하여 프로그램 성능에 영향을 미칠 수 있습니다.
아래는 세 배열을 순회할 때의 계산 복잡도입니다.
1const array1: number[] = [1, 2, 3];
2const array2: number[] = [4, 5, 6];
3const array3: number[] = [7, 8, 9];
4
5for (let i: number = 0; i < array1.length; i++) {
6 for (let j: number = 0; j < array2.length; j++) {
7 for (let k: number = 0; k < array3.length; k++) {
8 console.log(`Combination: (${array1[i]}, ${array2[j]}, ${array3[k]})`);
9 }
10 }
11}이 경우, array1.length * array2.length * array3.length를 계산해야 하며, 모든 조합을 처리하려면 3 * 3 * 3 = 27번의 반복이 필요합니다.
중첩 루프의 최적화
중첩 루프를 사용할 때는 다음의 최적화를 고려하여 성능을 개선할 수 있습니다.
- 조기 반환 도입: 목표가 달성되면 루프를 조기에 종료하여 불필요한 반복을 피하세요.
- 루프 변수 캐싱: 루프 내에서 사용되는 변수(특히 길이와 범위)의 값을 미리 캐싱하여 매번 계산 비용을 줄이세요.
- 데이터 구조 변경: 배열과 객체의 구조를 수정하면 특정 반복 작업을 가속화하는 데 효과적일 수 있습니다.
결론
중첩 루프는 복잡한 데이터 처리와 알고리즘에서 강력한 도구입니다. 그러나 루프 깊이와 반복 횟수가 증가함에 따라 성능 문제가 발생할 수 있습니다. 적절한 최적화와 신중한 설계를 통해 TypeScript에서 중첩 루프를 효과적으로 활용할 수 있습니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.