math.random 랜덤 숫자 사용하기

여러 개의 정보들 중에서 랜덤한 정보를 선택하려고 할때
Random 함수를 많이 사용한다
여러 개의 이미지 중에 랜덤한 이미지를 사용하려고 Math.random() 함수를 사용해보았다

Math.random()

자바스크립트의 랜덤함수 이다
0 부터 1 미만의 숫자를 무작위로 리턴해준다

const randomNum = Math.random();
console.log(`random Number = ${randomNum}`);

특정 범위 내의 값을 얻고 싶을 때

random 에 원하는 값을 곱해주면 된다

0 부터 10 미만까지에서 랜덤으로 숫자를 얻고 싶으면

const randomNum = Math.random() * 10;
console.log(`random Number = ${randomNum}`);

랜덤 정수를 얻는 방법

Math.floor() 사용하면 정수를 얻을 수 있다. 소수점 이하는 내림한다.

const randomNum = Math.random() * 10;
const randomInt = Math.floor(randomNum);
console.log(`random Int = ${randomInt}`);

특정 배열에서 랜덤한 정보를 얻는 방법

배열의 length 를 곱해주면 된다

아래는 unsplash.json 파일을 받아서 해당 json 의 length 중에
한개를 랜덤하게 사용하는 예제 이다.

const randomizePicture = () => {
  const bannerwd = document.getElementById("bannerwd").value;
  const bannerhg = document.getElementById("bannerhg").value;

  $.getJSON("unsplash.json", function (json) {
    const randomNum = Math.floor(Math.random() * json.length);
    document.getElementById("banner-url").value =
      json[randomNum].url +
      "?auto=format&fit=crop&w=" +
      bannerwd * 1.5 +
      "&h=" +
      bannerhg * 1.5 +
      "&q=90";
    console.log(randomNum);
    getURLImage();
  });
};