자바스크립트 반복문, 이거 하나면 끝! 왕초보도 쉬운 JS 기초 문법 꿀팁

자바스크립트 반복문 완전 정복! 🚀

이번 시간에는 자바스크립트의 핵심 문법 중 하나인 반복문에 대해 알아볼 거야. 조건문이랑 같이 알아두면 코딩 실력이 쑥쑥 늘어날 거야!

반복문, 왜 필요할까? 🤔

반복문은 어떤 조건이 맞을 때까지 똑같은 코드를 계속 실행하게 해주는 거야. 컴퓨터는 똑같은 일을 수천, 수만 번 해도 실수하지 않잖아? 이런 장점을 활용하기 위해 반복문을 쓰는 거지!

대표적인 반복문 친구들 🤝

자바스크립트에는 대표적으로 세 가지 반복문이 있어.

1. while 문:

   • while 키워드 다음에 오는 조건이 참인 동안 중괄호 {} 안에 있는 코드를 계속 실행해.
   • 예시: 숫자가 9990보다 작으면 계속 반복해서 출력하는 코드.
     javascript let num = 1; while (num < 9990) { console.log(num); num++; // 숫자를 1씩 증가시켜서 언젠가 조건이 거짓이 되게 만들어야 해! }
   • 주의! 무한 반복문: 만약 num++ 같은 코드가 없어서 조건이 절대 거짓이 되지 않으면, 프로그램이 멈추지 않고 계속 돌아가. 이걸 무한 반복문이라고 하는데, 컴퓨터 성능을 엄청 떨어뜨리니까 꼭 조심해야 해!

2. do...while 문:

   • while 문이랑 비슷하지만, 무조건 한 번은 코드를 실행하고 나서 조건을 확인해.
   • 예시: 조건이 거짓이어도 일단 console.log("do while 실행됨");은 한 번은 실행돼.
     javascript let condition = false; do { console.log("do while 실행됨"); } while (condition);

3. for 문:

   • 실무에서 가장 많이 사용되는 반복문이야!
   • for 문은 보통 세 가지를 한 번에 써줘:
     • 초기값: 반복을 시작할 때 딱 한 번 실행돼. (예: let i = 0;)
     • 조건식: 이 조건이 참인 동안 반복해. (예: i < 5;)
     • 증감식: 한 번 반복이 끝날 때마다 실행돼. (예: i++;)
   • 예시: 0부터 5까지 출력하는 코드.
     javascript for (let i = 0; i < 5; i++) { console.log(i); // 0, 1, 2, 3, 4가 출력돼! }
   • 실행 원리:
     1. let i = 0; (초기화)
     2. i < 5; (조건 확인. 참이면 다음으로!)
     3. console.log(i); (코드 실행)
     4. i++; (증감)
     5. 다시 2번으로 돌아가서 조건 확인...
     6. i < 5; 조건이 거짓이 되면 반복문 종료!

중첩 반복문: 반복문 안에 반복문! Nested Loops! 🤯

for 문처럼 반복문 안에 또 다른 반복문을 넣어서 사용할 수도 있어. 이걸 다중 반복문이라고 해.

• 예시: 겉에 있는 for 문이 한 번 돌 때마다 안에 있는 for 문이 처음부터 끝까지 다 도는 거야.
  javascript for (let i = 0; i < 2; i++) { for (let j = 0; j < 3; j++) { console.log(`i: ${i}, j: ${j}`); } } // 출력 결과: // i: 0, j: 0 // i: 0, j: 1 // i: 0, j: 2 // i: 1, j: 0 // i: 1, j: 1 // i: 1, j: 2
  다중 반복문은 처음에는 좀 헷갈릴 수 있으니, 직접 코드를 작성해보고 어떻게 돌아가는지 꼭 확인해봐!

배열과 객체도 반복할 수 있어! 📦

반복문은 배열이나 객체처럼 여러 개의 데이터를 다룰 때 정말 유용해.

• 배열 반복:

  • 배열의 length 속성을 이용해서 배열의 크기만큼 반복할 수 있어.
  • for 문이 가장 간편하고 많이 쓰여!
    javascript const fruits = ["사과", "바나나", "딸기"]; for (let i = 0; i < fruits.length; i++) { console.log(fruits[i]); // 사과, 바나나, 딸기 순서로 출력 }
  • for...in 문을 사용하면 배열의 인덱스(0, 1, 2...)를 얻어서 반복할 수도 있어.
    javascript for (const index in fruits) { console.log(fruits[index]); // 사과, 바나나, 딸기 순서로 출력 }

• 객체 반복:

  • for...in 문을 사용하면 객체의 키(key)를 얻어서 반복할 수 있어.
    javascript const person = { name: "홍길동", age: 20 }; for (const key in person) { console.log(`${key}: ${person[key]}`); // name: 홍길동, age: 20 출력 }

반복문 제어하기: break와 continue 🚦

반복문 안에서 특정 상황이 발생했을 때 반복을 제어하는 두 가지 키워드가 있어.

1. break:

   • 즉시 반복문을 종료시켜.
   • 예시: 숫자가 3이 되면 반복을 멈춰. 0, 1, 2만 출력돼.
     javascript for (let i = 0; i < 5; i++) { if (i === 3) { break; // i가 3이면 반복문 종료! } console.log(i); }

2. continue:

   • 현재 반복을 건너뛰고 다음 반복으로 넘어가.
   • 예시: 숫자가 3일 때는 출력을 건너뛰고 다음으로 넘어가. 0, 1, 2, 4가 출력돼.
     javascript for (let i = 0; i < 5; i++) { if (i === 3) { continue; // i가 3이면 이 부분 건너뛰고 다음 반복으로! } console.log(i); }

break와 continue는 while 문이나 do...while 문에서도 똑같이 사용할 수 있으니 잘 기억해둬!

이제 반복문이 뭔지, 어떻게 사용하는지 감이 좀 잡혔지? 직접 코드를 많이 써보면서 익숙해지는 게 중요해! 😊