0일차: JavaScript로 Fizz Buzz 문제 해결

저는 현재 #100devs 프로젝트의 일원입니다. 우리 총사령관 리온 노엘(Leon Noel)이 근무 시간에 공교롭게도 파이즈 버즈 도전전을 언급했습니다. 한번 해보고 싶습니다.나는 왜 자바스크립트로 코드를 작성하지 않습니까? 이것은 우리가 깊이 연구해야 할 다음 언어이기 때문에, 나는 공교롭게도 이전부터 순환과 조건 문장에 대해 조금 알고 있습니다.
따라서 Fizz Buzz 인코딩 도전에 익숙하지 않은 사람들에게는 다음과 같습니다.

The FizzBuzz problem is a classic test given in coding interviews. The task is simple:
Print integers 1 to N, but print “Fizz” if an integer is divisible by 3, “Buzz” if an integer is divisible by 5, and “FizzBuzz” if an integer is divisible by both 3 and 5.

이 도전이 무엇을 의미하는지 우리가 다 알고 있는 이상 그것을 해결하기 시작합시다.
첫 번째 단계는 어떤 언어로 코드를 작성할지 결정하는 것이다.앞서 언급했듯이 JavaScript를 사용하여 구현하고 있습니다.논리는 변하지 않고 거의 모든 프로그래밍 언어로 실현할 수 있다.
이어서 우리는 이 문제를 위해 명확한 범위를 설정했다.현재의 문제는 1에서 N까지의 정수를 인쇄하는 것이지만, 함수를 사용하지 않기 위해서 나는 1에서 100까지 인쇄할 것이다.이제 우리는 자신의 범위가 생겼으니, 코드를 좀 쓰기 시작합시다!

우리의 코드를 구축하다

변수 선언
우리는 변수를 정의하는 것부터 시작한다.변수 이름i을 let 변수 유형과 함께 사용하기 때문에 i의 값은 계속 수정할 수 있습니다.

let i=1;

논리가 뭐예요?
이제 우리 이 문제를 해결하는 논리에 대해 이야기합시다.우리는 100줄을 인쇄해야 한다는 것을 알고 있다. 줄마다 Fizz, Buzz, Fizz Buzz 또는 숫자로 구성되어 있다.같은 임무를 여러 번 수행하기 위해서는 순환을 사용해야 한다.나는 while 순환을 사용했다.

while(i<=100){
}

주기 작업은 다음과 같습니다.while 문장은 ()에서 정의한 테스트 조건이 진실로 유지되면 그 순환은 문장 블록을 실행합니다.회로에 들어가기 전에 시험 조건을 평가한다.
내 while 문장에서 i가 100보다 작거나 같으면 순환을 실행한다.내가 <=를 사용하는 이유는 코드를 100번 실행해야 하기 때문이다.<만 사용하면 99번 운행할 수 있습니다. 왜냐하면 우리는 0이 아니라 i=1부터 시작하기 때문입니다.

프로세스 맵 시각화
우리는 지금 우리가 하고 싶은 일에 따라 순환 중의 문장을 정의해야 한다.
우리는 기본적으로 각 생산 라인을 위해 4개의 다른 임무 중 1개를 완성해야 한다.

숫자를 3과 5로 나누면 "Fizz Buzz"를 인쇄합니다.

숫자를 3으로 나누면 "Fizz"를 인쇄합니다.

숫자를 5로 나눌 수 있는 경우 Buzz를 인쇄합니다.

숫자를 3이나 5로 나누지 못하면 숫자만 인쇄하면 된다.

또한 인쇄할 때마다 i를 1씩 늘려야 합니다.
주의: 한 숫자가 다른 숫자로 정제될 수 있는지 확인하기 위해서, 우리는 % 연산자를 사용합니다.%는 여수 연산자로서 한 수를 다른 수로 나누면 여수를 준다.다른 수에 의해 정제될 수 있는 하나의 나머지 수는 0이다. 이것이 바로 우리가 비교 연산자를 사용하여 테스트한 결과이다.

흐름도를 조건문으로 바꾸기
컴퓨터가 위에서 언급한 흐름도를 이해하기 위해서는 이를 조건문으로 전환해야 한다.조건문은 코드가 실행될 수 있는지 여부를 결정합니다.
나는 if, else if와 else 문장을 사용할 것이다.if 주장
첫 번째 조건을 위에서 설정하려면 다음 구문을 사용합니다.

if (i%5===0 && i%3===0){
    console.log("FizzBuzz");
    i++;
  }

만약 내가 상술한 코드를 간단한 영어로 변환해야 한다면, 나는 기본적으로 컴퓨터에 알려주고 있다.i를 5로 나눈 나머지 수가 0이고 i를 3으로 나눈 나머지 수가 0이면 콘솔에서 "Fizz Buzz"를 인쇄합니다.이 문장을 실행하면 i의 값을 1 증가시킵니다.
이 두 조건은 모두 진실이어야 하기 때문에 & (논리 and) 연산자를 사용해야 한다는 것을 기억해라.
위의 if 조건이true로 되돌아오면, 자바스크립트는 나머지 조건을 모두 건너뛰고while 순환 조건을 되돌려줍니다.else if 주장
그리고 우리는 다음 두 가지 조건을 위해 else if 문장을 쓴다.우리는 기본적으로 첫 번째 조건if이 정확하지 않으면 이 조건을 테스트해서 이 조건이 정확한지 확인한다.
true라면 문장 블록else을 실행하고 다음 문장if을 계속 실행하며 같은 동작을 수행합니다.

  else if(i%3===0){
    console.log("Fizz");
    i++;
  }
  else if(i%5===0){
    console.log("Buzz");
    i++;
  }

else 주장
마지막 조건에 대해 말하자면, 만약 지금까지 당신이 이미 도달했다면, 이것은 이 숫자를 3이나 5로 나누어서는 안 된다는 것을 의미하기 때문에, 이 숫자를 원래대로 인쇄한 다음에 1을 늘리기만 하면 된다.

else{
    console.log(i);
    i++;

!중요한 알림: 매번 i 순환을 통과할 때마다 그 값이 증가한다는 것을 기억해야 한다.증가i가 없으면 값은 항상 1이고 순환은 영원히 실행되며 숫자 1만 인쇄됩니다.

이 모든 것이 어떻게 작동하는지 이해하다
코드가 처음 실행되었을 때i=1는 while 순환에 들어갔습니다. i는 100보다 작고 첫 번째if 문장으로 테스트를 진행했기 때문입니다.i=1는 5 또는 3으로 나누어질 수 없기 때문에 입력하고 이하else if 문장으로 이동하는 것을 허용하지 않습니다.
마찬가지로 i=1는 3으로 나누어지지 못해 다음else if 문장으로 옮겨야 했지만 5로 나누어지지 못해 다시 거절당했다.
마지막으로 i=1 문장을 가져옵니다. 이 문장은 어떠한 조건 테스트도 하지 않은 상태에서 실행되고 else의 값을 출력합니다. 이 값은 현재 1입니다.i의 증가 연산자를 빌려 i의 값을 1로 증가시켰다.재할당된 값i++이 이제 2입니다.
위에서 설명한 전체 과정은 i에서 중복됩니다.
이 과정은 총 100회 계속 운행되며 매번 i=2의 값이 1씩 증가한다.while 순환 100회 실행 후 i의 값은 현재 101입니다.이번i 순환은 101<=100이false로 되돌아오기 때문에 실행되지 않습니다.이것은while 순환을 멈추게 할 것입니다.
이렇게!while 순환이 100번 실행되며, 요청한 내용을 인쇄합니다.결과는 다음과 같습니다.

(부언: 이것link을 클릭하면 1부터 100까지의 전체 해결 방안을 볼 수 있습니다.콘솔에 표시된 상태에서 코드펜을 어떻게 끼워 넣는지 몰라서, 만약 네가 이렇게 한다면 나에게 가르쳐 줘!
나는 이 도전을 쓰는 것을 매우 좋아하고, 또한 그것을 쓰는 것도 매우 좋아한다.이것은 내가 처음으로 기술적인 것을 쓴 것이다. 내가 배운 것을 종이 위에 쓰는 것은 매우 재미있다.읽어주셔서 감사합니다!