[JS] FizzBuzz 문제 / 조건문, 문자열누적, Map활용

📌 문제

1부터 N까지의 숫자를 출력하되,

• 3의 배수일 경우 "Fizz"
• 5의 배수일 경우 "Buzz"
• 3과 5의 공배수일 경우 "FizzBuzz"
• 그 외의 경우, 숫자를 그대로 출력

---

🔹 코드

function fizzBuzz(n) {
    for (let i = 1; i <= n; i++) {
        if (i % 3 === 0 && i % 5 === 0) {
            console.log("FizzBuzz");
        } else if (i % 3 === 0) {
            console.log("Fizz");
        } else if (i % 5 === 0) {
            console.log("Buzz");
        } else {
            console.log(i);
        }
    }
}

fizzBuzz(15);

🔎 풀이 과정

1️⃣ 문제 접근 방식

• i % 3 === 0 && i % 5 === 0을 먼저 검사해야 한다.
  • 그렇지 않으면 i % 3 === 0 또는 i % 5 === 0 조건이 먼저 실행되어 FizzBuzz가 출력되지 않음.
• 시간 복잡도는 O(n)이며, n개의 숫자를 한 번씩 검사한다.

---

🚀 추가적인 해결 방법

1️⃣ 문자열 누적 방식

function fizzBuzz(n) {
    for (let i = 1; i <= n; i++) {
        let output = "";
        if (i % 3 === 0) output += "Fizz";
        if (i % 5 === 0) output += "Buzz";
        console.log(output || i);
    }
}

✅ 장점

• if-else 대신 문자열을 누적하여 처리 → 더 간결한 코드
• 숫자를 console.log(output || i);로 한 번만 출력하여 연산량을 줄일 수 있음

---

2️⃣ Map을 활용한 함수형 접근

function fizzBuzz(n) {
    return [...Array(n)].map((_, i) => {
        const num = i + 1;
        return (num % 3 === 0 ? "Fizz" : "") + (num % 5 === 0 ? "Buzz" : "") || num;
    }).forEach(console.log);
}

✅ 장점

• map()과 forEach()를 활용한 함수형 코드
• 배열을 생성하고 한 번만 순회 → 코드가 짧고 깔끔함

---

🏆 결론

기본 코드 (if-else 활용) → 가장 직관적이고 가독성이 좋음 ✅
문자열 누적 방식 → 불필요한 조건문을 줄일 수 있음 ✅
함수형 접근 (map) → 깔끔하지만, 면접에서는 가독성이 떨어질 수도 있음 ✅

📌 FizzBuzz는 면접에서 자주 등장하는 기초 문제이므로 다양한 방법을 익혀두는 것이 좋다! 🚀