457

I want to add a new property to 'myObj', name it 'string1' and give it a value of 'string2', but when I do it it returns 'undefined:

var myObj = new Object;
var a = 'string1';
var b = 'string2';
myObj.a = b;

alert(myObj.string1); //Returns 'undefined'
alert(myObj.a); //Returns 'string2'

In other words: How do I create an object property and give it the name stored in the variable, but not the name of the variable itself?

2
  • 2
    @daniella The object property is absolutely plain javascript. That it is used in a jQuery example is irrelevant. Commented Mar 17, 2017 at 23:15
  • 1
    For the record, never use new Object; Use an object literal instead: var myObj = {} Commented Jun 22, 2019 at 6:17

9 Answers 9

580

ES6 introduces computed property names, which allow you to do

var myObj = {[a]: b};
Sign up to request clarification or add additional context in comments.

9 Comments

Works with Babel though.
For ones like myself who develop using Node.js and need this for backend only, thus not worried about browser implementations, this was VERY useful. Should have more upvotes!
This actually looks like the only way to create an anonymous object with a variable as the key, very useful when you just need to push this onto an array.
Which browsers does this currently support?
|
575

There's the dot notation and the bracket notation

myObj[a] = b;

5 Comments

They're not really "equivalent"; myObj.a = b means something different to myObj[a] = b (unless a == 'a') but whatever... this is what you want.
What I meant is that they're equivalent ways to set a property. Obviously they behave differently (hence the purpose of posting this answer) - but they have the same result.
philfreo: except that they don't have the same result, which is the basis for this question.
I was just saying there are two ways to set an object, one for when the key is hard coded and one when it's variable. I meant the outcome of the object is equivalent regardless if you use myObj['foo'] = 'bar' or myObj.foo = 'bar'
Somehow this method gave me an array [a:b] instead of {a:b}
88

Dot notation and the properties are equivalent. So you would accomplish like so:

// const myObj = new Object();
const myObj = {};
const a = 'string1';
myObj[a] = 'whatever';
alert(myObj.string1);

(alerts "whatever")

Comments

11

Ecu, if you do myObj.a, then it looks for the property named a of myObj. If you do myObj[a] =b then it looks for the a.valueOf() property of myObj.

Comments

8

Oneliner:

obj = (function(attr, val){ var a = {}; a[attr]=val; return a; })('hash', 5);

Or:

attr = 'hash';
val = 5;
var obj = (obj={}, obj[attr]=val, obj);

Anything shorter?

4 Comments

I'm not sure if you can count that as a one-liner, as the function inside has three statements, not one (which is usually the requirement of being a one-liner).
I like the elegance of the second snippet. It makes sense because var does two actions and one of the first is that it "defines" the variable as undefined.
not very readable though.
6

You could just use this:

function createObject(propName, propValue){
    this[propName] = propValue;
}
var myObj1 = new createObject('string1','string2');

Anything you pass as the first parameter will be the property name, and the second parameter is the property value.

Comments

5

You cannot use a variable to access a property via dot notation, instead use the array notation.

var obj= {
     'name' : 'jroi'
};
var a = 'name';
alert(obj.a); //will not work
alert(obj[a]); //should work and alert jroi'

Comments

4

As $scope is an object, you can try with JavaScript by:

$scope['something'] = 'hey'

It is equal to:

$scope.something = 'hey'

I created a fiddle to test.

Comments

0

The following demonstrates an alternative approach for returning a key pair object using the form of (a, b). The first example uses the string 'key' as the property name, and 'val' as the value.

Example #1:

(function(o,a,b){return o[a]=b,o})({},'key','val');

Example: #2:

var obj = { foo: 'bar' };
(function(o,a,b){return o[a]=b,o})(obj,'key','val');

As shown in the second example, this can modify existing objects, too (if property is already defined in the object, value will be overwritten).

Result #1: { key: 'val' }

Result #2: { foo: 'bar', key: 'val' }

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.