[JavaScript] Math.random()으로 랜덤 값 구하기

개념

Math.floor()

var value = Math.floor(2.54);
document.write(value); // 2

Math.floor() 함수는 소수점 이하의 숫자들을 모두 버리는 역할을 수행하는 함수로 위의 코드처럼 2.54인 경우 2만 살고 .54는 모두 버리면서 결과값으로 2를 반환한다.

비슷한 함수로서 Math.ceil() 같은 경우는 소수점 이하를 올림해버리고, Math.round()는 반올림하는 역할을 한다.

 

Math.random()

var i = Math.random();
document.write(i); // 0.XXXXXXXXXXXXX

Math.random()의 경우 이름에서 처럼 0 이상 1 미만의 난수를 추출하는 함수이다.

소수점을 처리하는 함수없이 단독으로 쓰일 경우, 0.XXXXXXXXXXX...의 긴 난수값이 나오므로 반드시 위의 Math.floor() 함수와 같은 소수점을 다루는 함수와 같이 사용해야 한다.

 

Math.floor(Math.random())

var i = Math.floor(Math.random() * 10);
document.write(i); // 0 ~ 9

Math.floor(Math.random())은 한 세트이며, 임의의 조건에 맞는 난수값을 추출할 수 있다.

예를 들어, 위 코드의 경우 Math.random() * 10을 함으로써 난수 0.XXXX... 값을 일의 자리 정수로 변환시켰다.

여기서 10의 경우 최댓값을 정하는 역할도 하는데, Math.random() 뒤에 (최댓값 -  최솟값 + 1)의 값을 곱하면 이것이 바로 구하고자 하는 난수 범위의 최댓값이 된다.

 

var i = Math.floor(Math.random() * 4) + 2;
document.write(i); // 2 ~ 5

난수 범위의 최댓값을 구하는 방법은 (최댓값 - 최솟값 + 1)이라고 했다. 그럼 최솟값은 어떻게 구할까?

위의 코드에서 보면, 뒤에 붙인 +2 처럼 최솟값은 끝에 더해주기만 하면 된다.

 

var i = Math.floor(Math.random() * 3) + 8;
document.write(i); // 8 ~ 10

위의 코드는 8부터 10사이의 난수를 구하는 식이다. 최댓값이 10이고, 최솟값이 8이기 때문에 (10 - 8 + 1) = 3을 대입해주었고, 최솟값 +8을 붙여주었다.

 

최솟값이 0부터가 아닌 특정 숫자로 정해져 있을 때는, (최댓값 - 최솟값 + 1)을 잘 지켜주기만 하면 된다.

하지만, 최솟값이 0부터일 때는 그냥 (최댓값 + 1)이라고 생각하면 쉽다.

이런 원리라면 생각나는 게 바로 length인데,  배열의 경우 배열 이름.length로 간단히 최댓값을 구할 수 있다는 것도 기억하면 좋다.

 

문제

버튼을 눌렀을 때, 해당 텍스트의 색깔이 임의로 선택한 4가지 색깔 중 하나로 랜덤하게 변할 수 있게 만들어라.

/* HTML은 다음과 같이 작성되었다.
<button onclick="change()">Click!</button>
<h1 id="text">TEXT COLOR CHANGE!</h1>
*/

function change(){
    var color = ["red", "blue", "gold", "green"];
    var i = Math.floor(Math.random() * color.length);
    return text.style.color = color[i];
}

color.length의 값은 4이고 color[i]에서 받아오는 i의 값은 0 ~ 3이기 때문에 최댓값을 color.length로 설정했다.

 

1~99까지의 임의의 숫자 중 1개를 당첨번호로 지정하고, 유저가 입력한 숫자가 당첨번호와 일치할 시
"축하합니다" 메세지를, 아닐 시 "꽝!" 메세제를 띄우게 해라.
(단, 문자나 특정 범위를 벗어난 숫자를 입력할 시 다시 입력하는 창이 나오도록 해야 한다.)

var number = prompt("1부터 99까지의 숫자를 입력하세요.", "1");
if (isNaN(number) != false){ // 숫자가 아닌 문자를 입력했을 때
  alert("숫자를 입력해주세요.");
  location.reload(true); // 새로고침
} else if (number >= 100 || number < 1){ // 100 이상이거나 1 미만일 시
  alert("1부터 99까지의 숫자를 입력해주세요.")
  location.reload(true);
}

var lucky = Math.floor(Math.random() * 99) + 1;
if (isNaN(number) != true && number < 100 && number > 0){
  if (number == lucky){
    alert("축하합니다! 1등에 당첨되셨습니다.")
    } else {
    alert("꽝! 다음 기회에...")
  }
}

location.reload(true)는 페이지를 새로고침하는 역할을 한다. 위의 코드에서는 새로고침을 함으로써 처음에 숫자를 물어보는 prompt때로 돌아가게 하였다. 이것은 밑의 코드처럼 반복문을 이용해서도 가능하다.

var number = parseInt(prompt("1부터 99까지의 숫자를 입력하세요"));
if (number < 1 || number > 100 || isNaN(number) == true){
  var check = true;
}

while (check){
  alert("숫자를 입력하세요.");
  let number = parseInt(prompt("1부터 99까지의 숫자를 입력하세요"));
  if (number >= 1 || number <= 99 || isNaN(number) == false){
    check = false;
  }
}

새로고침하는 방법이 아닌 while을 통해 예외처리를 할 수 있다.