creating arrays of objects in javascript

Question

I'm learning javascript coming from a .NET background. I have a question about how to deal with arrays of objects, creating and manipulating doesn't seem as easy/obvious as .NET.

Often in .NET code I use structs (c#) or structures (VB.NET) for managing simple value constructs, for example (in VB.NET):

    Public Structure WidgetsStruc
        Public Name As String 
        Public LocX As Integer
        Public LocY As Integer
    End Structure
    Private myWidgets As New WidgetsStruc
    myWidgets.LocX = 35
    myWidgets.LocY = 312
    myWidgets.Name = "compass"
    Messagebox(myWidgets.Name)              ' shows 'compass'
    ...

in javascript from the research I have done there isn't anything quite equivalent, although you can use an object and 'push' it onto an array like the below which works:

    var widget = new Object();
    var widgetTemplates = new Array();
    widgetTemplates.push(widget);
    widgetTemplates[0].name = "compass";
    widgetTemplates[0].LocX = 35;
    widgetTemplates[0].LocY = 312;
    alert(widgetTemplates[0].name);          // also shows 'compass'

Maybe I'm not used to working in a more loosely typed language but the JavaScript above doesn't seem optimal (eg. having to 'push' an object without a declared structure into the array and initializing the variables afterwards, plus 'pop' and 'slice' for removing).

Have I got this right? Is there a better or easier way of declaring & using arrays of objects? I also looked into JSON but not exactly sure how to use that for manipulating user defined objects in an array.

As a JavaScript n00b - thanks for any guidance!

Thanks - I sort of deduced this from research but wasn't sure it was optimal. — deandob
– deandob, Commented May 11, 2013 at 7:25

Tim Heap · Accepted Answer · 2013-05-11 07:13:02Z

13

You can use object and array literal notation:

var widgetTemplats = [
    {
        name: 'compass',
        LocX: 35,
        LocY: 312
    },
    {
        name: 'another',
        LocX: 52,
        LocY: 32
    }
]

For simple things like this, the lack of enforced structure is fairly normal. If you do want more enforced structure, or to attach behaviours to your objects, you should look in to classes in JavaScript:

var Widget = function(name, x, y) {
    this.name = name;
    this.LocX = x;
    this.LocY = y;
};

var widgets = [
    new Widget('compass', 35, 312),
    new Widget('another', 52, 32)
];

answered May 11, 2013 at 7:13

Tim Heap

1,7091 gold badge12 silver badges11 bronze badges

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

3 Comments

deandob Over a year ago

I think this might be what I'm after as it has more structure. I'll play with this some more. Thanks.

deandob Over a year ago

And I can use 'push' to expand the array with new objects.

Dave Voyles Over a year ago

Great example! Love that you provided two ways to do it.

Collectives™ on Stack Overflow

creating arrays of objects in javascript

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related