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:
- while updating
session storage
value. - while updating
state
value in reactjs - 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
Top comments (5)
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.
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
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.
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
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