Loop statement

프로그래밍의 마법이자 효율성의 끝판왕인 **반복문(Loops)**에 대해 알아보겠습니다.

반복문은 똑같거나 비슷한 동작을 우리가 원하는 횟수만큼, 혹은 특정 조건이 만족될 때까지 자동으로 되풀이하는 도구입니다.

---

1. for 문 (가장 많이 쓰이는 반복문)

정해진 횟수만큼 반복할 때 주로 사용합니다. 세 가지 설정값이 필요합니다.

• 초기화식: 반복을 시작할 변수를 만듭니다. (예: let i = 0)
• 조건식: 이 조건이 참(true)인 동안 계속 반복합니다.
• 증감식: 한 번 반복이 끝날 때마다 변수를 어떻게 변화시킬지 정합니다. (예: i++)

JavaScript

 

// "안녕하세요"를 5번 출력하기
for (let i = 1; i <= 5; i++) {
    console.log(i + "번째 인사: 안녕하세요!");
}

---

2. while 문 (조건 중심 반복문)

조건이 참인 동안 무한히 반복합니다. 횟수가 정해져 있지 않고, 특정 상황이 될 때까지 계속해야 할 때 유리합니다.

• 주의: 조건이 계속 참이면 프로그램이 멈추지 않는 '무한 루프'에 빠질 수 있으므로, 반드시 내부에서 조건을 거짓으로 만들 장치를 넣어야 합니다.

JavaScript

 

let energy = 3;

while (energy > 0) {
    console.log("에너지가 " + energy + " 남았습니다. 계속 달립니다!");
    energy--; // 에너지를 감소시켜 결국 반복을 멈추게 함
}
console.log("에너지 고갈! 정지합니다.");

---

3. 배열과 함께 쓰는 반복문

현업에서 가장 많이 활용되는 형태입니다. 목록에 있는 데이터를 하나씩 꺼내어 처리할 때 사용합니다.

JavaScript

 

const fruits = ["사과", "바나나", "포도", "딸기"];

// fruits.length를 사용하면 배열의 크기가 바뀌어도 안전합니다.
for (let i = 0; i < fruits.length; i++) {
    console.log("바구니에 " + fruits[i] + "가 담겨 있습니다.");
}

---

🖥️ 멋진 실전 예제: "별 찍기 계단"

반복문 안에 반복문을 넣는 '중첩 반복문'을 활용하여 예쁜 계단 모양을 만들어 봅시다.

JavaScript

 

let stairs = "";
const height = 5;

for (let i = 1; i <= height; i++) {
    // 한 줄마다 별을 i개씩 추가합니다.
    stairs = "";
    for (let j = 1; j <= i; j++) {
        stairs += "⭐";
    }
    console.log(stairs);
}

/* 실행 결과:
⭐
⭐⭐
⭐⭐⭐
⭐⭐⭐⭐
⭐⭐⭐⭐⭐
*/

---

학습 정리

• for 문은 반복 횟수가 명확할 때 사용하면 코드가 깔끔하다.
• while 문은 언제 끝날지 모르는 상황에서 조건에 집중할 때 사용한다.
• 배열의 모든 요소를 훑을 때는 **array.length**를 조건식에 활용하는 것이 정석이다.

---

반복문이라는 강력한 무기까지 손에 넣으셨습니다! 이제 수작업으로 하던 노가다(?)는 모두 컴퓨터에게 시킬 수 있게 되었네요.

---

---

배열의 데이터를 더욱 우아하고 간결하게 다루는 for...of 문과 forEach 함수에 대해 알아보겠습니다.

전통적인 for 문이 인덱스(i)를 직접 관리해야 했다면, 이번 장에서 배울 방법들은 데이터 그 자체에만 집중하게 해줍니다.

---

1. for...of 문 (가장 깔끔한 반복문)

배열의 요소들을 하나씩 직접 꺼내어 변수에 담아주는 반복문입니다.

• 특징: 인덱스(i)를 계산할 필요가 없어 코드가 매우 직관적입니다.
• 장점: break, continue, return 등을 사용하여 반복을 제어할 수 있습니다.

JavaScript

 

const movies = ["알라딘", "라이온킹", "토이스토리"];

// movie라는 변수에 배열의 요소가 하나씩 담깁니다.
for (const movie of movies) {
    console.log("오늘의 추천 영화: " + movie);
}

---

2. forEach() 함수 (배열 전용 메서드)

배열 객체가 기본으로 가지고 있는 메서드로, 함수를 인자로 받아 배열의 각 요소에 실행합니다.

• 특징: "배열아, 너의 요소마다 이 함수를 실행해줘"라고 부탁하는 방식입니다.
• 구성: 요소의 값뿐만 아니라 인덱스(순서) 정보도 쉽게 가져올 수 있습니다.
• 주의: break나 continue를 사용할 수 없으며, 끝까지 모든 요소를 순회합니다.

JavaScript

 

const colors = ["Red", "Green", "Blue"];

// 첫 번째 인자는 값(color), 두 번째 인자는 순서(index)입니다.
colors.forEach((color, index) => {
    console.log(`${index + 1}번째 색상은 ${color}입니다.`);
});

---

📋 전통적 for vs for...of vs forEach

구분	일반 for 문	for...of 문	forEach 함수
가독성	낮음 (i 관리 필요)	높음 (매우 간결)	높음 (함수형 스타일)
인덱스 접근	직접 관리 가능	어려움 (따로 변수 필요)	쉬움 (두 번째 인자)
중단 가능성	break 가능	break 가능	불가능 (전체 순회)
사용 대상	모든 반복 상황	배열, 문자열 등	오직 배열

---

🖥️ 멋진 실전 예제: "점수 필터링하기"

for...of를 사용하여 특정 점수 이상의 학생들만 골라내는 코드를 작성해 봅시다.

JavaScript

 

const scores = [85, 42, 98, 60, 77];
const passingScores = [];

// 점수 목록에서 하나씩 꺼내어 검사합니다.
for (const score of scores) {
    if (score >= 70) {
        passingScores.push(score);
    }
}

console.log("합격자 점수 목록:", passingScores); // [85, 98, 77]

// forEach를 사용한 합계 계산
let total = 0;
scores.forEach(s => total += s);
console.log("평균 점수:", total / scores.length);

---

학습 정리

• 단순히 배열의 모든 값을 읽기만 할 때는 **for...of**가 가장 읽기 편하다.
• 값과 순서(인덱스)가 모두 필요할 때는 **forEach**가 강력한 도구가 된다.
• 현대 자바스크립트에서는 전통적인 for 문보다 이 두 가지 방식을 훨씬 더 선호한다.

---

배열을 자유자재로 다루는 현대적인 반복 기법까지 마스터하셨습니다!

---

---

배열 데이터를 가공하고 정제하는 가장 강력한 도구인 map과 filter에 대해 알아보겠습니다.

이 두 메서드는 원본 배열을 수정하지 않고 항상 새로운 배열을 반환한다는 공통점이 있어, 데이터의 안정성을 유지하며 프로그래밍할 때 필수적으로 사용됩니다.

---

1. map (데이터 변형하기)

배열의 모든 요소를 하나씩 꺼내어 특정 함수를 실행한 뒤, 그 결과물들을 모아 새로운 배열을 만듭니다.

• 역할: "A라는 배열을 일정한 규칙에 따라 B라는 배열로 변신시켜줘"라고 할 때 사용합니다.
• 특징: 원본 배열과 결과 배열의 길이가 항상 같습니다.

JavaScript

 

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

// 모든 숫자에 2를 곱해서 새로운 배열을 만듭니다.
const doubled = numbers.map(num => num * 2);

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

---

2. filter (데이터 걸러내기)

배열의 요소 중 특정 조건에 맞는(참인) 요소들만 골라내어 새로운 배열을 만듭니다.

• 역할: "이 배열에서 조건에 맞는 애들만 따로 모아줘"라고 할 때 사용합니다.
• 특징: 조건에 따라 결과 배열의 길이는 원본보다 짧아질 수 있습니다.

JavaScript

 

const numbers = [10, 25, 5, 40, 15];

// 20보다 큰 숫자만 골라내어 새로운 배열을 만듭니다.
const overTwenty = numbers.filter(num => num > 20);

console.log(overTwenty); // [25, 40]

---

3. map과 filter의 조합 (메서드 체이닝)

두 메서드를 연결하여 사용하면 매우 복잡한 데이터 처리도 한 번에 끝낼 수 있습니다.

JavaScript

 

const products = [
    { name: "노트북", price: 1200000 },
    { name: "마우스", price: 30000 },
    { name: "키보드", price: 80000 },
    { name: "모니터", price: 300000 }
];

// 1. 10만원 이상의 상품만 골라서(filter)
// 2. 상품명만 추출한 배열 만들기(map)
const expensiveProductNames = products
    .filter(p => p.price >= 100000)
    .map(p => p.name);

console.log(expensiveProductNames); // ["노트북", "모니터"]

---

📋 map vs filter 한눈에 비교

구분	map()	filter()
목적	요소를 다른 값으로 변경/변형	조건에 맞는 요소만 추출/선택
결과 배열 길이	원본 배열과 동일함	원본보다 작거나 같음
콜백 함수 반환값	새로운 요소로 사용될 값	해당 요소를 유지할지 결정할 T/F

---

학습 정리

• **map**은 데이터를 요리해서 새로운 메뉴를 만들 때 사용한다.
• **filter**는 불량품을 골라내거나 원하는 데이터만 추출할 때 사용한다.
• 두 메서드 모두 원본 배열을 건드리지 않으므로 안심하고 사용할 수 있다.

---

데이터를 자유자재로 다루는 고차 함수의 세계까지 완벽히 이해하셨습니다!

---