💻 Fizz Buzz Question

📝 문제 설명

1부터 N까지의 숫자에서 3의 배수는 Fizz, 5의 배수는 Buzz, 둘 다 해당하면 FizzBuzz인 배열 반환하기

첫 코드

마지막에 리턴되는 배열의 요소 형태가 index + 1에서 시작하기 때문에 [1, 2, 3...] 이런 식의 배열을 만들기 위해 Array.from() 메서드를 사용하고 3의 배수, 5의 배수, 15의 배수는 각각의 조건문을 돌리며 찾은 뒤 키워드로 치환했다.

const fizzBuzz = (n) => {
    const arr = Array.from({ length: n }, (_, i) => i + 1);

    for (let i = 0; i < arr.length; i++) {
        if (arr[i] % 15 === 0) {
            arr[i] = "FizzBuzz";
        }
        if (arr[i] % 3 === 0) {
            arr[i] = "Fizz";
        }
        if (arr[i] % 5 === 0) {
            arr[i] = "Buzz";
        }
        arr[i] = arr[i].toString();
    }
    return arr;
};

내 코드를 제출하고나면 다른 분들의 코드랑 비교하는 편인데 이 과정이 제일 재미있다. 가끔 아예 처음보는 코드를 발견할 때도 있고 (최근에는 XOR 연산자를 이렇게 알게 되..었지만 아직 쓰기에 데면데면한 상태) 보통은 내 코드보다 더 간결한 코드들이 많기 때문에 이 비교 과정에서 더 공부가 되는 것 같기도 하다. 아래 코드는 작동 방식은 비슷한데 아예 빈 배열을 만들고 반복문을 돌며 숫자, 키워드를 삽입하는 방법인데 조건문 당 코드 블럭이 없어서 그런지 더 가독성이 (내 것보다) 좋아보여서 살펴봤다.

const fizzBuzz = (n) => {
    const result = [];
    for (let i = 1; i <= n; i++) {
        if (i % 5 === 0 && i % 3 === 0) result.push("FizzBuzz");
        else if (i % 3 === 0) result.push("Fizz");
        else if (i % 5 === 0) result.push("Buzz");
        else result.push(i.toString());
    }
    return result;
};

✨Top rated solution

진짜 깔끔........ map 메서드를 저렇게 증감연산자, 삼항 연산자랑 같이 사용하는 방식은 생각도 못했다. 하나씩 뜯어보면서 공부하다가 증감연산자의 위치의 중요성을 다시 한번 깨닫게 되었다. map 내 콜백 함수에서 각각의 인덱스 i가 현재 0부터 시작하기 때문에 1씩 먼저 증감시키고 나머지를 확인하는 연산이 이어지기 때문에 여기서는 후위(i++)가 아닌 전위(++i) 연산자를 사용해야 한다.

const fizzBuzz = (n) => {
    return new Array(n)
        .fill(0)
        .map(
            (a, i) => (++i % 3 ? "" : "Fizz") + (i % 5 ? "" : "Buzz") || "" + i
        );
};