How to access array index via bracket notation because only dot notation makes sense apparently but the lesson says both are permitted!

[kurian8th]

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**

const myPlants = [
{
  type: "flowers",
  list: [
    "rose",
    "tulip",
    "dandelion"
  ]
},
{
  type: "trees",
  list: [
    "fir",
    "pine",
    "birch"
  ]
}
];

const secondTree = myPlants[1][list[1]];

  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.3 Safari/605.1.15

Challenge: Accessing Nested Arrays

Link to the challenge:

freeCodeCamp.org

[kevinSmith]

How to access array index via bracket notation because only dot notation makes sense apparently but the lesson says both are permitted!

OK, why the exclamation point? Calm down.

They do two different things. Arrays are always accessed with bracket notation. Objects can usually be accessed with dot notation. (Sometimes we must use bracket notation for objects, but not in this case - use dot notation.)

const friends = {
  Alice: {
    age: 32,
    location: 'Paris',
    likes: [
      'Star Wars',
      'Thai Food',
      'Jazz',
    ],
  },
  Bob: {
    age: 35,
    location: 'Chicago',
    likes: [
      'Travel',
      'Breakfast Cereal',
      'Star Trek',
    ],
  },
}

console.log(friends)
// {
//   "Alice": {
//     "age": 32,
//     "location": "Paris",
//     "likes": [
//       "Star Wars",
//       "Thai Food",
//       "Jazz"
//     ]
//   },
//   "Bob": {
//     "age": 35,
//     "location": "Chicago",
//     "likes": [
//       "Travel",
//       "Breakfast Cereal",
//       "Star Trek"
//     ]
//   }
// }

So, friends is an object. If we want to look at the “Alice” property, we will use dot notation, because we are accessing an object property:

console.log(friends.Alice)
// {
//   "age": 32,
//   "location": "Paris",
//   "likes": [
//     "Star Wars",
//     "Thai Food",
//     "Jazz"
//   ]
// }

So, that is an object, the record of Alice. If we want to see her “likes”, that is an array, but the array is stored on a property of the object. We are accessing the entire array as a property on that object, so again, dot notation:

console.log(friends.Alice.likes)
// [
//   "Star Wars",
//   "Thai Food",
//   "Jazz"
// ]

Now, friends.Alice.likes is an array. If we want to get inside that array, we must use bracket notation. If we want to see an element of that array:

console.log(friends.Alice.likes[0])
// Star Wars

Yes, it can get a little confusing, when you start putting objects of objects of arrays of objects with arrays inside them… But it gets better with practice.

[snowmonkey]

To expand on this just a little, let’s look again at that friends object. As with any object, we can access those values by property name, such as friends.Alice or friends.Bob.age.

But each of those property names? They’re just a string. There’s nothing magical about them, we can simply handle them as strings, if we like. Alice is a string, "Alice". friends.Alice is exactly the same as friends["Alice"], and friends.Bob.age is exactly the same as friends["Bob"]["age"].

The power of brackets is that we can use strings in there… So we don’t need to know the actual property name, we can store it into a variable and use that. So we get the flexibility to do things like

let userName = "Bob";

// And maybe much later in our code...
alert ("Hi, "+userName+" from "+friends[userName].location+"!");

Javascript evaluates that userName first, and reads that alert as friends["Bob"].location, giving us “Chicago”.