FAQ: Objects - Nested Objects

In ES5 syntax, a method would be written the same as a property, but would normally use an anonymous function (unnamed). A named function such as you have would only be useful if the method was recursive.

ES6 syntax introduces methods as keyless properties…

method1 () {
    return this.prop;
method2 (arg) {
    this.prop = arg;
1 Like

I don’t understand the syntax here
why and when we use this { } inside an array ?

1 Like

An array is more like a kitchen drawer than a sock drawer. We can put anything in it. That’s why we say that arrays are heterogeneous.

The syntax is simply showing us a bunch of object literals inside an array. Best to look deeper into the data structures lesson.

1 Like

does any syntax like { } ( ) [ ] have some general rules to use ?
Like we see the situation and know which one to use without remembering the structure of the code

1 Like

Objects have their syntax, arrays have theirs. There is no data structure that uses parens () other than argument and parameter lists in functions and their call expressions. In Python () are tuples, but we don’t have those in JS.

There is nothing to remember. [] is an array, {} is an object. The two data structures have their own purpose and use cases. No magic or hidden secrets.

It is up to the designer to determine how the data will be structured. Don’t look for mystery where there is none. Code structure and data structure are two separate worlds, unrelated. How we structure our data does set the stage for how we will traverse and process it, but that’s where the connection ends.

1 Like

But sometime I see this { } syntax in other cases. For example
function( ) { }
$ { }

1 Like

In function syntax, {} represents a code block. Blocks are a different kind of object containing instruction code, not data. We use square brackets in code, too. They’re called subscripts.

a = [1, 2, 3, 4]  =>  a refers to an array

a[3]  =>  the subscript refers to the 4th element in the array

b = {
    one: 1,
    two: 2,
    three: 3,
    four: 4
}  =>  b refers to an object literal

b['four']  =>  the subscript refers to the value 4 associated with the key, 'four'.

const foo = function (args) {
    // code body (the block)

Every construct in JS has a code block. Functions, if statements, switch statements, for loops, while loops, etc. The technical difference between {} when it contains data and {} when it contains code is that the latter is a namespace that can contain variables and named objects such as functions.

Bottom line, find a way to separate code from data and don’t try to put them in the same box. Syntax is the first big hurdle in learning any new language. When we take big steps in order to hurry through lessons we miss big details and lines get blurred. Step back, go back and review the early lessons and slow your progress as long as this confusion exists. Address the confusion without trying to define things in your own words. Read, read, read. Practice the simple stuff until it hurts.

1 Like

It is hard for the brain to process such a big line and connection simultaneously, but I can try to explain what I ‘think’ is correct here, because mine worked:

Basically, the exercise asks you to add to the passengers’ property an array value. That array value must contain passenger details as its key-value pairs, which in turn get accessed in the third exercise using the variable named ‘firstPasssenger’ and through the index number 0.

Hope this helped you understand, because it sure took me a lot due to the fact that you don’t have to lose the line out of your head even for a second to get to this realisation! Not to mention, I am more of a linear thinker and this line is too long for me to remember, but I can somehow get the logic! :joy:

1 Like

It was a tricky exercise because you cannot let go of the thinking line even for a second making sense of this! Its like swimming underwater and you have to hold your breath, but using your brain! :joy:

1 Like

Im trying to complete the 2nd prompt.

passengers: [{name:'Emily','Jessica'}],

not seeing where my error is. please help.

Should each name be its own object?

{name: 'Emily'}, {name: 'Jessica'}

couldnt both names be in the same array?

1 Like

Yes, but as separate objects.

 [ {...}, {...} ]
1 Like

I figured out how to add properties to objects at once.

spaceship.passengers= {pass1: {name: ‘Francis Odima’,

age: 29, sex: ‘male’}, pass2: {name: ‘Sharon Odima’,

age: 30, sex: ‘female’}, pass3: {name: ‘Phelecia Odima’,

age: 27, sex: ‘female’}}

console.log(spaceship.passengers.pass1.name) gives me Francis Odima.
This is not what the exercise was asking but it’s a crucial technique to know how the properties nest.

1 Like
let spaceship = {
  passengers: [{name: 'Bill'}, {name: 'Debby'}],
//rest of code omitted

let firstPassenger = spaceship.passengers[0].name // = Bill
console.log(spaceship.passengers[0].name); // prints Bill
console.log(firstPassenger); //prints Bill

The above code runs without error in VS Code. It also runs here, outputs the same thing as indicated above, but throws this error: firstPassenger should be assigned to the value at the first index of the spaceship‘s passenger array.: expected ‘Bill’ to equal { name

the 0th element in the passengers array is an object with the property [name] and value ‘Bill’. I do not see my error and I cannot move on.

Are those colons present in the code?

Opps that was a bad idea. It was meant to stand for omitted code. I edited the original post.

1 Like

Did you try printing the whole object?

Printing object produces: (as expected)

{ passengers: [ { name: 'Bill' }, { name: 'Debby' } ],
  telescope: { yearBuilt: 2018, model: '91031-XLT', focalLength: 2032 },
   { captain: 
      { name: 'Sandra',
        degree: 'Computer Engineering',
        encourageTeam: [Function: encourageTeam],
        'favorite foods': [Object] } },
  engine: { model: 'Nimbus2000' },
   { computer: { terabytes: 100, monitors: 'HD' },
     'back-up': { battery: 'Lithium', terabytes: 50 } } }

Meant to say, spaceship.passengers[0]