자바스크립트의 반복문 종류 및 사용법: for, for...in, for...of, forEach

자바스크립트의 반복문 종류 및 사용법

👉 for, for...in, for...of, forEach

안녕하세요! 오늘은 자바스크립트에서 사용할 수 있는 반복문의 종류와 각각의 사용법에 대해 알아보겠습니다. 자바스크립트에서는 주로 4가지 종류의 반복문을 사용합니다: `for`문, `for...in`문, `for...of`문, 그리고 `forEach`문입니다. 이 포스팅을 통해 각각의 반복문이 어떻게 사용되는지 이해할 수 있을 것입니다.

👉 for문

`for`문은 가장 기본적인 반복문입니다. 반복 횟수가 정해진 경우에 사용하며, 초기값, 조건식, 증감식을 통해 반복문을 제어합니다. 다음은 `for`문의 기본 구조입니다.

for (초기값; 조건식; 증감식) {
  // 실행할 코드
}

//예시:
for (let i = 0; i < 5; i++) {
  console.log(i);
}

👉 for...in문

`for...in`문은 객체의 속성들을 순회할 때 사용합니다. 객체의 키를 반환하며, 순서는 보장되지 않습니다. 

다음은 `for...in`문의 기본 구조입니다.

for (변수 in 객체) {
  // 실행할 코드
}

const person = {
  name: "Alice",
  age: 30,
};

for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

👉  for...of문

`for...of`문은 배열, 문자열, Map, Set 등 반복 가능한(iterable) 객체를 순회할 때 사용합니다. 객체의 값을 반환합니다. 다음은 `for...of`문의 기본 구조입니다.

for (변수 of 객체) {
  // 실행할 코드
}

const numbers = [1, 2, 3, 4, 5];

for (const number of numbers) {
  console.log(number);
}

 

👉  forEach문

`forEach`문은 배열 전용 메서드로, 배열의 각 요소에 대해 지정한 함수를 실행합니다. 다음은 `forEach`문의 기본 구조입니다.

배열.forEach(function(요소, 인덱스, 배열) {
  // 실행할 코드
});

const fruits = ["apple", "banana", "cherry"];

fruits.forEach(function(fruit, index) {
  console.log(`${index + 1}. ${fruit}`);
});

이상으로 자바스크립트의 반복문 종류와 사용법에 대해 설명했습니다. 각각의 반복문을 적절한 상황에 맞게 사용하면 코드의 가독성과 효율성을 높일 수 있습니다. 다음은 각 반복문을 활용한 추가 예제입니다.

 

👉  추가 예제

👍 문자열 순회하기

const text = "Hello, JavaScript!";

for (const char of text) {
  console.log(char);
}

 

👍  Map 객체 순회하기

const mapData = new Map([
  ["apple", 3],
  ["banana", 2],
  ["orange", 5],
]);

for (const [key, value] of mapData) {
  console.log(`${key}: ${value}`);
}

 

👍 Set 객체 순회하기

const setData = new Set(["apple", "banana", "orange"]);

for (const value of setData) {
  console.log(value);
}

 

👍 배열 필터링하기

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const evenNumbers = [];

numbers.forEach(function(number) {
  if (number % 2 === 0) {
    evenNumbers.push(number);
  }
});

console.log(evenNumbers); // [2, 4, 6, 8]

반응형

👍 성능의 차이

반복문의 성능 차이는 상황과 사용하는 데이터에 따라 다소 차이가 있을 수 있습니다. 일반적으로 for문은 가장 빠른 반복문으로 알려져 있지만, 이것이 모든 경우에 대해 항상 최적의 성능을 보장하지는 않습니다.

예를 들어, 배열에 대한 순회에서는 for문이 forEach, for...of보다 빠르지만, 이 차이는 대부분의 경우 실제 애플리케이션에서 미미한 성능 차이로 나타납니다. 따라서 코드의 가독성과 유지 관리 측면에서 더 나은 방법인 forEach나 for...of를 사용하는 것이 권장됩니다.

성능 차이가 중요한 상황에서는 다음과 같은 점을 고려하여 반복문을 선택하세요:

👉  for

for문은 일반적으로 가장 빠른 반복문이지만, 코드의 가독성이 떨어질 수 있습니다.

👉  forEach

forEach는 배열 전용 메서드로, 코드의 가독성이 좋지만, break나 continue를 사용할 수 없습니다.

👉  for...of

for...of는 반복 가능한 객체를 순회할 때 사용하며, 코드의 가독성이 좋고 break나 continue를 사용할 수 있습니다.

👉  for...in

for...in은 객체의 속성을 순회할 때 사용하며, 배열에 사용하는 것은 비효율적이므로 주의해야 합니다.

결론적으로, 성능 차이가 크게 중요하지 않은 경우에는 코드의 가독성과 유지 관리를 위해 forEach, for...of와 같은 방식을 사용하는 것이 좋습니다. 성능이 중요한 상황에서는 상황에 맞는 반복문을 선택하여 사용하세요. 그러나 대부분의 경우, 성능 차이보다는 가독성과 유지 관리 측면을 더욱 고려해야 할 것입니다.

 

이 글을 통해 자바스크립트의 다양한 반복문을 이해하고 사용할 수 있게 되었기를 바랍니다. 프로젝트를 진행하면서 상황에 따라 적절한 반복문을 사용하여 코드의 가독성과 효율성을 높여보세요. 이상으로 자바스크립트 반복문에 대한 포스팅을 마치겠습니다. 감사합니다!