[JavaScript] Algorithm | Fizz Buzz

본 글은 leetCode의 Fizz Buzz 문제 솔루션을 JavaScript 코드로 정리한 글입니다.

문제: Fizz BuzzPermalink

Fizz Buzz는 간단한 수학 게임입니다. 1, 2, ..., n 과 같은 수열에서 3의 배수를 Fizz로, 5의 배수를 Buzz로, 3과 5의 배수는 Fizz Buzz로 바꾸는 것이 게임의 규칙입니다. 외국 어린이들이 하는 게임이라는데 외국식 369 느낌인 것 같습니다.

아무튼 오늘은 Fizz Buzz를 알고리즘적으로 어떻게 풀이할 수 있는지 소개하겠습니다.

Approach 1Permalink

문제는 n이 주어지며 수열 1, 2, ..., n 중에서 3의 배수는 "Fizz"로, 5의 배수는 "Buzz"로 3과 5의 배수는 "FizzBuzz"로 변환한 배열을 리턴하는 것입니다.

예를들어,

입력
n = 15
출력
["1", "2", "Fizz", "4", "Buzz", "Fizz", "7", "8", "Fizz", "Buzz", "11", "Fizz", "13", "14", "FizzBuzz"]

인 것이죠.

가장 직관적으로 생각나는 해결법은 문제 그대로 3의 배수에 "Fizz"를 넣어주고, 5의 배수에 "Buzz"를 넣어주고, 15의 배수에 "FizzBuzz"를 넣어주는 방법입니다.

코드는 JS로 작성했습니다.

var fizzBuzz = function(n) {
  let ret = [];
  for(let i = 1; i <= n; ++i) {
    if(i % 3 === 0 && i % 5 === 0) ret.push("FizzBuzz");
    else if(i % 3 === 0) ret.push("Fizz");
    else if(i % 5 === 0) ret.push("Buzz");
    else ret.push(`${i}`);
  }
  return ret;
}

Approach 2Permalink

지금은 3의 배수와 5의 배수에 대해서 값을 변경하지만 여기에 조건이 더 추가되어 7의 배수, 11의 배수, … 등등의 값도 변경해야 한다면 문제는 단숨에 복잡해질 것입니다.

예를 들어, 7의 배수는 “Jazz”로 바꿔준다고 한다면 다음과 같은 if문을 구성해야 할 것입니다.

if(i % 3 === 0 && i % 5 === 0 && i % 7 === 0) ...
else if(i % 3 === 0 && i % 5 === 0) ...
else if(i % 5 === 0 && i % 7 === 0) ...
else if(i % 7 === 0 && i % 3 === 0) ...
else if(i % 3 === 0) ...
else if(i % 5 === 0) ...
else if(i % 7 === 0) ...

이렇게 모든 경우에 대해 조건문을 일일이 쓰는 건 많이 비효율적으로 보입니다.

이럴 땐 concatenation 으로 해결합니다.

var fizzBuzz = function(n) {
  let ret = [];
  for(let i = 1; i <= n; ++i) {
    let e = '';
    if(i % 3 === 0) e += "Fizz";
    if(i % 5 === 0) e += "Buzz";
    if(i % 7 === 0) e += "Jazz";
    if(e === "") e += i;
    ret.push(e);
  }
  return ret;
}

Approach 3Permalink

그렇담 이제 더욱 일반화를 해보겠습니다.

3, 5, 7과 같은 조건들을 배열에 넣어 아무리 매핑해야하는 조건들이 많아지더라도 일일이 조건문을 작성하지 않도록 해보겠습니다.

var fizzBuzz = function(n) {
  let ret = [];
  let dict = [
    [3, "Fizz"],
    [5, "Buzz"]
  ];

  for(let i = 1; i <= n; ++i) {
    let e = "";
    for(let d of dict) if(i % d[0] === 0) e += d[1];
    if(e === "") e += i;
    ret.push(e);
  }
  return ret;
}

ReferencesPermalink

https://leetcode.com/problems/fizz-buzz/solution/

 
[출처] https://dinn.github.io/algorithm/fizzbuzz/

 

 

 

 

[JavaScript] Algorithm | Fizz Buzz

본 글은 leetCode의 Fizz Buzz 문제 솔루션을 JavaScript 코드로 정리한 글입니다.

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

문제: Fizz BuzzPermalink

Fizz Buzz는 간단한 수학 게임입니다. 1, 2, ..., n 과 같은 수열에서 3의 배수를 Fizz로, 5의 배수를 Buzz로, 3과 5의 배수는 Fizz Buzz로 바꾸는 것이 게임의 규칙입니다. 외국 어린이들이 하는 게임이라는데 외국식 369 느낌인 것 같습니다.

아무튼 오늘은 Fizz Buzz를 알고리즘적으로 어떻게 풀이할 수 있는지 소개하겠습니다.

Approach 1Permalink

문제는 n이 주어지며 수열 1, 2, ..., n 중에서 3의 배수는 "Fizz"로, 5의 배수는 "Buzz"로 3과 5의 배수는 "FizzBuzz"로 변환한 배열을 리턴하는 것입니다.

예를들어,

입력
n = 15
출력
["1", "2", "Fizz", "4", "Buzz", "Fizz", "7", "8", "Fizz", "Buzz", "11", "Fizz", "13", "14", "FizzBuzz"]

인 것이죠.

가장 직관적으로 생각나는 해결법은 문제 그대로 3의 배수에 "Fizz"를 넣어주고, 5의 배수에 "Buzz"를 넣어주고, 15의 배수에 "FizzBuzz"를 넣어주는 방법입니다.

코드는 JS로 작성했습니다.

var fizzBuzz = function(n) {
  let ret = [];
  for(let i = 1; i <= n; ++i) {
    if(i % 3 === 0 && i % 5 === 0) ret.push("FizzBuzz");
    else if(i % 3 === 0) ret.push("Fizz");
    else if(i % 5 === 0) ret.push("Buzz");
    else ret.push(`${i}`);
  }
  return ret;
}

Approach 2Permalink

지금은 3의 배수와 5의 배수에 대해서 값을 변경하지만 여기에 조건이 더 추가되어 7의 배수, 11의 배수, … 등등의 값도 변경해야 한다면 문제는 단숨에 복잡해질 것입니다.

예를 들어, 7의 배수는 “Jazz”로 바꿔준다고 한다면 다음과 같은 if문을 구성해야 할 것입니다.

if(i % 3 === 0 && i % 5 === 0 && i % 7 === 0) ...
else if(i % 3 === 0 && i % 5 === 0) ...
else if(i % 5 === 0 && i % 7 === 0) ...
else if(i % 7 === 0 && i % 3 === 0) ...
else if(i % 3 === 0) ...
else if(i % 5 === 0) ...
else if(i % 7 === 0) ...

이렇게 모든 경우에 대해 조건문을 일일이 쓰는 건 많이 비효율적으로 보입니다.

이럴 땐 concatenation 으로 해결합니다.

var fizzBuzz = function(n) {
  let ret = [];
  for(let i = 1; i <= n; ++i) {
    let e = '';
    if(i % 3 === 0) e += "Fizz";
    if(i % 5 === 0) e += "Buzz";
    if(i % 7 === 0) e += "Jazz";
    if(e === "") e += i;
    ret.push(e);
  }
  return ret;
}

Approach 3Permalink

그렇담 이제 더욱 일반화를 해보겠습니다.

3, 5, 7과 같은 조건들을 배열에 넣어 아무리 매핑해야하는 조건들이 많아지더라도 일일이 조건문을 작성하지 않도록 해보겠습니다.

var fizzBuzz = function(n) {
  let ret = [];
  let dict = [
    [3, "Fizz"],
    [5, "Buzz"]
  ];

  for(let i = 1; i <= n; ++i) {
    let e = "";
    for(let d of dict) if(i % d[0] === 0) e += d[1];
    if(e === "") e += i;
    ret.push(e);
  }
  return ret;
}

ReferencesPermalink

https://leetcode.com/problems/fizz-buzz/solution/

 
[출처] https://dinn.github.io/algorithm/fizzbuzz/

 

 

 

 

 

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
번호 제목 글쓴이 날짜 조회 수
34 [javascript] React - Apache에 배포하기 file 졸리운_곰 2026.01.25 444
33 Python으로 GraphQL 서버 구현 file 졸리운_곰 2019.12.17 541
32 처음 만나는 GraphQL file 졸리운_곰 2019.12.17 372
31 웹팩(Webpack) 이란, 웹팩 간단 정리 및 리액트(React) 기본 개발환경 세팅. [2] file 졸리운_곰 2019.11.08 581
30 웹팩(Webpack) 이란, 웹팩 간단 정리 및 리액트(React) 기본 개발환경 세팅. [1] file 졸리운_곰 2019.11.08 411
29 PHP 로 css/js 보호하기 졸리운_곰 2019.11.08 438
28 Three.js를 이용한 WebGL: 기본 file 졸리운_곰 2019.11.08 495
27 underscore.js로 편해지자 졸리운_곰 2018.10.16 545
26 자바스크립트로 각종 값넘기는방법 졸리운_곰 2018.01.24 518
25 form 데이터 주고 받기 file 졸리운_곰 2018.01.24 489
24 Node.js & WebSocket — Simple chat tutorial file 졸리운_곰 2017.12.08 612
23 JavaScript 모듈화 도구, webpack file 졸리운_곰 2017.10.30 538
22 웹팩이란? 졸리운_곰 2017.10.30 531
21 이해하기 쉬운 Webpack 가이드 file 졸리운_곰 2017.10.30 853
20 [jquery] Ajax를 품은 jQuery file 졸리운_곰 2017.04.25 466
19 Create Your First Mobile App with AngularJS and Ionic file 졸리운_곰 2016.11.20 1269
18 Single Page Application using AngularJs Tutorial file 졸리운_곰 2016.11.20 458
17 AngularJS Tutorial - Building a Web App in 5 minutes file 졸리운_곰 2016.11.20 460
16 자바스크립트의 'this' 키워드 이해하기 졸리운_곰 2016.11.17 634
15 jQuery 핵심 - 노드 다루기 졸리운_곰 2016.11.17 775
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED