[Vanilla JS] 인용구 나타내기 Math.random

 웹사이트에 유명인사의 여러 명언들을 나타내주는 화면을 구현하는 코드입니다.

 

 여러 개의 인용구들을 랜덤으로 나타나게 하기 위해서 Math.random를 사용합니다. 

 

 Math.random 은 0~1 사이의 무작위 실수(float)를 반환해주기 때문에 Math.random() * n 의 형태로 수를 곱해주어 랜덤 숫자의 범위를 정할 수 있습니다.

 

---

 

  <div id="quote">
    <span></span>
    <span></span>
  </div>

const quotes = [
  {
    quote: "1 Stand up straight with your shoulders straight",
    author: "Jordan B Peterson",
  },
  {
    quote: "2 Treat yourself like someone you are responsible for helping",
    author: "Jordan B Peterson",
  },
  {
    quote: "3 Befriend people who want the best for you",
    author: "Jordan B Peterson",
  },
  {
    quote: "4 Compare yourself to who you were yesterday, not the useless person you are today",
    author: "Jordan B Peterson",
  },
  {
    quote: "5 Do not let your children do anything that makes you dislike them",
    author: "Jordan B Peterson",
  },
  {
    quote: "6 Set your house in order before you criticise the world",
    author: "Jordan B Peterson",
  },
  {
    quote: "7 Pursue what is meaningful, not what is expedient",
    author: "Jordan B Peterson",
  },
  {
    quote: "8 Tell the truth. Or at least don’t lie",
    author: "Jordan B Peterson",
  },
  {
    quote: "9 Assume the person you are listening to knows something you don’t",
    author: "Jordan B Peterson",
  },
  {
    quote: "10 Be precise in your speech",
    author: "Jordan B Peterson",
  },
  {
    quote: "11 Do not bother children while they are skateboarding",
    author: "Jordan B Peterson",
  },
  {
    quote: "12 Pet a cat when you encounter one in the street",
    author: "Jordan B Peterson",
  },

];

const quote = document.querySelector("#quote span:first-child");
const author = document.querySelector("#quote span:last-child");

const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)];

quote.innerText = todaysQuote.quote;
author.innerText = todaysQuote.author;

 위 코드의 경우 제가 존경하는 인물인 조던 피터슨의 저서 <12 Rules for Life> 에 명시된 12개의 인용구들을 배열에 넣었고, 배열 원소들을 출력하기 위해 Math.random() * array.length(배열의 길이만큼) 로 곱해주었습니다.

// array.length는 실제 수만큼 12으로 곱해도 문제가 없지만, 배열의 수가 늘어날 수록 그 수를 일일이 계산하기란 게으름을 추구해야하는 개발자의 아이덴티티와 부합하지 않는다고 생각하기 때문에 array.length 를 통해 간단하게 제어하는 것을 권장합니다.

// 12으로 곱하는 이유는 0~12 사이의 수를 반환하기 때문에 12를 곱해버리면 숫자 12는 Math.random에 선택되지 않겠지만 컴퓨터는 숫자를 0부터 카운트하기 때문에 전혀 문제가 되지 않습니다. 우리가 필요한 것은 0~11 의 배열입니다.

 

 일반적인 경우처럼 html 에 직접적으로 일일이 <span> 을 추가하여 이미 만들어진 <span> 태그를 Javascript 에서 가져다 쓰는 방식이 아닌,

 createElement 를 통해 Javascript 에서 배열의 수만큼 html 에 태그를 생성할 수 있도록 구성했기 때문에 배열의 수를 늘리더라도 다른 코드들을 다시 디버깅 할 필요가 전혀 없기에 편리합니다.