Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

JavaScript Arrays: The Difference Between [] and { }

By  on  

Using Moo 1.2 has taught me a lot about JavaScript. Of course, that means I've made a lot of mistakes but that seems to be the best way for me to learn. While browsing the Moo source, I'd always wondered the difference between arrays using brackets ([]) and braces ({}). Here's what I learned.

Use brackets for an array of simple values.

//examples
var answers = ['yes','no','maybe'];
var names = ['David','Kristina','Charlie','Angela'];

Use braces for key => value arrays and objects/properties.

//example - random array
var programmer = { 'name':'David Walsh', 'url':'https://davidwalsh.name', 'girl':'Kristina'}

//example - used for an object's properties
var Element.implement({
getText: function(){
return this.get('text');
}
});

This is similar to PHP's array system.

$arr = array('name'=>'David','position'=>'Programmer');

Have anything to add? Please share!

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    Welcome to My New Office

    My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...

  • By
    Being a Dev Dad

    I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...

Incredible Demos

  • By
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

  • By
    Geolocation API

    One interesting aspect of web development is geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can...

Discussion

  1. Tim Novinger

    This is interesting. So if you use []’s in a key=>value array it just won’t work or it’s simply improper usage?

    I must admit, I’ve wondered this myself with the MOO as they seem to have pretty creative looking code conventions (that really make a lot of sense).

  2. david

    @Tim: That’s what I get from it. Please let me know if I’m wrong.

  3. Rasmus

    I feel like you’re missing one of the finer points in this bracket/brace post; braces define Objects – not Arrays!

    The following are essentially the same:

    var myArray = [];
var myArray = new Array();

    … as are:

    var myObject = {};
var myObject = new Object();

    Javascript is by no means perfect – so you’ll have to know the pitfalls, like erroneously mixing keys and indexes in an Array (like you can do in PHP – bad).
    As javascript doesn’t have associative arrays Objects are the closest thing.

    • Kyle

      Ahh!! I am so enlightened by that! Thank you! That makes so much sense now! Too many exclamations!! I need to stop but can’t!

      On a serious note, that does clarify a few questions I had.

  4. Mantasha Zaara

    Thanks David

    U solved my problem. I am first time using Javascript in my website and i was getting one problem with one line. 

     mycarousel_itemList[counter]=  
[{url: "ID,'thumbnail', true); ?>",link: "",title: ""}]
;

    and u solved it … thanks again…regards

  5. RD

    Thanks Rasmus. This is what Exactly i was looking for.

  6. Richard

    I’m not new to JavaScript but trying to move forward, what seems to be a mistery to me is the use of punctuation ( ‘.,’:([{‘ )???. and the rules they surely must adhere too. Not one tutorial (and I have explored a lot) explains what these things actually mean and where they are to be used. It almost seems arbitrary, like learning the bizarre ‘illogical’ rules of a spoken language. Can yo help?

    Regards,
    Richard.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!