Lesson 25: Creating Random Values

Master the art of generating random values in JavaScript for games, simulations, and interactive experiences.

❮ Previous Lesson Next Lesson: Linear Search ❯

25.1 Introduction to Random Values

In this lesson, we'll explore how to generate random values in JavaScript using the Math.random() method. Random values are essential for creating games, simulations, and adding unpredictability to your applications.

Key points: The Math.random() method returns a floating-point number between 0 (inclusive) and 1 (exclusive). To get random integers in a specific range, we combine it with Math.floor().

25.2 Generating Random Numbers

To generate a random integer between min (inclusive) and max (inclusive):

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

Example 25.1: Digital Dice

This example simulates a digital dice using random number generation:

function rollDice() {
  const dice = [1, 2, 3, 4, 5, 6];
  const randomIndex = Math.floor(Math.random() * 6);
  return dice[randomIndex];
}

25.3 Generating Random Strings

We can generate random strings by selecting random elements from an array:

Example 25.2: Random Fruit Generator

This example selects a random fruit from an array:

function getRandomFruit() {
  const fruits = ["🍎 Apple", "🍌 Banana", "🍊 Orange", 
                  "🍇 Grapes", "🍓 Strawberry", "🍍 Pineapple"];
  const randomIndex = Math.floor(Math.random() * fruits.length);
  return fruits[randomIndex];
}

🍎 Apple

25.4 Generating Random Images

Random images can be displayed by selecting from an array of image URLs:

Example 25.3: Random Image Display

This example displays a random image from a collection:

function showRandomImage() {
  const images = [
    "https://picsum.photos/id/10/300/300",
    "https://picsum.photos/id/11/300/300",
    "https://picsum.photos/id/12/300/300",
    "https://picsum.photos/id/13/300/300",
    "https://picsum.photos/id/14/300/300"
  ];
  const randomIndex = Math.floor(Math.random() * images.length);
  document.getElementById("randomImage").src = images[randomIndex];
}

25.5 Advanced Randomization Techniques

JavaScript offers more advanced ways to create random values for various use cases.

Example 25.4: Random Quote Generator

This example displays a random inspirational quote:

function showRandomQuote() {
  const quotes = [
    { text: "The only way to do great work is to love what you do.", author: "Steve Jobs" },
    { text: "Innovation distinguishes between a leader and a follower.", author: "Steve Jobs" },
    { text: "Your time is limited, so don't waste it living someone else's life.", author: "Steve Jobs" },
    { text: "Stay hungry, stay foolish.", author: "Steve Jobs" },
    { text: "Design is not just what it looks like and feels like. Design is how it works.", author: "Steve Jobs" }
  ];
  
  const randomIndex = Math.floor(Math.random() * quotes.length);
  return quotes[randomIndex];
}

The only way to do great work is to love what you do.

Steve Jobs

Example 25.5: Random Background Color

This example generates a random background color:

function setRandomColor() {
  const letters = '0123456789ABCDEF';
  let color = '#';
  
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  
  return color;
}

Click to change

Pro Tip: For more secure random values (like in cryptography), use the Web Crypto API's crypto.getRandomValues() method instead of Math.random().

❮ Previous Lesson Next Lesson: Linear Search ❯