CODEWITHSUNDEEP
javascript
Lorraine Bernard
Lorraine Bernard

Reputation: 13400

Accessing JavaScript objects

Can someone please explain this bit of piece of code? Thanks.

 alert({foo:"test foo", bar:"test bar"}.bar); // "test bar"

Upvotes: 2

Views: 451

Answers (9)

abuduba
abuduba

Reputation: 5042

Object literal in javascript is some kind of associative array.

Are pairs:

  var a  = { 
     key1: 'value1',
     key2: 'value2',
     "key #3": 'value3'
    }

Can contain any kind of data in values, Key should be a strings if they contain special characters, spaces or reserved words.

Access to values of a can be by dot ( as in OOP):

 a.key1 == 'value1';

But if key contain special characters described above you can access to value means a like as associative array;

a["key #3"] == 'value3'

However, 

a["key1"] ;

also is correct

Every declaration/assignment in javascript returns the object itself or assign respectively, so:

var a;
(a={ 
    key1: 'value1',
    key2: 'value2',
    "key #3": 'value3',
    key4: function(){
       //`this` refers to `a` variable - if function will be called directly from `a`  => a.key4() ; 
      alert(this["key #3");}
        }).key1  // gets 'value1'

or

({ key1:'value1' })['key1'];// gets 'value1' too

Upvotes: 1

Jakob
Jakob

Reputation: 24360

{foo:"test foo", bar:"test bar"}

This creates a new object with two properties, foo and bar. If you're used to Java or C# or C++ or a language like that, it's like saying

class FooAndBarObject {
  public string foo;
  public string bar;

  public FooAndBarObject(string foo, string bar) {
    this.foo = foo;
    this.bar = bar;
  }
}

new FooAndBarObject("test foo", "test bar");

So, then writing {foo:"test foo", bar:"test bar"}.bar returns the value of the bar property, which happens to be "test bar".

alert is a function that displays the value passed to it, so it will display test bar to the user.

Upvotes: 0

Matthew Abbott
Matthew Abbott

Reputation: 61589

The syntax {foo:"test foo", bar:"test bar"} is called Javascript Object Notation (JSON), and it allows a javascript object to be constructed using with a much terser syntax then:

var obj = function() { this.foo = "test foo"; this.bar = "test bar"; };
var instance = new obj();

So in the above example, you are creating a javascript object with two fields, and then immediately accessing the bar field.

Upvotes: 0

yan_kos
yan_kos

Reputation: 36

JS creates the object and immediately displays the property bar:) may be helpful: http://json.org/

Upvotes: 0

lonesomeday
lonesomeday

Reputation: 237817

You have two bits of code there:

{foo:"test foo", bar:"test bar"}

This is an object literal: it defines an object with two properties foo and bar, each of which has a string as its value.

.bar

This is the member operator: it gets a member from the object whose name is bar.

I can't imagine a use-case for this style of coding...

Upvotes: 0

bkzland
bkzland

Reputation: 569

In your example the function alert is called with an object as it's parameter. The parameter constructs an object on the fly with two properties, foo and bar, then accesses the bar property, which returns a string for the alert function to display.

Upvotes: 0

yatskevich
yatskevich

Reputation: 2093

  1. {foo:"test foo", bar:"test bar"} creates a new object with two fields: foo and bar
  2. alert(obj.bar) outputs a value of bar field of this newly created object

Upvotes: 1

Royi Namir
Royi Namir

Reputation: 148514

you have an object

with 2 properties : foo , bar.

foo value is "test foo"

bar value is "test bar"

but show me the value of bar.

{foo:"test foo", bar:"test bar"}.bar

Upvotes: 0

TJHeuvel
TJHeuvel

Reputation: 12608

In Javascript the {} notation defines an object, you just get the bar property in this case. It is similar to a class in any OO language; and similar to the following code:

var obj = {
 foo : 'Test Foo',
 bar : 'test bar' 
};

alert( obj.bar ); //Show the 'bar' property of obj.

The declaration just returns itself obviously, so the syntax you showed is legal. However it is fairly useless, as you cant do anything with the object you just defined anymore.

Upvotes: 0

Related Questions