How to use a variable for a key in a JavaScript object literal?

by

{ thetop : 10 } is a valid object literal. The code will create an object with a property named thetop that has a value of 10. Both the following are the same:

obj = { thetop : 10 };
obj = { "thetop" : 10 };

In ES5 and earlier, you cannot use a variable as a property name inside an object literal. Your only option is to do the following:

var thetop = "top";

// create the object literal
var aniArgs = {};

// Assign the variable property name with a value of 10
aniArgs[thetop] = 10; 

// Pass the resulting object to the animate method
<something>.stop().animate(
    aniArgs, 10  
);

ES6 defines ComputedPropertyName as part of the grammar for object literals, which allows you to write the code like this:

var thetop = "top",
    obj = { [thetop]: 10 };

console.log(obj.top); // -> 10

You can use this new syntax in the latest versions of each mainstream browser.

More Related Contents:

  1. How can I determine if a variable is ‘undefined’ or ‘null’?
  2. Remove array element based on object property
  3. Adding/removing items from a JavaScript object with jQuery
  4. Modifying CSS class property values on the fly with JavaScript / jQuery
  5. Variables set during $.getJSON function only accessible within function
  6. create object using variables for property name [duplicate]
  7. how to access object property using variable [duplicate]
  8. JavaScript Dynamic Variable Names
  9. When/why to prefix variables with “$” when using jQuery? [duplicate]
  10. jQuery ajax return value [duplicate]
  11. JSON to string variable dump
  12. JavaScript object literal length === undefined?
  13. Fade animation while scrolling
  14. Difference between .ajaxSubmit() vs .submit()
  15. Preloading images with jQuery
  16. Prevent execution of parent event handler
  17. Removing an item from a select box
  18. Add/remove class with jquery based on vertical scroll?
  19. How to get JQuery.trigger(‘click’); to initiate a mouse click
  20. jQuery .find() doesn’t return data in IE but does in Firefox and Chrome
  21. How can I remove the “No file chosen” tooltip from a file input in Chrome?
  22. window.resize event firing in Internet Explorer
  23. Callback function example
  24. How to reach the element itself inside jQuery’s `val`?
  25. adding to window.onload event?
  26. How to chain ajax requests?
  27. sort JSON by date
  28. Use Django template tags in jQuery/Javascript?
  29. fadeOut() and slideUp() at the same time?
  30. How to check if the user is online using javascript or any library?

Leave a Comment