[JS] Js기초 반복문

javaScript 기초를 탄탄하게 다져보자

Posted by lim.Chuck on December 6, 2024

[JavaScript]

기초

  1. [JS] Js기초
  2. [JS] Js기초 변수
  3. [JS] Js기초 자료형
  4. [JS] Js기초 형변환
  5. [JS] Js기초 연산자
  6. [JS] Js기초 반복문
  7. [JS] Js기초 switch
  8. [JS] Js기초 function
  9. [JS] Js기초 객체
  10. [JS] Js기초 배열

중급

  1. [JS] Js중급 호이스팅(Hoisting)과 TDZ(Temporal Dead Zone)
  2. [JS] Js중급 생성자함수
  3. [JS] 객체 메소드(Object methods), 계산된 프로퍼티(Computed property)
  4. [JS] 심볼(Symbol)
  5. [JS] WeakMap WeakSet
  6. [JS] 숫자, 수학 method (Number, Math)
  7. [JS] 문자열 메소드(String methods)
  8. [JS] 배열 메소드(Array methods)
  9. [JS] 구조 분해 할당 (Destructuring assignment)
  10. [JS] 매개변수 리스트와 전개 문법(Rest parameters and spread syntax)
  11. [JS] 클로저(Closure)
  12. [JS] setTimeout / setInterval
  13. [JS] call / apply / bind
  14. [JS] 상속, 프로토타입(Prototype)
  15. [JS] 클래스(Class)
  16. [JS] 클로미스(Promise)
  17. [JS] 비동기 처리(Async/Await)
  18. [JS] Generator
  19. [JS] 메모리 릭(Memory Leak)

이제 반복문을 배워볼까? 코드를 여러 번 반복하는 마법이야! ✨

1. for문 (기본 중의 기본!)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 기본적인 for문
for (let i = 0; i < 3; i++) {
  console.log(`${i}번째 안녕!`);
}
// 0번째 안녕!
// 1번째 안녕!
// 2번째 안녕!

// 배열 돌리기
let fruits = ["🍎", "🍌", "🍊"];
for (let i = 0; i < fruits.length; i++) {
  console.log(`${i + 1}번째 과일: ${fruits[i]}`);
}
// 1번째 과일: 🍎
// 2번째 과일: 🍌
// 3번째 과일: 🍊

2. for…of (배열 돌리기 더 쉽게! 😎)

1
2
3
4
5
6
7
8
9
let snacks = ["🍿", "🍪", "🍫"];

// 이렇게 하면 인덱스 신경 안써도 돼!
for (let snack of snacks) {
  console.log(`과자 발견! ${snack}`);
}
// 과자 발견! 🍿
// 과자 발견! 🍪
// 과자 발견! 🍫

3. for…in (객체 돌리기! 🎯)

1
2
3
4
5
6
7
8
9
10
11
12
13
let person = {
  name: "김코딩",
  age: 20,
  hobby: "게임",
};

// 객체의 키를 하나씩 가져올 수 있어!
for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}
// name: 김코딩
// age: 20
// hobby: 게임

4. while문 (조건이 맞는 동안 계속! 🔄)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 기본 while문
let energy = 3;
while (energy > 0) {
  console.log(`에너지가 ${energy}만큼 남았다!`);
  energy--;
}
// 에너지가 3만큼 남았다!
// 에너지가 2만큼 남았다!
// 에너지가 1만큼 남았다!

// do...while (일단 한번은 실행하고 봐!)
let count = 0;
do {
  console.log("최소 한번은 실행됨!");
  count++;
} while (count < 1);

5. break와 continue (반복문 컨트롤하기! 🎮)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// break로 반복문 탈출하기
for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    console.log("3에서 탈출!");
    break;
  }
  console.log(i);
}
// 1
// 2
// 3에서 탈출!

// continue로 건너뛰기
for (let i = 1; i <= 3; i++) {
  if (i === 2) {
    console.log("2는 패스!");
    continue;
  }
  console.log(`${i}번째 실행`);
}
// 1번째 실행
// 2는 패스!
// 3번째 실행

6. 실전 예제! 🎯

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 게임 캐릭터 레벨업 시스템
let level = 1;
let exp = 0;
const needExp = [100, 200, 300]; // 레벨별 필요 경험치

while (level <= 3) {
  console.log(`현재 레벨: ${level}`);
  exp += 150; // 경험치 획득!

  if (exp >= needExp[level - 1]) {
    console.log("레벨업! 🎉");
    level++;
    continue;
  }

  console.log(`다음 레벨까지 ${needExp[level - 1] - exp} 경험치 필요`);
}
// 현재 레벨: 1
// 레벨업! 🎉
// 현재 레벨: 2
// 다음 레벨까지 50 경험치 필요
// ... 계속!

꿀팁! 🍯

  1. 배열은 forEach도 있어!
1
2
3
4
5
let numbers = [1, 2, 3];
numbers.forEach((num) => {
  console.log(`숫자: ${num}`);
});
// 더 깔끔하지 않아? 😎
  1. 무한루프 조심!
1
2
3
4
5
6
7
8
9
10
11
12
// 이러면 큰일남 ㅋㅋ
// while (true) {
//     console.log("영원히 돌아감...");
// }

// 탈출 조건 꼭 넣어주기!
let i = 0;
while (true) {
  console.log(i);
  i++;
  if (i > 2) break; // 이렇게!
}

이제 반복문은 마스터! 뭐든 반복할 수 있다구! 🚀