자바스크립트: 반복문 (Project ARCHIVE #3)

1. 반복문

데이터가 3개면 console.log를 3번 쓰면 되지만, 100개라면? 반복문이 필수다.

1) for 문 (수동 조작)

시작점, 끝점, 증감(보폭)을 직접 설정한다.

장점: 순서를 내 맘대로(거꾸로, 짝수만) 조절 가능.
단점: 문법이 복잡하고, 조건 설정을 잘못하면 무한 루프에 빠질 위험이 있다.

// i가 0부터 시작해서; 개수보다 작을 때까지; 1씩 증가
for (let i = 0; i < products.length; i++) {
    console.log(products[i].name);
}

2) forEach 문 (자동 주행) ⭐추천

배열에 들어있는 요소를 처음부터 끝까지 알아서 하나씩 꺼내준다.

장점: i를 신경 쓸 필요가 없어 코드가 깔끔하고 안전하다.
실무: 데이터를 화면에 단순 나열할 때 가장 많이 쓴다.

// item: 꺼내진 상품 하나하나 (객체)
products.forEach(function(item) {
    console.log(item.name + "의 가격: " + item.price);
});

Deep Dive 1. 템플릿 리터럴 (백틱 `)

"" + name + ""
최신 자바스크립트(ES6)에서는 백틱(Backtick, 숫자 1 옆에 있는 ~ 키)을 쓰이며, 디자이너가 일러스트레이터에서 텍스트 박스 만들고 글자 쓰는 거랑 똑같다.

const name = "ARCHIVE 소파";
const price = 300000;

// ❌ 옛날 방식 (더하기 지옥)
console.log("상품명은 " + name + "이고, 가격은 " + price + "원 입니다.");

// ✅ 최신 방식 (백틱 사용)
// ${변수명} 자리에 변수를 쏙 집어넣으면 끝!
console.log(`상품명은 ${name}이고, 가격은 ${price}원 입니다.`);

HTML 예제

// 그냥 HTML 쓰듯이 쭉 쓰고 변수만 ${ }로
const htmlCode = `<div class="card">
    <h2>${name}</h2>
    <p>${price}원</p>
</div>`;