Creating Javascript object with dot notation

Question

I am learning Javascript and have a question regarding objects. In a lesson I saw an object created like this:

var friends = {};

friends.john = {
    firstName: "John",
    lastName : "Doe",
    id       : 5566,
    fullName : function() {
       return this.firstName + " " + this.lastName;
    }
};

Is john in friends.john a key who's value is what's in the curly braces? I do not understand when an object is first created with the dot notation vs. just putting everything into the curly braces to begin with.

Try console.log for debugging, you'll see the structure of your object. — elclanrs
– elclanrs, Commented Jan 23, 2015 at 21:17
I agree with @elclanrs statement; the best way to learn is working through your problem and resolving an answer by yourself. — Anthony Forloney
– Anthony Forloney, Commented Jan 23, 2015 at 21:18
You very well can add john property within definition of friends, the magic in friends.john = {...} is, that you can add properties to an object at any time after it has been defined. — Teemu
– Teemu, Commented Jan 23, 2015 at 21:21
friends.john (or friends['john']) is how you access/set a key after the object has been declared. Setting it is the same as friends = {john: {}}. — gen_Eric
– gen_Eric, Commented Jan 23, 2015 at 21:21

JLRishe · Accepted Answer · 2015-01-23 21:21:09Z

3

Yes, the code you have there is exactly equivalent to:

var friends = {
    john: {
        firstName: "John",
        lastName : "Doe",
        id       : 5566,
        fullName : function() {
           return this.firstName + " " + this.lastName;
        }
    }
};

There are a wide variety of ways to do the same thing in different ways in JavaScript. In this case, you can use either syntax, but you can only use the curly brace syntax to create a new object. To assign a property to an existing object, you would typically use the assignment syntax:

friends.john = ...;

answered Jan 23, 2015 at 21:21

JLRishe

102k19 gold badges138 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gen_Eric · Accepted Answer · 2015-01-23 21:21:45Z

1

john is a property of friends with the value of the object containing all of john's information. The dot notation is usually for use after the fact or in reference. You could have easily avoided it with this:

var friends = {
 john: {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
   return this.firstName + " " + this.lastName;
  }
 }
};

edited Jan 23, 2015 at 21:21

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

answered Jan 23, 2015 at 21:20

Travis J

82.5k43 gold badges213 silver badges280 bronze badges

2 Comments

gen_Eric Over a year ago

I fixed a syntax error for you. You need the : inside the object, not = :-)

Travis J Over a year ago

@RocketHazmat - Yes thank you, that was a slight copy paste error :P

Oriol · Accepted Answer · 2015-01-23 21:23:22Z

0

Your code is equivalent to

var friends = {
    john: {
        firstName: "John",
        lastName : "Doe",
        id       : 5566,
        fullName : function() {
            return this.firstName + " " + this.lastName;
        }
    }
};

and also to

var friends = new Object();
friends.john = new Object();
friends.john.firstName = "John";
friends.john.lastName  = "Doe";
friends.john.id        = 5566;
friends.john.fullName  = function() {
    return this.firstName + " " + this.lastName;
};

answered Jan 23, 2015 at 21:23

Oriol

291k71 gold badges459 silver badges535 bronze badges

Comments

Priyank · Accepted Answer · 2015-01-23 21:30:19Z

0

code1:
var friends = {};
friends.john = {
firstName: "John",
lastName : "Doe",
id       : 5566,
fullName : function() {
   return this.firstName + " " + this.lastName;
}
};

here code1 is equivalent to code2:

 code2
var friends = {
john: {
    firstName: "John",
    lastName : "Doe",
    id       : 5566,
    fullName : function() {
       return this.firstName + " " + this.lastName;
    }
}
};

so if you run below statement both give the same result i.e. "John Doe"

alert(friends.john.fullName());

Note: dot notation is used to access object property.in your case friends is a object where John is a property of friends and the things in a curly braces is John value.

answered Jan 23, 2015 at 21:30

Priyank

3,8884 gold badges33 silver badges50 bronze badges

1 Comment

Priyank Over a year ago

@Andy may this help you :)

Collectives™ on Stack Overflow

Creating Javascript object with dot notation

4 Answers 4

Comments

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related