웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

자바스크립트 배우기 - 주사위 만들기

Last Modified : 2018-05-08 / Created : 2018-05-04
12,823
View Count
자바스크립트를 사용하여 간단한 주사위 함수를 만들면서 배워보고자 합니다. 매우 간단한 주사위 던지기입니다.

주사위 던지기를 위하여 throwDice() 함수를 만들고 원하는 숫자의 이하의 값이 랜덤하게 나오도록 하겠습니다. 이를 구현하기 위해서 아래의 방법들이 필요합니다.

- 클로저를 만드는 방법
- 숫자를 랜덤하게 얻는 방법
- 숫자 소숫점 버림 방법




# 자바스크립트 랜덤값 얻는 주사위 만들기

자! 먼저 함수를 만들어봅니다. 아래와 같이 빈 함수 throw()를 만들어 봅니다.
function throwDice() {
}


! 랜덤한 임의의 값 얻기, Math.random()

throw 함수는 특정 범위의 값을 임의로 반환하는 함수로 만들 것입니다. 여기서 임의의 값을 얻어야하는데 이때 사용할 수 있는 방법이 Math.random()입니다. Math객체의 random() 함수는 0과 1 사이의 임의의 숫자를 랜덤하게 반환하게됩니다. 이를 이용해서 만약 0~9 사이의 값을 얻으려면? 아래와 같이 코드를 만들 수 있습니다.
10 * Math.random();


! 소수점 제거하는 방법

여기서 소수점을 제거해봅니다. 소수점 버림은 Math.floor() 함수를 사용할 수 있습니다.
Math.floor(10 * Math.random();


! 자연수(Natural Number) 얻기

이제 0과 9 사이의 자연수를 얻게되었군요! 여기에 1을 더하면 원하는 1부터 10까지의 값을 얻을 수 있을 것입니다.
Math.floor(10 * Math.random()) + 1;

여기까지 알아본 내용이 핵심입니다. 랜덤하게 특정 범위 숫자를 얻을 수 있으니까요. 그렇다면 마지막으로 클로져(Closure)를 사용하여 완전한 함수를 만들어보겠습니다. 이때 클로저를 만들기 위해서 함수를 두 개로 나눌 것입니다. 랜덤한 값을 얻는 dice() 함수와 이 함수를 실행시키는 throw() 함수가 그것입니다.



# 주사위 만들기 전체 소스코드

그럼 완성된 함수를 보실까요? 아래 함수를 사용하여 원하는 범위의 값을 얻을 수 있습니다.
function dice(no) {
  return function() {
    var randomNo = Math.floor(no * Math.random()) + 1;
    return randomNo;
  }
}

이제 dice()함수를 사용하여 throwDice() 함수가 1부터 6까지 주사위 값을 반환하도록 만들어봅니다.
throwDice = dice(6);

throwDice();

실행하면 계속해서 임의의 수를 반환합니다.
4
6
1
...

이번에는 1과 1000사이의 값을 얻어 보겠습니다.
throwDice = dice(1000);

이번에도 계속해서 임의의 값, 랜덤한 수를 반환합니다.
throwDice();
875
98
229
30
...



# 마치면서

dice()함수를 사용하면 어떤 값이든 0부터 랜덤하게 얻을 수 있습니다. 이처럼 단순하게 6사이의 값보다는 기능단위의 함수로 구현하는 것이 향후 재활용 측면에서 훨씬 좋습니다. dice() 함수는 임의의 값을 반환하는 어플리케이션을 만들때 쉽게 사용할 수 있겠죠!

여기까지 주사위 만드는 방법을 알아보았습니다~ 위 throwDice()는 나오게 될 숫자 범위가 클로저에 의하여 저장되게 됩니다. 그 이유는 dice가 내부의 익명함수를 반환하기 때문입니다. 이처럼 클러저(Closure)가 발생하게 되는 이유는 여기서 모두 설명하기 어렵습니다. 클러저에 대하여 더 알기 원하시면 아래 링크를 참조하시기 바랍니다.

@ 자바스크립트 클로저(Closure) 더 알아보기 >
https://webisfree.com/2015-06-25/자바스크립트-클로저-closure-이해하기

Previous

자바스크립트에서 AJAX 비동기 방식으로 Excel 파일 다운로드 받는 방법

Previous

자바스크립트 메모라이제이션(memorization) 예제보기