[Javascript] Math 객체를 이용해서 랜덤 값 만들기(Math.random)

FrontEnd/Javascript

[Javascript] Math 객체를 이용해서 랜덤 값 만들기(Math.random)

김평범님 2022. 3. 14. 22:01

🤔Math 객체란?

Math객체는 자바스크립트에 내장되어 있는 객체이다.

주로 숫자를 다루는 수학에 관련된 함수들이 들어가 있다.

그중 오늘은 내가 자주 사용하는 Math.random()에 대해 공부하겠다.

📈Math Random 함수를 사용할 때

대시보드나 그래프를 그려줄 때 가끔 데모 사이트를 만들 때 랜덤 값들이 필요한 경우가 있다.

이럴 때 나는 주로 Math.random()을 이용해서 특정 범위의 랜덤 값을 만들어서 연동한다.

📕Math Random 이용하기

<html>
<script>
    let randomNumber = Math.random();
    console.log(randomNumber)
</script>
</html>

실행화면

실행을 해보면 알겠지만 0 이상 1 미만이 난수를 발생해준다.

1️⃣최소 최대값 사이의 난수 생성하기

0,1 사이 난수가 아니라 가끔은 내가 원하는 정수의 난수가 필요할 때도 있다.

이때는 min과 max 값을 설정해서 아래와 같이 작성해준다.

<html>
<script>
    const min =0;
    const max= 100;
    let randomNumber = Math.random() * (max-min) + min;
    console.log(randomNumber)
</script>
</html>

2️⃣최소, 최대값 사이 난수를 정수로 생성하기

마지막으로 소수점 형태의 난수가 아니라 정수 형태를 난수를 원한다면

Math.floor를 추가로 이용한다.

Math.floor()를 이용하면 소수점 값을 버려준다.

<html>
<script>
    const min =0;
    const max= 100;
    let randomNumber = Math.floor(Math.random() * (max-min)) + min;
    console.log(randomNumber)
</script>
</html>

'FrontEnd > Javascript' 카테고리의 다른 글

Javascript URL 리다이렉트 시키기 (vue.js router push) (0)	2022.05.11
[자바스크립트] 세미콜론(;)을 꼭 안찍어도되는 ASI 알아보기 (0)	2022.04.11
[javaScript]JSON 과 javascript의 Object 차이 바로 알기 (0)	2022.03.07
[정규식에러/크로스브라우징] 모바일(IOS) 크롬, 사파리 에서 페이지 안뜰 때 (PC 정상 작동) (0)	2021.12.29
[Javascript] 자바스크립트 표현식 비구조화할당(Destructuring assignment) 이해하기 (0)	2021.09.12

JavaScript, javascript랜덤값생성, math, math객체, 자바스크립트, 자바스크립트난수, 자바스크립트랜덤값

이전글[javaScript]JSON 과 javascript의 Object 차이 바로 알기
현재글[Javascript] Math 객체를 이용해서 랜덤 값 만들기(Math.random)
다음글[자바스크립트] 세미콜론(;)을 꼭 안찍어도되는 ASI 알아보기

노션템플릿공유, 노션가이드, Vue, 노션사용법, 리액트, 노션, 노션템플릿, 노션수식, 노션유용한템플릿, notion, 노션무료템플릿, 노션활용법, JavaScript, 노션가계부, 노션데이터베이스, Notion템플릿공유, 노션표, CSS, react, NUXT,

일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

김평범's OrdinaryCode