[javascript] 최대공약수 구하기

 

항상 코드를 짤 때, 저는 메커니즘 부터 찬찬히 생각해 봅니다.

 

최대공약수를 어떻게 구하는지 부터 생각해봅시다. 

일단 반복문을 사용해야겠다는 생각부터 들죠.

1부터 시작해서, 2, 3, 4, 5, 6, 7 차례대로 숫자들을 두 숫자에게 나눠야겠죠.

그래서 두 숫자 모두 몫이 0이 되는 숫자를 찾아야 겠죠 ?

그리고 해당 숫자를 변수에다가 저장을 해두고 나올때마다 업데이트가 되어야 겠죠.

 

그렇다면 여기서 중요한 포인트를 적어보죠.

1. 나누기를 할때 for문을 통해 1부터 n까지 두 숫자를 나누어 보아야한다.

2. 몫은 0이 나와야지 공약수이다.

3. 공약수가 나올 때 마다 변수에 값을 업데이트를 해줘야한다. 

4. for문을 돌리는 횟수는 두 숫자 중 작은 값보다 적게 돌아야간한다.

 

이렇게 메커니즘을 생각하면서 조건들을 정리를 해두는게 좋습니다.

 

본격적으로 JS 코드를 짜보겠습니다.

---

1. 변수 선언 / 버튼 요소와 결과값 나타낼 요소를 

변수 선언 할수 있는것이 4가지 있습니다.

계산할 버튼, 결과값을 나타낼 요소, 값을 가져올 input 요소 2개.

여기서 주의하여야할 것이 입력값을 가져올 때는 최신 입력값을 가져와야 한다는 것입니다.

버튼을 클린한 후에 입력값을 가져와야 한다는 말인데요.

버튼 클릭 전에 이미 초기화되어 클릭 시 입력값이 반영되지 않는 부분을 유의하여야 한다는 뜻입니다.

따라서 입력값들은 function 작성 전에 정의하는 것이 아니라! function 내부에서 정의가 되어야한다는 거죠.

    // 변수 선언

    const bt = document.querySelector("#calc");

    const result = document.querySelector("#result");

---

2. 함수 만들기 - 입력값 정의

버튼을 onclick 할시, function이 호출되도록 할것입니다.

    bt.onclick = function() {

    // 버튼 클릭 시 최신 입력값 가져오기

    const x = document.querySelector("#number1").value;

    const y = document.querySelector("#number2").value;

 

x와 y에 두 숫자를 저장해두겠습니다.

보통 코딩을 할 때는 변수의 자료형을 유의하여야하는데요.

      // 문자열을 정수로 변환

      //const x = parseInt(s_x);

      //const y = parseInt(s_y);

 

굳이 이렇게 바꾸지 않아도 되는이유가, JS의 암묵적 타입 변환의 특성 때문인데요.

JavaScript는 타입이 다른 값들을 계산할 때 자동으로 타입을 변환해 주는데, 이를 암묵적 타입 변환이라고 합니다. 이 덕분에 문자열을 숫자처럼 사용할 수 있습니다.

---

3. 최대 공약수 찾기 위한 for문

      let max_count = 1; // let으로 선언하여 값 변경 가능

      for (let i = 1; i <= x && i <= y; i++) {

        if (x % i === 0 && y % i === 0) {

          max_count = i;

        }

      }

여기서 중요한 부분이

let으로 max_count라는 변수를 선언해주는 것인데요.

const로 선언하게 될 시, 값을 변경할 수 없기 때문에 let으로 선언해주어야 합니다.

 

for문을 만들 때는 초기화, 조건, 증감 순으로 코드 해주어야 하는데요.

① 초기화: i를 1부터 시작할것이구요.

② 조건: x와  y 보다 작을 동안만 for문을 실행할 것입니다.

③ 증감: i 는 1부터 하나씩 증가할것입니다.

 

그다음 if 문인데요. 

if 문은 쉽습니다.

x와 y를 i로 나누었을 때 몫이 0이 되는 경우만!

max_count를 i로 업데이트 해주면 됩니다.

---

 4. 결과 출력

result.innerText = `${max_count}`;

 

결과 출력은 그대로 사용하면 돼서 생략 하겠습니다.

 

 

+) 파이썬과 JS의 다른점

파이썬 같은 경우는 for i in range() ~ 이런식으로 가구요 ! JS 같은 경우는  for (초기화; 조건; 증감) 이런식으로 갑니다.

파이썬은 for 문에 직접적으로 조건문을 달 수 없으나, JS의 경우는 조건문을 for문에 직접적으로 넣을 수 있습니다.

 

 

 

- 소스 코드 - 

 

See the Pen 최대공약수 by cinn1004 (@cinn1004) on CodePen.