backgroundColor=['red','green','blue','orange'][Math.floor(Math.random()*4)]

Can someone explain how this code executes in the Javascript syntax, I understand it generates a random number but the result is the color that is in the index value generated in the second square bracket.

In C++ array[][] is used to generate a two-dimensional array but here it is generating the index to be used in the first square bracket pair.

Hope to get clarification on how code execution happens

backgroundColor=['red','green','blue','orange'][Math.floor(Math.random()*4)]

Can someone explain how this code executes in the Javascript syntax, I understand it generates a random number but the result is the color that is in the index value generated in the second square bracket.

In C++ array[][] is used to generate a two-dimensional array but here it is generating the index to be used in the first square bracket pair.

Hope to get clarification on how code execution happens

• javascript
• arrays

• 2 ['red','green','blue','orange'] defines an array, ['red','green','blue','orange'][x] gets the item with the index x from the array. The x can be an expression, so ['red','green','blue','orange'][Math.floor(Math.random()*4)] gets the item with an random index from 0 to 3 from the array. – Hao Wu Commented Oct 8, 2020 at 8:40

4 Answers 4

It's easier if you break this down into individual parts

const colors = ['red','green','blue','orange']

const randomIndex = Math.floor(Math.random()*4) 
  // colors.length would be even better than "4"

// Pick a random index from "colors"
backgroundColor = colors[randomIndex]

// or, expanding "randomIndex"
backgroundColor = colors[Math.floor(Math.random()*4)]

// or, expanding "colors"
backgroundColor = ['red','green','blue','orange'][Math.floor(Math.random()*4)]

What you are doing with Math.floor(Math.random()*4) is providing index up to 4 elements for the array.

I suggest you use Quokka plugin for Visual Studio Code and see how things work.

See the picture below from Quokka.

Basically you have three parts:

backgroundColor = ['red', 'green', 'blue', 'orange'][Math.floor(Math.random() * 4)];
^^^^^^^^^^^^^^^^^
                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
                                                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

1. LHS assignment
2. an array expression
3. an property accessor in bracket notation with another expression.

The problem arises if you separate the property accessor from the line and move it to the next line or use another array expression without separating the expression to prevent another array as property accessor, like

x = [42, 15]
[1, 2, 3].forEach(x => console.log(x))

More to read: What are the rules for JavaScript's automatic semicolon insertion (ASI)?

The first bracket is the array.

The second bracket is the index you want to access.

Math.floor(Math.random()*4) resolves to an number somewhere between 0 and 4

console.log(Math.floor(Math.random()*4))

Multidimensional arrays can be done with nested arrays like:

let arr = [[1,2,3], [3,4,5], [5,6,7]]

A funny thing is that you can access object properties with the same syntax

let obj = {
  1: "hy"
}

console.log(obj[1])

At the first place if you see obj[1] you would think its an array, but its actually an object. Need to watch out for things like this