Access JavaScript Object Variable Properties

By  on  

Not all JavaScript objects are as easy as MyObject.property. Sometimes you may want to access a property whose key is stored in a variable. Luckily accessing these properties is very easy.

Javascript Object Property Accessing Example

/* setting */
var myObject = {
	left : 30,
	top: 20
};
/* basic access */
var left = myObject.left; //OR
var left = myObject['left'];

/* accessing it or variables */
var mode = 'vertical';
var value = myObject[mode == 'horizontal' ? 'left' : 'top'];

You may use array-style syntax to access an object's properties. The string within brackets returns the properties.

Recent Features

  • By
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

  • By
    How to Create a RetroPie on Raspberry Pi – Graphical Guide

    Today we get to play amazing games on our super powered game consoles, PCs, VR headsets, and even mobile devices.  While I enjoy playing new games these days, I do long for the retro gaming systems I had when I was a kid: the original Nintendo...

Incredible Demos

  • By
    Fix Anchor URLs Using MooTools 1.2

    The administrative control panel I build for my customers features FCKEditor, a powerful WYSIWYG editor that allows the customer to add links, bold text, create ordered lists, and so on. I provide training and documentation to the customers but many times they simply forget to...

  • By
    Create a 3D Panorama Image with A-Frame

    In the five years I've been at Mozilla I've seen some awesome projects.  Some of them very popular, some of them very niche, but none of them has inspired me the way the MozVR team's work with WebVR and A-Frame project have. A-Frame is a community project...

Discussion

  1. I’m a big fan of myObject[key] as its close to the PHP array syntax. Just personal preference really and it gives great flexibility and easy to test for.

  2. @Colin – I just love how object property keys and array indexes are treated as equal in Javascript. The closest to this coolness that PHP comes is in pseudo-property keys ($obj->$var_key)

  3. dev

    never knew this method, very useful.

  4. @Chris – PHP’s ArrayObject class allows you to access properties using array syntax.

  5. @keith – huh…never knew that. Thanks! :D

  6. It’s a good thing to point out that you can almost always avoid eval() by use of myObject[‘key’] reference. for example:

    var myObject = {};
    
    $H({
         'a': 1,
         'b': 2,
         'c': 3
    }).each(function(v, k) {
         myObject[k] = v;
    });
    

    A lot of people think you have to do something like:

    var myObject = {};
    
    $H({
         'a': 1,
         'b': 2,
         'c': 3
    }).each(function(v, k) {
         eval('myObject.' + k + ' = ' + v);
    });
    

    Avoid eval! Eval is evil.

  7. @Timothy: While it is preferable to avoid eval in code that need not be written in that form, as you show, I would like to contest that eval is far from evil.

    It’s a basic language construct upon which the entire functional programming paradigm can be built in languages that do not support it natively. Sometimes a problem is better expressed in said paradigm, but the language prevents you from properly exploiting it’s capabilities. This is one of the many ways eval *can* be used for the better of your programming speed, debug-ability and general style of programming.

    So please, next time you wish to share your opinion on eval, try to think of the grand picture this language construct fits in, and don’t spread lies about otherwise finely crafted implementations thereof.

  8. Thank you! I was stumped but this got me back on track.

  9. Ik

    Thank you soooo much, didn’t know this was possible. Spent countless hours trying to refactor my object to make calls easier, wish someone told me about this earlier lol.

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