Set Variable As A Key Name In JavaScript Object

Hello Devs,

In this blog you are going to learn a very important and useful concept of JavaScript which you will definitely going to use or might have used in Production application, i.e: How to make any variable name as key of an object in JS.

I know you might be thinking when and in which scenario you will have to use the variable name as a key name in JS.
Let me take your next 2 mins to explain the scenario.
Let say you have a function and that function is used to add some keys to an object.
The key name which you are going to add in that object is dynamic depending on the button click or something like this, and in the Handler function you are passing the argument which will be used as the new key name.
So how you will make that argument name as a key of an object ?

---

Solution:

STEP 1:

Make an object

let obj = {};

STEP 2:

let key = "someKey";

STEP 3:

then use [] to set it.

obj[key] = someValue; // this is same as obj.someKey=someValue

but the best way and the recommended way is using spread operator (...)

obj = { ...obj, [key]: somaValue };

NOTE: if you having any doubt regarding why we are using [] for setting the keys, please have a look at DOT & BRACKET Notation in Javascript

Examples:

lets assume that we have 3 buttons, and there is a OnClickHandler function.
On click of buttons we are calling this handler function and passing some key and value as a argument to this handler function and then we have to set this key and value in an object.

<button onclick=OnClickHandler("button1", 10)>Click 1</button>
<button onclick=OnClickHandler("button2", 20)>Click 2</button>
<button onclick=OnClickHandler("button3", 30)>Click 3</button>

let obj = {};
function OnClickHandler(key, value) {
  obj = { ...obj, [key]: value };
}

console.log(obj); // {button1:10, button2:20, button3:30}

Other scenarios where this concept is required:

1. while updating session storage value.
2. while updating state value in reactjs
3. while switching between light and dark mode in any website

Thank you for reading this far. This is a brief introduction on How to use variable as a key name in JavaScript.

Hope its a nice and informative read for you.
If you find this article useful, like and share this article. Someone could find it useful too.

If you find anything technically inaccurate please feel free to reach out to us.

VISIT https://www.capscode.in/blog TO LEARN MORE.

See you in my next Blog article, Take care!!

IF MY ARTICLE HELPED YOU

Thanks,

CapsCode

Comments

[𒎏Wii 🏳️‍⚧️]

but the best way and the recommended way is using spread operator

No it's not. It simply does a different thing, but it's not "better" or "worse" than setting the key directly, and claiming so is just very misleading.

[capscode]

I said in Production application... its useful.
When the same scenario comes in React JS its pretty much helpful and easy if you use spread operator

[𒎏Wii 🏳️‍⚧️]

That was not your claim though; of course spreading into a new object has many uses, but saying it is the "best" way is plainly wrong. It's not. In fact, in many cases, it is objectively worse than the alternative of directly setting the key.

[Kavindu Santhusa]

When you want to get a shallow copy of object. Use {...obj1} syntax. If you want to copy 2 objects to 1. Use {...obj1, ...obj2} method.

Example

let defaultOptions = { a: 1, b: 2}
function myFuntion(input, options={}) {
    let newOptions = {...defaultOptions, ...options}
    ...
}

[Jon Randy 🎖️]

In this example, it is much better to just use the obj[key] = value method. There really is no point making a brand new object every time