[JavaScript] 자바스크립트 임의의 수(random number) 다루기

022_임의의 수 (random number) 다루기

[적용]

• 임의의 확률을 사용해 작업을 처리하고 싶을 때
•  애니메이션에 임의의 값을 부여하고 싶을 때

---

[내용]

Math.random()은 0 이상 1 미만의 부동 소수점 유사 함수를 반환한다.

---

[문법]

메소드	의미	반환
Math.random()	부동 소수점의 유사 난수를 반환 (0 이상 1 미만)	숫자

---

[예시1]

Math.random();  // 0 이상 1 미만 임의의 소수
Math.floor(Math.random() * 100);  // 0 이상 100 미만 임의의 정수
10 + Math.floor(Math.random() * 10);  // 10 이상 20 미만 임의의 정수

---

[예시2]

버튼을 누를 때마다 색상을 임의로 바꾸는 샘플 코드를 통해 Math.random()을 알아보자.

 

HTML                                                                                                                                                              index.html

<!-- 버튼 -->
<button class="button">색상 변경</button>
<!-- 그라데이션이 표시되는 직사각형 -->
<div class="rectangle"></div>

 

CSS                                                                                                                                                                     style.css

.rectangle { 
    width: 100%;
    height: calc(100vh - 45px);
    --start: hsl(0, 100%, 50%);
    --end: hsl(322, 100%, 50%);
    background-image: linear-gradient(-135deg, var(--start), var(--end));
    margin-top: 5px;
    }

 

JavaScript                                                                                                                                                          main.js

/** 직사각형 */
const rectangle = document.querySelector('.rectangle');

// 버튼 클릭 시 onCLickButton() 실행
document.querySelector('.button').addEventListener('click', onClickButton);

/** 버튼을 누를 때마다 그라데이션 색상을 변경 */
function onClickButton() { 
    // 0~359 사이 임의의 수를 가져오기
    const randomHue = Math.trunc(Math.random() * 360);
    // 그라데이션의 시작과 끝 색상을 결정
    const randomColorStart = `hsl(${randomHue}, 100%, 50%)`;
    const randomColorEnd = `hsl(${randomHue + 40}, 100%, 50%)`;
    
    // 직사각형의 그라데이션 처리 변수
    rectangle.style.setProperty('--start', randomColorStart);
    rectangle.style.setProperty('--end', randomColorEnd);
    }

 

[실행결과]

버튼을 누를때 마다 색상이 바뀌는 것을 확인할 수 있다.

---

Appendix         

안전한 난수 사용은 crypto.getRandomValus()

메소드	의미	반환
crypto.getRandomValues(타입지정배열)	난수의 배열을 반환	배열

비밀번호 등 정보 보호가 중요한 문자열을 생성할 때는 Math.random()보다 crypto.getRandomValues()를 사용한다.

인수에 타입 지정 배열과 값을 전달하면 값의 난수 배열을 생성한다.

다음 코드를 통해 확인해보자

// 임의의 정수 (부호없는 16비트) 10개가 들어 있는 배열을 생성
// 예: [8918, 14634, 53220, 62158, 64876, ...)
const randomArray1 = crypto.getRandomValues(new Uint16Array(10));
// 배열의 요소를 연결하여 난수를 생성
// 예: 89181463453220621586....
randomArray1.join('');

// 부호 없는 32비트의 배열 난수를 생성
// 예: 89030296873337467400372283...
crypto.getRandomValues(new Uint32Array(10)).join('');

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김