Nested Objects: Why do I see objects declared differently than what was taught?

Get Help
#1

https://www.codecademy.com/courses/introduction-to-javascript/lessons/objects/exercises/nested-objects

let spaceship = {
  passengers: [
    {name: 'Jada'},
    {name1: 'Jack'}
  ],
  telescope: {
    yearBuilt: 2018,
    model: "91031-XLT",
    focalLength: 2032 
  },
  crew: {
    captain: { 
      name: 'Sandra', 
      degree: 'Computer Engineering', 
      encourageTeam() { console.log('We got this!') },
     'favorite foods': ['cookies', 'cakes', 'candy', 'spinach'] }
  },
  engine: {
    model: "Nimbus2000"
  },
  nanoelectronics: {
    computer: {
      terabytes: 100,
      monitors: "HD"
    },
    'back-up': {
      battery: "Lithium",
      terabytes: 50
    }
  }
};

Usually an object is made by doing let obj = {}; and key:value pairs defined inside the object is made by doing key:value, so then why do I see objects inside of spaceship being defined as obj: {} instead of obj = {}?
Also, step 2 requires us to make passengers an array with objects inside of it, and the solution is:

passengers: [
    {name: 'Jada'},
    {name1: 'Jack'}
  ]

but aren’t objects declared like this: obj = {}, so shouldn’t it be like this instead:

passengers = [
    {name: 'Jada'},
    {name1: 'Jack'}
  ]

Please help!

#2

Hey! That’s because passengers is the key and the properties nested inside {} are the values!

1 Like
#3

You should try playing around with a text editor to see what error messages you get if you change things up.

For example

let spaceship =
{
passengers = [
    {name: 'Jada'},
    {name1: 'Jack'}
  ]
}
//SyntaxError: Invalid shorthand property initializer

These errors are great for getting an idea of how the compiler is interpreting your code.

Additionally, remember that that line is already within a bracket, so that’s why it’s going to be treated differently.

If you cut out all the other code it runs well! But the scope and context is crucial here.

let passengers = [
    {name: 'Jada'},
    {name1: 'Jack'}
  ]
//compiles fine! no errors

Bonus material: you can’t do this out of context either

let passengers: [
    {name: 'Jada'},
    {name1: 'Jack'}
  ]

//SyntaxError: Unexpected token ':'
1 Like
#4

Oh that makes so much sense! I was so lost…

#5

But, if they are just values to a key, why do they need curly brackets?

#6

[
{name: ‘Jada’},
{name1: ‘Jack’}
]

This one is an array of key: value pairs! If they didn’t have curly brackets, I believe they wouldn’t be individual key:value pairs, but the array wouldn’t be able to hold it.

1 Like
#8

Hi,

The answer as to why is that it’s the syntax of objects. Objects are variables that can house properties with different value assignments.

It’s easy to abstract it with real life examples you can think of. Like let your object = orange, what kind of properties define this orange to differentiate it from other fruits?

Here’s a link to documentation https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object#Examples
The definitions laid out are great, let us know if you have more questions though!!

2 Likes
#9

The elephant in the room here is,

  [
     {name: 'Jada'},
     {name1: 'Jack'}
  ]

For access reasons each object should have the same property names.

spaceship.passengers[0].name  =>  Jada
spaceship.passengers[1].name  =>  undefined
1 Like
#10

So, curly brackets are needed because passenger, even though it’s a key, is acting like a mini object inside of spaceship? Or is it just because a key can’t hold multiple values without curly brackets? And you said it’s object syntax, but key: value pairs aren’t objects though.

#11

It’s more like, spaceship =(is an object formed by) {passengers: (there’s a list of passengers! unnamed list)[(first one, unnamed object){name: ‘Jada’}, (second one, unnamed object){name: ‘Jack’}]}

I believe this should be correct. @toastedpitabread @mtf Could we name the objects?
[
Jada = {name: ‘Jada’},
Jack = {name: ‘Jack’}
]

My bad if I’m suggesting something awful :flushed:

1 Like
#12

Yes, but not as formal assignments. Rather they should be declared as key:value pair in an outer object.

passengers: {
    jack: {name: 'Jack', rank: 'Captain'},
    jada: {name: 'Jada', rank: 'First Officer'}
}

Off course that means using slightly different access logic

#14 
passengers: {
    jack: {name: 'Jack', rank: 'Captain'},
    jada: {name: 'Jada', rank: 'First Officer'}
}

How would you access this?

#15 
passengers.jack.rank  =>  Captain

or

passengers[key].name

in a loop with key as the variable.

Before playing around with this code, be sure to follow all the instructions and complete the module. Then go to town with experimentation. Remember to keep a backup of your code that passes.

2 Likes
#16

My bad if I’m suggesting something awful

No need to feel bad, you’re just helping out! :beers:

#17

Before playing around with this code, be sure to follow all the instructions and complete the module. Then go to town with experimentation. Remember to keep a backup of your code that passes.

@h1lo I second this statement. There’s nothing like tinkering around with the console to figure out how things bend and break. Developing these basics to a strong level will help sharpen your tools for more advanced subjects.

1 Like
#20

Hi, sorry for bothering you, but after researching and experimenting, all I’ve seen is that they are nested OBJECTS, and not keys with unnamed objects as their value. For example, if you look at this excerpt from https://www.sitepoint.com/back-to-basics-javascript-object-syntax/ :

Properties of nested objects can be accessed by chaining dot and/or bracket references together. For example, the following object contains a nested object named baz, which contains another object named foo, which has a property named bar that holds the value five.

var object = {
  baz: {
    foo: {
      bar: 5
    }
  }
};

So according to this, they are NOT keys, but they still use key: value syntax? I’m pretty sure this is a simple concept but I really just can’t grasp it.
@mtf @lucasvinzon

#21

An array can contain other arrays, or anonymous objects. They are not really anonymous though since they can be referenced by their index. We do not need to give them any identifier.

[{}, {}, {}]
#22

Ok, I see if you’re using arrays to hold anonymous objects, but what about the other nested objects or keys inside of spaceship, like:

crew: {
    captain: { 
      name: 'Sandra', 
      degree: 'Computer Engineering', 
      encourageTeam() { console.log('We got this!') },
     'favorite foods': ['cookies', 'cakes', 'candy', 'spinach'] }
  },

or

  telescope: {
    yearBuilt: 2018,
    model: "91031-XLT",
    focalLength: 2032 
  },

Are they just objects with key: value syntax or keys with key: value pairs as their values?

#23 
  telescope: {
    yearBuilt: 2018,
    model: "91031-XLT",
    focalLength: 2032 
  },

telescope: {}
    key   value

{
    yearBuilt: 2018,
        key    value
},
#24

Uh, I’m not really sure what you’re trying to say. Could you explain?