Random Quote Machine - The new quote should not equal the last

Question

I'm working on the FreeCodeCamp 'Random Quote Machine' front end library project using React JSX, which was working fine with the exception that it frequently produced the same quote two or three times in a row. This was not a good thing for a user to exprience.

Looking into Math.random() I quickly realisded that this was quite normal - two or three repeats of the same number in a row. This is the code I had in a React method called getQuote:

// get new quote from array
 getQuote() {
   let x = Math.floor(Math.random() * quotes.length);
   {console.log("random num = ", x)};
   
   this.setState(quotes[x]
   );

This meant that I had to write a method of producing a random number that wasn't the same as the last. Which, thanks to the quality content on this site and input from @Etienne Martin I found pretty quickly:

Most of the answers in this thread are over complicated.

Here's a concise example of how I would do that:

function getNumber(){
    return (getNumber.number = Math.floor(Math.random() * (4 + 1))) === getNumber.lastNumber ? getNumber() : getNumber.lastNumber = getNumber.number; }

console.log(getNumber()); // Generates a random number between 0 and 4

Live example: https://jsfiddle.net/menv0tur/3/ share edit flag edited Apr 22 '17 at 16:25 answered Apr 20 '17 at 19:35

This allowed me to write my own method:

getQuote() {
  const randNum = () => {
    return (randNum.x = Math.floor(Math.random() * (quotes.length))) === randNum.y ? randNum() : randNum.y = randNum.x;    
}
  this.setState(quotes[randNum()])
}

My problem is; I don't fully understand it. Specifically getNumber.number it looks as though it is using dot notation to access a key value of our function getNumber(). I have never seen this before. As you can see in my re-write I defined the function name randNum() and I'm using randNum.x and randNum.y instead of getNumber.number and getNumber.lastNumber.

Could someone kindly enlighten me as to exactly what we are doing here?

Many thanks in advance.

Answer 1

The first thing you should know is that a function is an object at the same time in javascript. So I can do this:

const randNum = () => {}
randNum.property = "value";

and that's exactly what your function is doing. Probably it will be better to write it as:

const randNum = () => {
  randNum.x = Math.floor(Math.random() * (quotes.length));
  // I can access randNum.x and randNum.y because randNum is a function and an object
  if (randNum.x === randNum.y) {
    // current value is the same as older value, run the function again
    return randNum();
  } else {
    // current value is not the same as the older value
    randNum.y = randNum.x;
    return randNum.y;
  }
};

or, even better:

let oldValue;

const randNum = () => {
  const currentValue = Math.floor(Math.random() * (quotes.length));  
  if (currentValue === oldValue) {
    return randNum();
  } else {
    oldValue = currentValue;
    return currentValue;
  }
};

I know this is not a one line solution but is easier to understand what it does (in my opinion)

Answer 2

Let's rewrite getNumber function so that it's more readable:

function getNumber() {
  let result;
  if (
    (getNumber.number = Math.floor(Math.random() * (4 + 1))) ===
    getNumber.lastNumber
  ) {
    result = getNumber(); // recursive call
  } else {
    result = getNumber.lastNumber = getNumber.number; // assignment expression
  }
  return result;
}

As you can see the function uses recursion. Also in this line: result = getNumber.lastNumber = getNumber.number; the code getNumber.lastNumber = getNumber.number is an assignment expression so result is the same as getNumber.number. Lastly it's possible to write getNumber.number because getNumber is an object. In Javascript even functions are objects. So when you call getNumber() you invoke the function, when you call getNumber.number you accessing object field.

After you define the function getNumber you can then add as many fields to it as you want for example getNumber.anotherProperty = 'whatever' then console.log(getNumber.anotherProperty) // logs 'whatever'.

Answer 3

You may populate your state with a shuffled version of array of quotes, popping one at a time upon nextQuote until all of them are shown, then repeat, once your shuffled array is empty, thus, the quote will not appear until all the rest are shown.

However, it does not eliminate probability of the following outcome:

quote1, quote3, quote5, quote4 | quote5, quote1, quote3..

Pushing the distance between quotes further ultimately leads you to the point where the interval of repeating for each quote is source array length, i.e. your initial array going round:

quote1, quote2... , quote5| quote1, quote2..., quote5 | quote1, quote2...

But then it won't be random quotes any longer

Live-demo of my approach, you may find as follows:

const { useState } = React,
      { render } = ReactDOM,
      rootNode = document.getElementById('root')
      
const quotes = ['quote1', 'quote2', 'quote3', 'quote4', 'quote5'],

      shuffle = arr => [...arr].reduceRight((r,_,__,s) => 
        (r.push(s.splice(0|Math.random()*s.length,1)[0]), r),[])

const App = () => {
  const [currentQuote, setCurrentQuote] = useState(quotes[0|Math.random()*quotes.length]),
        [quoteList, setQuoteList] = useState(shuffle(quotes).filter(q => q!= currentQuote)),
        nextQuote = () => {
          const [newQuote, ...rest] = quoteList
          !rest.length ?
          setQuoteList(shuffle(quotes).filter(q => q != newQuote)) :
          setQuoteList(rest)
          setCurrentQuote(newQuote)
        }
  return (
    <div>
      <div>{currentQuote}</div>
      <button onClick={() => nextQuote()}>Next</button>
    </div>
  )
  
}

render (
  <App />,
  rootNode
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>