Javascript object creation on the fly

Question

I'm sure I've seen some examples of this in jquery. But for me, the following code does not work. The firebug debugger tells me that: 'Location is undefined'. Could you tell me if this is possible?

function ResolveGeoCode() {
    var Location;
    Location.Ad1 = "Hello ";
    Location.Ad2 = "World";

    return Location;
}

var loc = ResolveGeoCode();
var String1 = loc.Ad1; //This contains "Hello "?
var String2 = loc.Ad2; //This contains "World"?

Could a name be given to this type of feature I'm looking for?

Thanks.

ChaosPandion · Accepted Answer · 2010-01-06 21:14:17Z

This is what's happening:

function ResolveGeoCode() {
    // Location is declared, but its value is `undefined`, not `object`
    var Location;
    alert(typeof Location); // <- proof pudding

    // Failing here because you're trying to add a 
    // property to an `undefined` value

    Location.Ad1 = "Hello "; 
    Location.Ad2 = "World";

    return Location;
}

Fix it by declaring Location as an empty object literal before trying to add properties to it:

function ResolveGeoCode() {
    var Location = {};
    alert(typeof Location); // now it's an object

    // Programmatically add properties
    Location.Ad1 = "Hello "; 
    Location.Ad2 = "World";

    return Location;
}

If you know the properties and their corresponding values ahead of time, you can use a more inline approach:

function ResolveGeoCode() {
    var Location = {
        Ad1: "Hello ",
        Ad2: "World"
    };

    // ...further manipulations of Location here... 

    return Location;
}

Read here for more on object literals.

ChaosPandion · Accepted Answer · 2010-01-06 20:52:05Z

6

This is the syntax for inline object creation (In this case returned from a function.).

function ResolveGeoCode() {
    return {
        Ad1: "Hello ",
        Ad2: "World"
    };
}

answered Jan 6, 2010 at 20:52

ChaosPandion

78.4k18 gold badges122 silver badges159 bronze badges

Comments

Mic · Accepted Answer · 2010-01-06 20:59:39Z

4

In your code try to change:

var Location;

in

var Location = {};

answered Jan 6, 2010 at 20:59

Mic

25.2k9 gold badges62 silver badges71 bronze badges

Comments

James Maroney · Accepted Answer · 2010-01-06 20:52:48Z

2

var ResolveGeoCode = {
    Ad1 : "Hello",
    Ad2 : "World"
}

var String1 = ResolveGeoCode.Ad1; //This contains "Hello "?
var String2 = ResolveGeoCode.Ad2; //This contains "World"?

answered Jan 6, 2010 at 20:52

James Maroney

3,2563 gold badges27 silver badges28 bronze badges

Comments

Chuck Vose · Accepted Answer · 2010-01-06 20:58:19Z

0

What you're missing here is that {} are the markers for a dynamic object in ECMAScript. So when you see code like ChaosPandion's that's what's actually happening.

In your example you could pretty much change the word function to class and you're almost there to a full class.

answered Jan 6, 2010 at 20:58

Chuck Vose

4,60127 silver badges31 bronze badges

Comments

triniMahn · Accepted Answer · 2010-01-06 21:08:35Z

0

In the "ResolveGeoCode" function:

Do what Mic described above: Initialize the variable "Location" by using the empty object constructor, "{}".
Try adding members dynamically like this:

Location['Ad1'] = 'Hello';
Location['Ad2'] = 'World';

answered Jan 6, 2010 at 21:08

triniMahn

2781 gold badge4 silver badges16 bronze badges

1 Comment

Justin Johnson Over a year ago

While it works, IMO the bracket/array accessor notation is sloppy here. Dot/member accessor notation is preferable when the property's identifier doesn't have to be constructed.

Vijay · Accepted Answer · 2018-04-11 18:09:49Z

0

You can also do like a constructor

constructor{ 
Object.assign(this)
}
or You can eventually pass values 
 constructor(val){ 
 Object.assign(this, val)
 }

answered Apr 11, 2018 at 18:09

Vijay

1911 gold badge1 silver badge9 bronze badges

Collectives™ on Stack Overflow

Javascript object creation on the fly

7 Answers 7

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related