Search code examples
javascriptarraysconditional-operator

What is an array right after a variable called in JavaScript?

I'm curious about this line and have never seen this format with an array right after the variable:

pics[coinToss() === 'heads' ? 'kitty' : 'doggy'] to render pics.doggy or pics.kitty

Is there specific documentation about this format I can read more about?

import ReactDOM from 'react-dom';

function coinToss () {
  // Randomly return either 'heads' or 'tails'.
  return Math.random() < 0.5 ? 'heads' : 'tails';
}

const pics = {
  kitty: 'https://content.codecademy.com/courses/React/react_photo-kitty.jpg',
  doggy: 'https://content.codecademy.com/courses/React/react_photo-puppy.jpeg'
};

const img = <img src={pics[coinToss() === 'heads' ? 'kitty' : 'doggy']} />;

ReactDOM.render(
    img, 
    document.getElementById('app')
);
Solution

  • It's not an array, it's a property access - like when you access some array's elements with myArray[5] to get the 6th element (which is property 5 of the array), but it works the same for string properties of objects: pics['kitty'] is the same as pics.kitty.

    The name of the property accessed is whatever coinToss() == 'heads' ? 'kitty' : 'doggy' evaluates to (which uses ?: to yield either 'kitty' or 'doggy' depending on the result of coinToss()).

    Here it's functionally the same as coinToss() === 'heads' ? pics.kitty : pics.doggy.