[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/

 

 

 

 

 

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
번호 제목 글쓴이 날짜 조회 수
61 [web design][웹디자인][알아봅시다] 왕초보 피그마 기초 사용법???? 셀러님들 지금 당장 피그마 시작하세요! 그대로 따라만 해서 피그마 정복하기 졸리운_곰 2025.07.21 246
60 CSS selector 졸리운_곰 2024.08.02 688
59 [Web Design][웹 디자인] Sass(SCSS) 완전 정복! 졸리운_곰 2022.07.31 412
58 [HTML] HTML5 공간 분할 : 레이아웃(Layout) file 졸리운_곰 2021.09.06 552
57 [HTML5] HTML 공간 분할 file 졸리운_곰 2021.09.06 528
56 [웹제작][웹디자인] 시각화 대시보드 를 만들기 위해 고려해야 하는 4가지 file 졸리운_곰 2021.09.05 588
55 웹사이트 디자인하는 방법 file 졸리운_곰 2020.12.30 406
54 카드형 디자인/갤러리/리스트 코딩하기. file 졸리운_곰 2020.12.04 677
53 HTML DIV tag - 테두리 그리기 STYLE - BORDER 졸리운_곰 2020.08.26 241
52 CSS :: 버튼(Button) 예쁘게 꾸미기, 여러개의 버튼 그룹화 하기 file 졸리운_곰 2020.08.26 994
51 [button] CSS - Button - 버튼스타일 (버튼크기, 버튼색깔, 버튼비활성화, 버튼그룹, 이미지위버튼) 졸리운_곰 2020.08.26 2293
50 GUI 디자이너를 위한 색상 참고 사이트 file 졸리운_곰 2020.08.04 608
49 생산성을 빠르게 높여주는, 프런트엔드 개발 툴 10가지 file 졸리운_곰 2020.04.10 488
48 Mustache 공유 file 졸리운_곰 2019.12.29 344
47 Mustache 템플릿 문법 수많은 언어에서 지원되는 초간단 템플릿 문법 졸리운_곰 2019.12.29 273
46 HTML/CSS기초_drop down 메뉴 만들기 file 졸리운_곰 2019.12.21 1242
45 반응형이란 무엇인가? 졸리운_곰 2019.11.20 449
44 <인터넷, 블로그팁: 마진(margin)과 패딩(padding)의 차이점이 뭘까?> file 졸리운_곰 2019.11.01 504
43 CSS / 반응형 레이아웃 만들기 file 졸리운_곰 2019.02.08 572
42 Responsive Web ② - 반응형 웹을 위한 레이아웃 설계 방법 file 졸리운_곰 2019.02.08 634
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED