for/for...of/for...in/map/forEach()

🌼 for 반복문

for 반복문은 초기값, 조건식, 증감식을 사용하여 원하는 횟수만큼 반복할 때 사용한다. 일반적으로 배열의 인덱스(index)를 기반으로 순회할 때 많이 쓰인다.

 

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

const numbers = [10, 20, 30, 40];
for (let i = 0; i < numbers.length; i++) {
    console.log(numbers[i]); // 10, 20, 30, 40
}

 

👉 특징

• 인덱스를 직접 제어할 수 있기 때문에 특정 위치의 값에 접근하거나, 필요한 경우 역순으로 순회할 수도 있다.
• 배열, 문자열뿐만 아니라 반복 가능한 객체가 아니더라도 반복문을 실행할 수 있다. 단, 반복 횟수를 명시해야 한다.

 

🌼 for...of 반복문

 

for...of는 **배열, 문자열, Map, Set과 같은 반복 가능한 객체(iterable)(=> for...of 반복문을 사용해 각 요소를 하나씩 순회할 수 있는 객체를 의미 )를 순회할 때 사용한다. 이 반복문은 각 요소를 직접 접근하기 때문에 인덱스를 따로 관리할 필요가 없다.

 

for (const 변수 of 반복가능한객체) {
    // 반복할 코드
}

 

const numbers = [10, 20, 30, 40];
for (const number of numbers) {
    console.log(number); // 10, 20, 30, 40
}

 

 

👉 특징

• 각 요소를 직접 다루기 때문에 코드가 더 간결해진다.
• 배열, 문자열의 각 요소나 문자를 다루기에 적합하지만, 인덱스가 필요할 경우에는 사용하기 어렵다.
• **객체(Object)**는 반복 가능 객체가 아니기 때문에 for...of로 순회할 수 없다.

 

🌼 Array.map() 메서드

 

map()은 배열의 각 요소에 대해 특정 작업을 수행한 결과를 새로운 배열로 반환하는 메서드이다. 기존 배열을 수정하지 않으며, 콜백 함수를 통해 요소에 접근하고 변환된 결과가 새로운 배열에 저장된다.

 

배열.map((요소, 인덱스, 배열) => {
    // 각 요소에 대해 수행할 작업
    return 변환된_값;
});

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(number => number * 2);
console.log(doubled); // [2, 4, 6, 8]

 

 

👉 특징

• 배열의 각 요소에 특정 작업을 수행하고, 변환된 값을 모아 새로운 배열을 반환한다.
• 기존 배열은 수정되지 않고, 항상 새로운 배열을 생성한다.
• 요소를 변환하거나 필터링할 때 간편하다.

 

🌼 for...in

객체의 속성(property)들을 순회할 때 사용되는 반복문. 이 반복문은 객체의 키(속성 이름)에 접근하는 데 유용하지만, 배열에서도 사용할 수 있다. 그러나 배열에서는 예상치 못한 결과가 나올 수 있으므로, 객체의 속성 순회에 주로 쓰인다.

 

for (const key in 객체) {
    // key와 객체[key]를 활용할 수 있음
}

 

const person = {
    name: "Alice",
    age: 25,
    city: "Seoul"
};

for (const key in person) {
    console.log(`${key}: ${person[key]}`);
}
// 출력:
// name: Alice
// age: 25
// city: Seoul

 

 

🌼 forEach()

JavaScript에서 배열(Array) 전용 메서드로, 배열의 각 요소에 대해 콜백 함수를 실행한다. for, for...of, for...in과는 사용 목적과 동작 방식이 조금 다르다.

 

배열.forEach((요소, 인덱스, 배열) => {
    // 요소에 대해 실행할 코드
});

const numbers = [1, 2, 3, 4];
numbers.forEach((number, index) => {
    console.log(`Index ${index}: ${number}`);
});
// 출력:
// Index 0: 1
// Index 1: 2
// Index 2: 3
// Index 3: 4

 

<데이터 업데이트>

배열의 각 객체에 새로운 속성을 추가하거나 값을 업데이트할 때 사용된다.

const products = [
    { name: "Laptop", price: 1000 },
    { name: "Phone", price: 500 }
];

products.forEach((product) => {
    product.discountedPrice = product.price * 0.9; // 10% 할인
});

console.log(products);
// [
//     { name: "Laptop", price: 1000, discountedPrice: 900 },
//     { name: "Phone", price: 500, discountedPrice: 450 }
// ]

 

<서버에 데이터 보내기>

배열 요소를 반복하며 서버에 데이터 전송 등의 작업을 수행할 때 사용할 수 있다.

const data = ["Alice", "Bob", "Charlie"];

data.forEach((name) => {
    // fetch()를 이용해 서버에 데이터를 전송
    fetch("https://example.com/api", {
        method: "POST",
        body: JSON.stringify({ name: name }),
        headers: { "Content-Type": "application/json" }
    }).then((response) => console.log(`${name} 데이터 전송 완료`));
});

 

👉 특징

 

• 배열 요소에 대해 콜백 함수를 실행하며, 각 요소와 그 인덱스에 접근할 수 있다.
• forEach()는 반환값이 없다. 배열을 순회하면서 콜백 함수 내에서 작업만 수행하고, 새로운 배열을 반환하지 않는다.
• 콜백 함수에서 break나 continue를 사용할 수 없다. 모든 요소를 끝까지 순회한다.
• forEach()는 항상 배열의 모든 요소에 대해 실행되므로, 조기 종료가 필요하면 for이나 for...of를 사용하는 것이 좋다.

 

 

🌼 forEach()와 map()의 차이점

forEach() map()

반환값	없음	변환된 결과가 담긴 새로운 배열 반환
원본 배열	변하지 않음	변하지 않음
용도	요소에 대해 작업을 수행하고 끝냄	각 요소를 변환하고 새로운 배열 생성
적합한 경우	출력, 수정, DB 저장 등	각 요소를 변형해서 배열이 필요할 때

 

• 단순히 각 요소에 대해 작업을 수행하려면 forEach()를 사용한다.
• 배열을 변형하여 새로운 배열을 반환해야 할 때는 map()이 적합하다.

forEach()는 작업만 하고 반환이 없으며, map()은 변형된 배열을 반환하는 것이 가장 큰 차이다.

 

🌼 for, for...of, for...in, forEach() 비교

for	모든 데이터 타입	인덱스를 기반으로 반복 제어, 조건에 따라 조기 종료 가능	없음	인덱스 제어가 필요할 때
for...of	반복 가능한 객체	각 요소에 직접 접근, 코드가 간결, continue 및 break 가능	없음	배열, 문자열 등을 순회할 때
for...in	객체	객체의 속성 이름(키)을 순회, 배열 순회에는 권장되지 않음	없음	객체의 속성에 접근할 때
forEach()	배열	콜백 함수 실행, 모든 요소에 대해 수행, 조기 종료 불가	없음	배열 요소에 대한 작업을 수행할 때 (반