object appened to an object

@Sup3rkirbyOct 28.2014 — #I'm curious as to where these examples are coming from, as this almost looks like a bunch of needless jumping through hoops and back all to demonstrate something relatively simple...

We'll start from the top, [B]foo()[/B] is a function. You can call it by putting [B]foo();[/B] in your code, something you probably already know.

Next, it creates an object called '[B][I]obj2[/I][/B]'. This object has 2 keys, each with a value. The first key is called '[B][I]a[/I][/B]' and its value is [I]42[/I] (simple enough). The second key is called '[B][I]foo[/I][/B]' and its value is [I]foo[/I], which is actually a function. So now you can call [B]foo()[/B] from the [B]obj2[/B] object (and since foo() logs this.a, it will be looking for a variable named a inside of its constructor object). As a little side-note, when you want to call a function you would use [B]foo();[/B] but when you want to set a variable equal to a function you would use [B]foo[/B] instead.

[CODE]
 foo(); // Runs a function called foo
 var a = foo; // Sets the variable a equal to the function foo
 a(); // Runs the foo function, but as a new instance
 [/CODE]

Moving on, this example finally creates an object called obj1, similar to object 2. It sets a key named 'a' and then it also has a key named 'obj2' which it sets equal to an object (the object that was created earlier in the code). I think it might help to see the structure of the objects as a whole at this point:

[CODE]
 var obj1 = {
 a: 2,
 obj2: {
 a: 42,
 foo: foo // Remember this value is a function
 }
 };
 [/CODE]

This is a better visual representation of what obj1 is equal to. There are a lot of different ways to get values from obj1, so below I'll try to list out some examples that might help you understand the final line of your example. Below are two examples of pulling values from your object. It's just two different ways to do the same thing:

[CODE]
 console.log(obj1.a); // 2
 console.log(obj1.obj2); // { a: 42, foo: foo(){ console.log(this.a); } }
 console.log(obj1.obj2.a); // 42
 obj1.obj2.foo(); // Doesn't need to be logged to console since this is a function executing
 
 
 
 console.log(obj1.['a']); // 2
 console.log(obj1.['obj2']); // { a: 42, foo: foo(){ console.log(this.a); } }
 console.log(obj1.['obj2']['a']); // 42
 obj1.['obj2'].foo(); // 42
 [/CODE]

@gautamz07authorNov 03.2014 — #absolutly fantastic !!! Thank you soooo much for your FANTA-BU-LOUS Example !!!

though i did't quite get the 2nd meathod of accessing the variables :

console.log(obj1.['a']); // 2

console.log(obj1.['obj2']); // { a: 42, foo: foo(){ console.log(this.a); } }

console.log(obj1.['obj2']['a']); // 42

obj1.['obj2'].foo(); // 42

what is that method really called ??

so basically coming back to my original example :

function foo() {

console.log( this.a );

}

var obj2 = {

a: 42,

foo: foo

};

var obj1 = {

a: 2,

obj2: obj2 // What on earth would happen here , totally eludes me

};

obj1.obj2.foo(); // 42

in the above example when i say

obj2: obj2

what it actually means is

obj2 = {

a: 42,

foo: foo

};

??

Once again Thanks , Your examples were really really , seriously Helpful .

BTW , got the examples from 'You Don't know JS by Kyle simpson' .

object appened to an object

2 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

object appened to an object

2 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #JavaScript _↴