javascript

JavaScript 자바스크립트 반복문 (for, for in, for of, while 등) 정리

by

자바스크립트 반복문이란?

자바스크립트 반복문은 코드를 간결하게 작성하고 효율적으로 실행할 수 있는 도구입니다. 반복문은 동일한 작업을 여러 번 수행해야 할 때 유용하며, 프로그램의 효율성과 가독성을 향상 시킵니다.

반복문 설명

  1. for 문
    • for (초기값; 조건; 반복 실행) 형태로 구성합니다.
    • 초기값에서 시작하여 조건이 참인 동안 반복 실행합니다.
    • 주로 배열의 각 요소에 접근하거나 특정 작업을 여러 번 반복할 때 사용됩니다.
  2. while 문
    • while (조건) 형태로 구성합니다.
    • 주어진 조건이 참인 동안 계속해서 반복 실행됩니다.
    • 조건이 거짓이 되면 반복이 종료됩니다.
  3. do-while 문
    • do { … } while (조건) 형태로 구성합니다.
    • 먼저 실행된 후에 조건을 검사하여 반복 여부를 결정합니다.
    • 최소한 한 번은 반복 실행됩니다.
  4. for…in 문
    • 객체의 속성을 열거하는 데 사용합니다.
    • for (변수 in 객체) 형태로 사용하며, 변수에는 객체의 각 속성이 차례로 할당됩니다.
    • 객체의 속성을 순회하거나 속성에 대한 작업을 수행하는 데 유용합니다.
  5. for…of 문
    • 배열이나 이터러블 객체의 값을 직접 순회합니다.
    • for (변수 of 배열 또는 이터러블 객체) 형태로 사용하며, 변수에는 배열의 각 값이 할당됩니다.
    • 주로 배열의 값을 처리하는 데 사용됩니다.
  6. 중첩된 반복문
    • 반복문 안에 또 다른 반복문을 중첩하여 사용합니다.
    • 복잡한 패턴, 다차원 배열 등을 처리할 때 유용합니다.
    • 내부 반복문은 외부 반복문이 실행될 때마다 전체적으로 반복됩니다.
  7. 배열 메서드를 사용한 반복
    • 배열의 각 요소에 대해 특정 작업을 반복적으로 수행하는 것을 의미합니다.
    • 주로 사용되는 배열 메서드는 forEach, map, filter 가 있습니다.
  8. 반복문의 중단과 건너뛰기
    • break를 사용하여 반복문을 중단하고 반복을 종료합니다.
    • continue를 사용하여 현재 반복을 건너뛰고 다음 반복으로 진행합니다.
    • 특정 조건에서 반복을 조절하거나 중단할 때 활용됩니다.

반복문 예제

for 문

가장 기본적이고 널리 사용되는 반복문 중 하나인 for 문은 초기값 설정, 조건 검사, 반복 실행이라는 세 부분으로 구성됩니다. 예를 들어, 배열의 각 요소에 접근하거나 특정 작업을 여러 번 반복할 때 for 문을 활용할 수 있습니다.

JavaScript
for (초기값; 조건; 반복 실행) {
  // 반복 실행할 코드 블록
}
JavaScript

여기서 각 부분은 다음과 같이 동작합니다

  • 초기값: 반복문이 시작되기 전에 한 번만 실행되는 코드입니다. 주로 카운터 변수를 초기화하는 데 사용됩니다.
  • 조건: 각 반복마다 검사되는 조건입니다. 조건이 참이면 반복이 계속되고, 거짓이면 반복이 종료됩니다.
  • 반복 실행: 각 반복이 실행될 때마다 수행되는 코드 블록입니다. 반복 실행 후에는 카운터 변수를 업데이트하거나 다른 작업을 수행할 수 있습니다.
JavaScript
// 1부터 5까지의 숫자를 출력하는 예제
for (let i = 1; i <= 5; i++) {
  console.log(i);
}
// 결과 1 2 3 4 5
JavaScript
  • 이 예제에서는 초기값으로 let i = 1을 설정하고
  • 조건으로 i <= 5를 검사하며
  • 반복 실행 후에는 i++를 통해 i 값을 증가시킵니다.
  • 결과적으로 1부터 5까지의 숫자가 순서대로 출력됩니다.

while 문

while 문은 주어진 조건이 참일 때 계속해서 반복을 수행합니다. 조건이 거짓이 될 때까지 반복이 이루어집니다.

JavaScript
let count = 0;
while (count < 3) {
  console.log("카운트: " + count);
  count++;
}
// 결과:
// 카운트: 0
// 카운트: 1
// 카운트: 2
JavaScript
  • count 변수가 0으로 초기화되고, while 문의 조건은 count < 3으로 설정됩니다.
  • 조건이 참이면 코드 블록 내의 문장들이 실행됩니다.
  • console.log(“카운트: ” + count);은 현재 count 값과 함께 “카운트: “를 출력합니다.
  • count++;은 반복이 진행될 때마다 count 값을 1씩 증가시킵니다.
  • 조건이 거짓이 될 때까지(즉, count가 3보다 작은 동안) 위의 과정이 반복됩니다.

do-while 문

do-while 문은 조건을 뒤에 두어 먼저 코드 블록을 실행한 후에 조건을 평가합니다. 이로써 최소한 한 번은 반복이 실행되도록 보장합니다.

JavaScript
let number;
do {
  number = prompt("1에서 5 사이의 숫자를 입력하세요:");
} while (number < 1 || number > 5);
// (사용자 입력 결과에 따라 결과가 달라집니다.)
JavaScript
  • do 다음에 오는 코드 블록은 먼저 실행됩니다.
  • 사용자에게 숫자를 입력 받는 부분은 do 블록 내에 있습니다.
  • while 다음에 오는 조건이 평가되어, 조건이 참이면 다시 do 블록이 실행됩니다.
  • 사용자가 1에서 5 사이의 숫자를 입력하지 않으면 계속해서 입력을 요청하게 됩니다.
  • 조건이 거짓이 되면 반복이 종료되고, 입력한 숫자가 출력됩니다.

이러한 구조는 최소한 한 번은 특정 작업을 수행하도록 할 때 유용합니다.

for…in 문

for…in 문은 객체의 속성을 순회할 때 사용됩니다. 다음은 객체의 속성을 출력하는 예제입니다.

JavaScript
let person = {
  name: "John",
  age: 30,
  job: "Developer"
};

for (let key in person) {
  console.log(key + ": " + person[key]);
}
// 결과:
// name: John
// age: 30
// job: Developer
JavaScript

for…of 문

for…of 문은 배열이나 이터러블 객체의 값을 직접 순회합니다.

JavaScript
let fruits = ["사과", "바나나", "딸기"];

for (let fruit of fruits) {
  console.log("과일: " + fruit);
}
// 결과:
// 과일: 사과
// 과일: 바나나
// 과일: 딸기
JavaScript

중첩된 반복문

반복문은 중첩하여 사용할 수 있습니다. 이를 통해 복잡한 패턴이나 다차원 배열을 다룰 수 있습니다.

JavaScript
for (let i = 1; i <= 3; i++) {
  for (let j = 1; j <= 3; j++) {
    console.log("i: " + i + ", j: " + j);
  }
}
// 결과:
// i: 1, j: 1
// i: 1, j: 2
// i: 1, j: 3
// i: 2, j: 1
// i: 2, j: 2
// i: 2, j: 3
// i: 3, j: 1
// i: 3, j: 2
// i: 3, j: 3
JavaScript

배열 메서드를 사용한 반복

  1. forEach 메서드
    • forEach 메서드는 배열의 각 요소에 대해 주어진 함수를 순차적으로 실행합니다. 이 메서드는 주로 배열의 각 요소에 대한 작업을 수행할 때 사용됩니다.
  2. map 메서드
    • map 메서드는 배열의 각 요소에 대해 주어진 함수를 호출하고 그 결과를 새로운 배열로 반환합니다. 기존 배열은 변경되지 않습니다.
  3. filter 메서드
    • filter 메서드는 주어진 함수의 조건을 만족하는 요소만을 포함하는 새로운 배열을 반환합니다. 기존 배열은 변경되지 않습니다.
JavaScript
let numbers = [1, 2, 3, 4, 5];

// 1. forEach 메서드로 배열의 각 요소 출력
numbers.forEach(function(number) {
  console.log("숫자: " + number);
});
// 결과:
// 숫자: 1
// 숫자: 2
// 숫자: 3
// 숫자: 4
// 숫자: 5

// 2. map 메서드로 각 숫자를 제곱한 배열 생성
let squaredNumbers = numbers.map(function(number) {
  return number ** 2;
});
console.log("제곱한 숫자: ", squaredNumbers);
// 결과:
// 제곱한 숫자:  [1, 4, 9, 16, 25]

// 3. filter 메서드로 짝수만을 필터링한 배열 생성
let evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});
console.log("짝수: ", evenNumbers);
// 결과:
// 짝수:  [2, 4]
JavaScript
  • forEach 메서드는 배열의 각 요소에 대해 주어진 함수를 실행합니다.
  • map 메서드는 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과를 새로운 배열로 반환합니다. 위의 예제에서는 각 숫자를 제곱하여 새로운 배열을 생성합니다.
  • filter 메서드는 주어진 함수의 조건을 만족하는 요소만을 포함하는 새로운 배열을 반환합니다. 위의 예제에서는 주어진 배열에서 짝수만을 필터링하여 새로운 배열을 생성합니다.

반복문의 중단과 건너뛰기

break를 사용하여 반복문을 중단하거나, continue를 사용하여 현재 반복을 건너뛸 수 있습니다.

JavaScript
for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    continue; // 3일 때 건너뛰기
  }
  console.log(i);
  if (i === 4) {
    break; // 4일 때 반복문 중단
  }
}
// 결과:
// 1
// 2
// 4
JavaScript

결론

자바스크립트의 반복문은 다양한 상황에서 유용하게 활용될 수 있는 도구입니다. 코드의 구조를 명확하게 유지하고, 작업을 효율적으로 수행하기 위해 반복문을 잘 활용하는 것이 중요합니다. 또한 중첩된 반복문, 제어문의 활용 등을 통해 다양한 상황에 대응할 수 있습니다. 이러한 반복문과 관련된 기술들을 잘 활용하면 코드를 더 효율적으로 작성할 수 있습니다.

Leave a Comment