[자바스크립트]자바스크립트 루프 완전 정복: 반복문 사용법과 팁

728x90

SMALL

자바스크립트에서 반복문은 필수적인 기능입니다. 반복문은 배열이나 객체와 같은 데이터 구조를 효율적으로 처리하는 데 사용됩니다. 이번 포스팅에서는 다양한 자바스크립트 반복문을 이해하고 활용하는 방법을 알아보겠습니다.

≣ 목차

기본 개념📚
자바스크립트 반복문의 종류🔄
반복문 활용 사례🛠️
고급 활용 및 최적화🚀
핵심 내용👀

반복문은 조건문과 자주 결합됩니다. 자바스크립트에서 조건문을 사용하는 방법에 대한 자세한 정보는 아래 포스팅을 참고해 주세요! 👀

" "

[자바스크립트]자바스크립트 조건문 완전 정복: 기초부터 실전까지 한 번에 배우기

자바스크립트 조건문은 로직을 제어하는 데 필수적인 역할을 합니다. 이번 포스팅에서는 자바스크립트의 다양한 조건문에 대해 알아보고, 초보자도 쉽게 이해할 수 있는 예제와 실습을 통해 활

creativevista.tistory.com

기본 개념📚

반복문이란?: 반복문은 특정 코드를 여러 번 실행할 수 있는 구조입니다. 이는 반복적인 작업을 자동화하고 코드의 가독성을 높이는 데 유용합니다.

왜 필요한가?: 반복문은 대량의 데이터를 처리하거나, 동일한 작업을 반복해야 할 때 매우 유용합니다. 예를 들어, 배열의 각 요소를 출력하거나, 특정 조건이 만족될 때까지 작업을 반복할 수 있습니다.

자바스크립트 반복문의 종류🔄

for 문

문법 설명: for 문은 초기화, 조건, 증감 세 가지 부분으로 구성됩니다.

for (initialization; condition; increment) {
    // 실행할 코드
}

사용 예제: 아래 예제는 0부터 9까지의 숫자를 출력합니다.

for (let i = 0; i < 10; i++) {
  console.log(i);
}

장단점: 명확한 구조로 인해 이해하기 쉽지만, 복잡한 조건에서는 가독성이 떨어질 수 있습니다.

while 문

문법 설명: while 문은 조건이 참인 동안 코드를 실행합니다.

while (condition) {
    // 실행할 코드
}

사용 예제: 아래 예제는 0부터 9까지의 숫자를 출력합니다.

let i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

장단점: 조건에 따라 반복 횟수가 달라질 때 유용하지만, 무한 루프에 빠질 위험이 있습니다.

do...while 문

문법 설명: do...while 문은 코드 블록을 최소한 한 번 실행한 후 조건을 검사합니다.

do {
    // 실행할 코드
} while (condition);

사용 예제: 아래 예제는 0부터 9까지의 숫자를 출력합니다.

let i = 0;
do {
  console.log(i);
  i++;
} while (i < 10);

장단점: 최소한 한 번은 실행되어야 하는 작업에 유용합니다.

for...in 문

문법 설명: for...in 문은 객체의 열거 가능한 속성을 순회합니다.

for (variable in object) {
    // 실행할 코드
}

사용 예제: 아래 예제는 객체의 키와 값을 출력합니다.

const obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {
  console.log(key, obj[key]);
}

장단점: 객체 순회에 유용하지만, 배열에는 권장되지 않습니다.

for...of 문

문법 설명: for...of 문은 반복 가능한 객체(배열 등)를 순회합니다.

for (variable of iterable) {
    // 실행할 코드
}

사용 예제: 아래 예제는 배열의 각 요소를 출력합니다.

const arr = [1, 2, 3];
for (let value of arr) {
  console.log(value);
}

장단점: 반복 가능한 객체를 순회하는 데 적합합니다.

forEach 문

문법 설명: forEach 메서드는 배열의 각 요소에 대해 제공된 함수를 한 번씩 실행합니다.

for (variable of iterable) {
    // 실행할 코드
}

사용 예제: 아래 예제는 배열의 각 요소를 출력합니다.

const arr = [1, 2, 3];
arr.forEach(value => console.log(value));

장단점: 배열의 요소를 간단히 처리할 수 있지만, 중간에 반복을 멈출 수 없습니다.

map 메서드

문법 설명: map 메서드는 배열의 각 요소를 변환한 결과를 새 배열로 반환합니다.

const newArray = array.map(function(element, index, array) {
    // 반환할 값
});

사용 예제: 아래 예제는 배열의 각 요소를 두 배로 만든 새로운 배열을 출력합니다.

const arr = [1, 2, 3];
const newArr = arr.map(value => value * 2);
console.log(newArr);

장단점: 배열의 요소를 변환하여 새 배열을 만드는 데 유용합니다.

Q: forEach와 map의 차이점은 무엇일까요?

A: forEach는 배열의 각 요소에 대해 함수를 실행하지만, 반환 값이 없습니다. 반면, map은 배열의 각 요소를 변환한 새 배열을 반환합니다.

반복문 활용 사례🛠️

배열 순회: 배열의 각 요소를 출력하거나, 특정 조건에 맞는 요소를 처리할 때 사용됩니다.

const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

객체 순회: 객체의 키와 값을 출력하거나, 특정 조건에 맞는 속성을 처리할 때 사용됩니다.

const obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {
  console.log(`${key}: ${obj[key]}`);
}

비동기 작업에서의 반복문 사용: 비동기 함수와 함께 반복문을 사용하여 순차적으로 작업을 처리할 수 있습니다.

async function fetchData(urls) {
  for (let url of urls) {
    // 각 URL에 대해 HTTP 요청을 보내고 응답을 기다림
    let response = await fetch(url);
    // 응답 데이터를 JSON으로 변환하고 기다림
    let data = await response.json();
    // 변환된 데이터를 콘솔에 출력
    console.log(data);
  }
}

고급 활용 및 최적화🚀

중첩 루프

자바스크립트 중첩 루프, 즉 이중 반복문은 2차원 배열이나 다중 조건을 처리할 때 유용합니다.

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];
for (let i = 0; i < matrix.length; i++) {
  for (let j = 0; j < matrix[i].length; j++) {
    console.log(matrix[i][j]);
  }
}

성능 최적화

자바스크립트 반복문의 성능을 향상하기 위해 인덱스 캐싱, 불필요한 계산 제거, 적절한 반복문 선택 등을 고려합니다.

1. 인덱스 캐싱 (Index Caching)

반복문에서 배열의 길이 또는 다른 반복 계산이 자주 사용되는 경우, 이를 반복문 외부에 캐싱하여 성능을 향상할 수 있습니다.

예제

캐싱 전:

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

캐싱 후:

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const length = arr.length;
for (let i = 0; i < length; i++) {
    console.log(arr[i]);
}

arr.length를 반복문 외부에서 한 번 계산하여 length 변수에 저장하고, 이를 반복문 내부에서 사용하면 성능이 향상됩니다.

2. 불필요한 계산 제거 (Eliminate Unnecessary Calculations)

반복문 내부에서 반복적으로 계산되는 값을 미리 계산하여 변수에 저장함으로써 성능을 향상시킬 수 있습니다.

예제

불필요한 계산:

const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i] * Math.sqrt(arr.length));
}

불필요한 계산 제거 후:

const arr = [1, 2, 3, 4, 5];
const sqrtLength = Math.sqrt(arr.length);
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i] * sqrtLength);
}

반복문 내부에서 Math.sqrt(arr.length)를 매번 계산하는 대신, 이를 한 번 계산하여 sqrtLength 변수에 저장하면 성능이 향상됩니다.

3. 적절한 반복문 선택 (Choose Appropriate Loop)

적절한 반복문을 선택함으로써 성능을 최적화할 수 있습니다. 예를 들어, 배열을 단순히 순회할 때는 for 루프보다 forEach, for...of 또는 다른 메서드를 사용하는 것이 좋습니다.

예제

일반 for 루프:

const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

forEach 사용:

const arr = [1, 2, 3, 4, 5];
arr.forEach(value => {
    console.log(value);
});

for...of 사용:

const arr = [1, 2, 3, 4, 5];
for (const value of arr) {
    console.log(value);
}

일반적인 배열 순회에서는 forEach나 for...of가 간결하고, 내부 최적화 덕분에 성능이 더 좋을 수 있습니다.

4. 반복문 내부의 DOM 조작 최소화

DOM 조작은 매우 비용이 많이 드는 작업입니다. 반복문 내부에서 DOM 조작을 최소화하고, 가능한 한 번에 수행하는 것이 좋습니다.

예제

반복문 내부의 DOM 조작:

const items = ['Item1', 'Item2', 'Item3'];
const list = document.getElementById('list');
for (let i = 0; i < items.length; i++) {
    const listItem = document.createElement('li');
    listItem.textContent = items[i];
    list.appendChild(listItem);
}

DOM 조작 최소화:

const items = ['Item1', 'Item2', 'Item3'];
const list = document.getElementById('list');
const fragment = document.createDocumentFragment();
for (let i = 0; i < items.length; i++) {
    const listItem = document.createElement('li');
    listItem.textContent = items[i];
    fragment.appendChild(listItem);
}
list.appendChild(fragment);

DOM 조작을 한 번만 수행하도록 DocumentFragment를 사용하면 성능이 향상됩니다.

5. 메모리 관리

객체 생성이나 배열 복사를 최소화하고, 필요 없는 변수는 적시에 해제하여 메모리를 효율적으로 관리합니다.

예제

메모리 관리:

const largeArray = new Array(1000000).fill(0);

// 필요한 부분만 작업
const processed = largeArray.map((val, idx) => idx % 2 === 0 ? val + 1 : val);

// 메모리 해제
largeArray.length = 0;

필요 없는 데이터를 적시에 해제하여 메모리를 효율적으로 사용할 수 있습니다.

반복문 대체 기법

자바스크립트의 고차 함수(map, filter, reduce)나 재귀 함수를 사용하여 반복문을 대체할 수 있습니다.

const arr = [1, 2, 3, 4, 5];
const doubled = arr.map(value => value * 2);
console.log(doubled);

자바스크립트의 filter와 reduce 함수는 배열을 처리하는데 매우 유용한 고차 함수입니다. 각 함수의 문법과 사용 예제를 설명하겠습니다.

filter 함수

filter 함수는 배열의 각 요소에 대해 주어진 조건을 테스트하여 조건을 만족하는 요소들로 새로운 배열을 만듭니다.

문법

const newArray = array.filter((element, index, array) => {
    // 조건을 반환하는 코드
});

element: 처리할 현재 요소.
index: 처리할 현재 요소의 인덱스 (선택 사항).
array: filter를 호출한 배열 (선택 사항).

예제

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]

위 예제에서는 배열 numbers에서 짝수만 필터링하여 새로운 배열 evenNumbers를 생성합니다.

reduce 함수

reduce 함수는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하여 단일 출력 값을 반환합니다.

문법

const result = array.reduce((accumulator, element, index, array) => {
    // 누산기를 반환하는 코드
}, initialValue);

accumulator: 누산기, 이전 요소들의 콜백 함수 결과를 저장합니다.
element: 처리할 현재 요소.
index: 처리할 현재 요소의 인덱스 (선택 사항).
array: reduce를 호출한 배열 (선택 사항).
initialValue: 초기값을 지정합니다. 초기값을 제공하지 않으면 배열의 첫 번째 요소가 초기값으로 사용됩니다.

예제

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, currentValue) => acc + currentValue, 0);
console.log(sum); // 15

위 예제에서는 배열 numbers의 모든 요소를 더하여 sum에 저장합니다. 0은 초기값으로 사용됩니다.

실행 순서

위 예제의 실행 순서를 단계별로 설명하겠습니다.

1. 초기 상태:

acc (누산기) = 0 (초기값)
currentValue = 첫 번째 요소 (1)

2. 첫 번째 반복:

계산: acc + currentValue => 0 + 1 => 1
누산기(acc)의 새로운 값: 1
다음 currentValue = 두 번째 요소 (2)

3. 두 번째 반복:

계산: acc + currentValue => 1 + 2 => 3
누산기(acc)의 새로운 값: 3
다음 currentValue = 세 번째 요소 (3)

4. 세 번째 반복:

계산: acc + currentValue => 3 + 3 => 6
누산기(acc)의 새로운 값: 6
다음 currentValue = 네 번째 요소 (4)

5. 네 번째 반복:

계산: acc + currentValue => 6 + 4 => 10
누산기(acc)의 새로운 값: 10
다음 currentValue = 다섯 번째 요소 (5)

6. 다섯 번째 반복:

계산: acc + currentValue => 10 + 5 => 15
누산기(acc)의 새로운 값: 15

7. 반복 종료:

배열의 모든 요소를 처리했으므로 reduce 함수가 종료됩니다.
최종 결과는 15입니다.

핵심 내용👀