JavaScript 기초 <5. 조건문과 반복문 제대로 이해하기>

자바스크립트 JavaScript

5. 조건문과 반복문 제대로 이해하기 

 

안녕하세요! 태마입니다.

JavaScript 기초 강좌입니다.

 

강좌의 경우 

1. 주제 간단 정리

2. 상세 주제 정리

으로 이루어져 있습니다.

 

자바스크립트 JavaScript

포스팅 시작하겠습니다 :)

---

 

1. 주제 간단 정리

 

1. 조건문이란?

조건문(Conditional Statement)이란 특정 조건에 따라 코드의 실행 흐름을 결정하는 문법입니다.
JavaScript에서는 if, else if, else, switch를 사용하여 조건을 판단할 수 있습니다.

📌 조건문을 사용하면 코드의 실행 흐름을 제어할 수 있음!

---

 

2. if, else if, else 조건문

if 문은 특정 조건이 true일 때 코드 블록을 실행합니다.
else if를 사용하면 여러 조건을 평가할 수 있으며, else는 모든 조건이 거짓일 때 실행됩니다.

let age = 18;

if (age >= 20) {
    console.log("성인입니다.");
} else if (age >= 13) {
    console.log("청소년입니다.");
} else {
    console.log("어린이입니다.");
}

✅ 결과: "청소년입니다."

📌 조건에 맞는 첫 번째 코드 블록만 실행됨!

---

 

3. switch 문

switch 문은 하나의 값이 여러 경우(case) 중 하나와 일치하는지를 검사할 때 사용합니다.

let fruit = "사과";

switch (fruit) {
    case "사과":
        console.log("사과를 선택했습니다.");
        break;
    case "바나나":
        console.log("바나나를 선택했습니다.");
        break;
    default:
        console.log("해당 과일이 없습니다.");
}

✅ 결과: "사과를 선택했습니다."

📌 각 case 문 뒤에는 break를 추가하여 실행을 중단하는 것이 중요!

---

 

4. 반복문(Loop)란?

반복문(Loop)이란 특정 코드를 여러 번 실행할 수 있도록 해주는 문법입니다.
JavaScript에서는 for, while, do...while 반복문을 사용할 수 있습니다.

📌 반복문을 사용하면 코드의 중복을 줄이고, 데이터를 효율적으로 처리할 수 있음!

---

 

5. for 반복문

for 반복문은 반복 횟수가 정해져 있을 때 주로 사용됩니다.

for (let i = 0; i < 5; i++) {
    console.log(`반복 ${i + 1}`);
}

✅ 결과:

 

반복 1
반복 2
반복 3
반복 4
반복 5

📌 초기값 → 조건 검사 → 코드 실행 → 증감 순으로 동작!

---

 

6. while 반복문

while 문은 조건이 true인 동안 계속 실행됩니다.

let count = 0;
while (count < 3) {
    console.log(`현재 카운트: ${count}`);
    count++;
}

✅ 결과:

 

현재 카운트: 0
현재 카운트: 1
현재 카운트: 2

📌 반복 횟수가 정해져 있지 않을 때 유용하게 사용할 수 있음!

---

 

7. do...while 반복문

do...while 문은 조건을 검사하기 전에 한 번은 무조건 실행됩니다.

let num = 5;
do {
    console.log("한 번은 실행됩니다.");
    num++;
} while (num < 5);

✅ 결과: "한 번은 실행됩니다."

📌 while 문과의 차이점? → 최소 1회 실행 보장!

---

✅ 여기까지 JavaScript의 조건문과 반복문 개념, 기본 사용법을 배웠습니다!
👉 "그렇다면, 성능 최적화를 고려한 반복문 사용법과 고급 활용법은?"
✅ 2부에서 반복문 최적화, for...of, forEach, 중첩 반복문 활용법까지 상세히 배워봅시다!

 

---

반응형

2. 상세 주제 정리

 

1. 반복문 최적화 (for, while, forEach)

반복문을 최적화하면 성능을 크게 향상시킬 수 있습니다.

✅ 1) for vs forEach 성능 비교

const arr = new Array(100000).fill(1);

console.time("for loop");
for (let i = 0; i < arr.length; i++) {
    arr[i] += 1;
}
console.timeEnd("for loop");

console.time("forEach");
arr.forEach((item, index) => {
    arr[index] += 1;
});
console.timeEnd("forEach");

📌 for 반복문이 forEach보다 빠르다! → 최적화된 반복문을 선택하는 것이 중요!

---

 

2. for...in vs for...of 차이점

✅ 1) for...in – 객체의 키를 순회

const obj = { a: 1, b: 2, c: 3 };

for (let key in obj) {
    console.log(key, obj[key]);
}

✅ 결과:

a 1
b 2
c 3

✅ 2) for...of – 배열 요소를 순회

const arr = [1, 2, 3];

for (let value of arr) {
    console.log(value);
}

✅ 결과:

 

1
2
3

📌 객체 순회 → for...in / 배열 순회 → for...of를 사용하자!

---

 

3. 중첩 반복문 활용 (이중 for문)

반복문을 중첩하여 2차원 배열이나 패턴을 만들 수 있습니다.

for (let i = 1; i <= 5; i++) {
    let row = "";
    for (let j = 1; j <= i; j++) {
        row += "*";
    }
    console.log(row);
}

✅ 결과:

*
**
***
****
*****

📌 중첩 반복문을 활용하면 패턴을 쉽게 만들 수 있음!

---

✅ 지금까지 JavaScript의 반복문 최적화, 고급 활용법, 중첩 패턴을 상세히 배웠습니다!
👉 "그렇다면, JavaScript에서 함수를 선언하는 방법과 차이점은?"
✅ 다음 회차에서 함수(Function)의 선언 방식과 차이를 깊이 있게 배워봅시다! 🚀