2
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

Phil
  • 128,310
  • 20
  • 201
  • 202
Harsh Bhudolia
  • 65
  • 5
  • 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 Oct 08 '20 at 08:40

4 Answers4

7

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)]
Phil
  • 128,310
  • 20
  • 201
  • 202
2

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

Ifaruki
  • 10,439
  • 2
  • 7
  • 24
  • I understand what it is doing what I am unable to get my head around is how it is happening. Is it a special case of javascript where we can use the second pair of bracket to get access to first array index? What this notation is called? Is there an online source where I can know about this more. – Harsh Bhudolia Oct 08 '20 at 08:44
2

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.

enter image description here

Bozhinovski
  • 1,654
  • 1
  • 16
  • 23
2

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)?

Nina Scholz
  • 323,592
  • 20
  • 270
  • 324