javascript array assign key value

• DSA with JS - Self Paced
• JS A to Z Guide
• JS Operator
• JS Examples
• Free JS Course

• Explore Our Geeks Community
• How to create a custom callback in JavaScript?
• How to change the href value of a tag after click on button using JavaScript ?
• Floating point number precision in JavaScript
• How to Set Height Equal to Dynamic Width (CSS fluid layout) in JavaScript ?
• Alternative to Multiple OR Operators in JavaScript
• What is Variable Scope in JavaScript ?
• How to detect virtual keyboard using JavaScript ?
• How to Detect Idle Time in JavaScript ?
• How to get all property values of a JavaScript Object (without knowing the keys) ?
• How to invoke a function without parenthesis using JavaScript ?
• How closure works in JavaScript ?
• How to Configure Mouse Wheel Speed Across Browsers using JavaScript ?
• How to adjust the width and height of iframe to fit with content in it ?
• How to Set the Distance between Lines in a Text with JavaScript ?
• How to Disable Submit Button on Form Submit in JavaScript ?
• How to load CSS files using JavaScript?
• How to detect the browser language preference using JavaScript ?
• Constructor and Method Declarations in class (ES2015+)
• How to call a function repeatedly every 5 seconds in JavaScript ?

How to store a key=> value array in JavaScript ?

We have given two arrays containing keys and values and the task is to store it as a single entity in the form key => value in JavaScript. In JavaScript, the array is a single variable that is used to store different elements. It is usually used once we need to store a list of parts and access them by one variable. We can store key => value array in JavaScript Object using methods discussed below: 

Method 1: In this method we will use Object to store key => value in JavaScript. Objects, in JavaScript, is the most important data-type and forms the building blocks for modern JavaScript. These objects are quite different from JavaScript’s primitive data-types(Number, String, Boolean, null, undefined and symbol). Objects are more complex and each object may contain any combination of these primitive data-types as well as reference data-types. 

Approach: We will traverse through the whole array and one by one add the keys from the keys (array) and the corresponding values from values (array) in the Object. 

Example:  

Method 2: In this method we will use Map to store key => value in JavaScript. The map is a collection of elements where each element is stored as a key, value pair. Map objects can hold both objects and primitive values as either key or value. When we iterate over the map object it returns the key, value pair in the same order as inserted. 

Approach: We will traverse through the whole array and one by one add the keys from the keys (array) and the corresponding values from values (array) in the map. 

Method 3: In this method we will use reduce to store key => value in JavaScript. The reduce is method which is use iterate over the list of elements. This method is used to reduce the array to a single value and executes a provided function for each value of the array (from left-to-right) and the return value of the function is stored in an accumulator.

Example: 

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples .

Please Login to comment...

• JavaScript-Questions
• Web Technologies

Please write us at contrib[email protected] to report any issue with the above content

Improve your Coding Skills with Practice

• Add a Key/Value pair to all Objects in Array in JavaScript

Last updated: Dec 22, 2022 Reading time · 5 min

# Table of Contents

• Add a Key/Value pair to all Objects in Array using Array.map()
• Using Object.assign() instead of the spread syntax (...)
• Conditionally adding a key-value pair to all objects in an array
• Add a Key/Value pair to all Objects in an Array using for...of
• Add a Key/Value pair to all Objects in an Array using a for loop

# Add a Key/Value pair to all Objects in Array in JavaScript

To add a key/value pair to all objects in an array:

• Use the Array.forEach() method to iterate over the array.
• Use dot notation to add a key/value pair to each object.
• The key/value pair will get added to all objects in the array.

The function we passed to the Array.forEach method gets called with each element (object) in the array.

On each iteration, we add a key/value pair to the current object .

If the name of the key you need to add to the object contains hyphens, spaces or starts with a number, use bracket notation to add the key to each object.

The Array.forEach() method iterates over the array and adds the key-value pair to each object in place.

If you'd rather not mutate the original array, use the Array.map() method.

# Add a Key/Value pair to all Objects in Array using Array.map()

This is a three-step process:

• Use the Array.map() method to iterate over the array.
• Use the spread syntax to add a key/value pair to each object.
• The key/value pair will get added to all objects in the new array.

The function we passed to the Array.map() method gets called with each element (object) in the array.

We used the spread syntax (...) to unpack the key/value pairs of each object and added an additional key/value pair.

We basically transfer over the id property and add a color property to each object.

The Array.map() method is different than Array.forEach() because map() returns a new array, whereas forEach() returns undefined .

When using the forEach() method, we mutate the array in place.

# Using Object.assign() instead of the spread syntax (...)

You can also use the Object.assign() method instead of using the spread syntax.

We used the Object.assign() method to copy the key-value pairs of one or more objects into a target object.

The arguments we passed to the Object.assign method are:

• the target object - the object to which the provided properties will be applied.
• the source object(s) - one or more objects that contain the properties we want to apply to the target object.

You can imagine that the key-value pairs of the object we passed as the second argument to Object.assign() , get copied into the object we supplied for the first argument.

# Conditionally adding a key-value pair to all objects in an array

If you need to conditionally add a key-value pair to all objects in an array, use the ternary operator.

The ternary operator is very similar to an if/else statement.

In the example, we check if the current object's id property is greater than 1 .

If the condition is met, the string Bobby is returned for the name property, otherwise, the string Alice is returned.

Here is the equivalent if/else statement.

If the object's id property is greater than 1 , the if block runs, otherwise, the else block runs.

# Add a Key/Value pair to all Objects in an Array using for...of

You can also use a simple for...of loop to add a key-value pair to all objects in an array.

The for...of statement is used to loop over iterable objects like arrays, strings, Map , Set and NodeList objects and generators .

On each iteration, we add a new key-value pair to the current object, in place.

# Add a Key/Value pair to all Objects in an Array using a for loop

You can also use a basic for loop to add a key-value pair to all objects in an array.

The basic for loop is quite verbose in comparison to forEach() or for...of .

We also have to use the index to access the object of the current iteration before adding a key-value pair.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• Check if all Values in Array are Equal in JavaScript
• Remove Property from all Objects in Array in JavaScript
• How to skip over an Element or an Index in .map() in JS

Borislav Hadzhiev

Web Developer

Copyright © 2023 Borislav Hadzhiev

How Can I Add a Key-Value Pair to a JavaScript Object?

.css-13lojzj{position:absolute;padding-right:0.25rem;margin-left:-1.25rem;left:0;height:100%;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:none;} .css-b94zdx{width:1rem;height:1rem;} The Problem

You want to add a key-value pair to a JavaScript object, how do you do this?

The Solution

We’ll describe six ways to add a key-value pair to a JavaScript object.

Using Property Accessors

Property accessors use dot notation or bracket notation to give access to an object’s properties, which can also be called keys. You can use them to add a key-value pair to an object. It’s the most straightforward way of adding a key-value pair to an object.

Dot Notation

Using dot notation is another common way to add a key-value pair to an object.

The key should be a String or a symbol . If you need a key to be a different primitive value or an object, or if the insertion order of the key-value pairs is important, don’t use a regular JavaScript object. Use a Map .

Bracket Notation

Dot notation does have some limitations. If the key is dynamic, if it contains spaces or hyphens, or if it starts with a number you’ll get an error message. In these cases, you can use bracket notation:

Using spread (...) Syntax

You can use the spread (...) syntax to add a key-value pair to an object:

You can spread in any iterable, such as an array, object, or String. Unlike the other methods explained here, spread (...) syntax does not mutate the original object, which may be useful if you don’t want to change the original object. It creates a new object, which makes its performance the worst of the methods explained here.

You can add multiple properties at once or merge multiple iterables, such as objects. The merge is shallow: Any nested objects will not be copied to the new object.

If a property is added that already exists on the object, the property value will be overwritten:

Using Object.assign()

The Object.assign() method is similar to using the spread syntax, but it only joins two objects and mutates the target object.

The first argument is the target object; the second object is the source object. The source object’s properties are added to the target object.

Using Object.defineProperty()

The Object.defineProperty() method can be used to add or modify a property on an object. This method is useful for more complex property additions where you want to set property descriptors such as enumerable , configurable , and writable .

Related Answers

• Asynchronous Callbacks in JavaScript
• Capturing JavaScript Errors
• How do I check if an element is hidden in jQuery?
• Comments in JSON
• Warning: componentWillMount has been Renamed, and is not Recommended for Use
• Default function parameter values in JavaScript
• What's the Difference Between the Assignment (`=`) and Equality (`==`, `===`) Operators?
• Difference between `let` and `var` in JavaScript
• Difference between `var functionName = function() {}` and `functionName() {}` in JavaScript
• Disable / enable an input with jQuery?
• Get Selected Value in Dropdown List Using JavaScript
• Get the Current URL with JavaScript?
• Get the last item in an array using JavaScript
• How are parameters sent in an HTTP POST request?
• How can I change an element's class with JavaScript?
• How can I Check for "undefined" in JavaScript?
• How can I convert a string to a boolean in JavaScript?
• How can I create a two-dimensional array in JavaScript?
• How can I know which radio button is selected via jQuery?
• How do I Check for an Empty/Undefined/Null String in JavaScript?
• How do I check if an array includes a value in JavaScript?
• How do I check whether a checkbox is checked in jQuery?
• How do I copy to the clipboard in JavaScript?
• How do I Empty an Array in JavaScript?
• How do I Format a Date in JavaScript?
• How do I get all of the unique values in a JavaScript array (remove duplicates)?
• How do I get the Current Date in JavaScript?
• Get value of text input field using JavaScript
• How do I Make the First Letter of a String Uppercase in JavaScript?
• How do I refresh a page using JavaScript?
• How do I Replace all Occurrences of a String in JavaScript?
• How do I scroll to an element using jQuery?
• How do I Test for an Empty JavaScript Object?
• How do you append something to an array using JavaScript?
• How to check if a key exists in a JavaScript object
• How to compare two dates with JavaScript
• How to format numbers as currency strings
• How to get the length of a JavaScript object
• How to get values from URLs in JavaScript
• How to insert an item into an array at a specific index using JavaScript
• How to round to at most two decimal places in JavaScript
• How to submit an AJAX form using jQuery
• How do JavaScript closures work?
• What does `"use strict"` do in JavaScript, and what is the reasoning behind it?
• Loop over an array in JavaScript
• Map function for objects (instead of arrays)
• Naming variables in JavaScript
• Parsing a string to a `Date` in JavaScript
• Redirect to Another Page Using JavaScript
• How Can I Remove a Specific Item from an Array?
• Removing Properties from Objects in JavaScript
• Return a value from an asynchronous function call
• Saving Arrays and Objects to Browser Storage Using JavaScript
• What is "Script Error"?
• Semicolon usage in JavaScript
• Set the select option 'selected' by value using jQuery
• Setting "checked" for a checkbox with jQuery
• Split a string in JavaScript
• How to Check Whether a String Contains a Substring in JavaScript?
• Truthy and falsy values in JavaScript
• Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object
• Uncaught ReferenceError: $ is not defined?
• Undefined versus null in JavaScript
• Warning: Each Child in a List Should Have a Unique 'key' Prop
• What is the difference between POST and PUT in HTTP?
• What is the JavaScript Version of `sleep()`?
• Which href value should I use for empty JavaScript links, "#" or "javascript:void(0)"?
• Why does my JavaScript code receive a "No Access-Control-Allow-Origin header is present on the requested resource" error, while Postman does not?
• Wrong References to `this`

A better experience for your users. An easier life for your developers.

Find something to learn

How to create key value array in javascript.

Posted on June 12, 2019 | by Prashant Yadav

Posted in Arrays , Javascript

Learn how to create a key value array in javascript.

Arrays in javascript are not like arrays in other programming language. They are just objects with some extra features that make them feel like an array.

It is advised that if we have to store the data in numeric sequence then use array else use objects where ever possible.

And to create an associative array with a key value pair it is feasible to use objects only.

There is an inbuilt data structure available in ES6 called Map which can be used to store the key value pair data.

Iterating key value array in javascript

We can use the For…in loop to enumerate through the stored values.

As javascript objects can be extended, if you want to loop for the properties owned by the object only then we can restrict it using hasOwnProperty() method.

Recommended Posts:

• What is the difference between an array and an object in JavaScript?
• Implement clearAllTimeout in JavaScript
• Add custom events in Javascript
• How to get the last element of the array in javascript
• How to find elements with indexof in javascript
• How to remove object from array in javascript
• Number increment counter in Javascript (React)
• useOnClickOutside() hook in React
• Javascript alert, confirm, prompt method
• Javascript confirm box with yes & no option

• Trending Categories

• Selected Reading
• UPSC IAS Exams Notes
• Developer's Best Practices
• Questions and Answers
• Effective Resume Writing
• HR Interview Questions
• Computer Glossary

How to store a key => value array in JavaScript?

Sometimes, we require to map keys to particular values using some data structure in JavaScript. For example, storing the user details in the key value pairs in JavaScript is useful.

We can use different data structures, such as objects or maps in JavaScript, to store data in the key-value format.

Use the objects to store a key => value in JavaScript

In JavaScript, objects allow us to store data in the key-value format. We can use the key with the object to get the data from the object.

Users can follow the syntax below to use the object to store key-value pairs in JavaScript

In the above syntax, we have created the empty object. Also, we store the value for a particular key in the object

In the example below, we created the keysArray, which contains the numbers. The valuesArray contains the different strings representing the number.

After that, we used the for loop to iterate through the keysArray. We are taking the key from the ith index of the keysArray, and the value from the ith index of the valuesArray. For every key, we store the value in the object.

At last, we printed all the keys and values of the object.

Use the map to store key => value in JavaScript

We can also use the map to store the data in the key-value format. The map class contains the set() method to set the data and takes the key and value as a parameter. Also, the map class contains the get() method, which takes the key as a parameter and returns the mapped value.

Users can follow the syntax below to use the map to store key-value pairs in JavaScript.

We used the Map() constructor in the above syntax to create a new map object. Also, we have used the set() method to set keys and values.

In the example below, the mapKeys array contains the number strings. We iterate through the array and set key-value pairs to the map. Inside the for loop, we used the set() method to set key values in the map. Also, we have passed the key from the mapKeys array as the first parameter and the index as a second parameter.

Use the array.reduce() method to store key => value in JavaScript

The array.reduce() method converts the array into a single element by reducing the array. We can use the reduce() method to convert the whole array into a single object by storing array data inside the object in the key-value pair format.

Users can follow the syntax below to use the array.reduce() method to store array data in the object.

We have initialized the obje with {} (empty object) in the above syntax. We store every element of the array in the obj object and return it from the array.reduce() method.

In the example below, we have an arrayOfValues variable containing the different programming languages in the string format. We have converted the array into the object format, which stores the array data in the key-value format.

In the array.reduce() method and the obj object contains the updated key values from the last iteration. In the current iteration, we use the index *2 as a key and the array element as the value of the object element. After that, we return the obj.

We have used the map, object, and array.reduce() method to store the data in the key– value format in JavaScript. The map is the best way to store the data in the key-value format.

• Related Articles
• Get max value per key in a JavaScript array
• Time Based Key-Value Store in C++
• JavaScript - Convert an array to key value pair
• How to Search by key=value in a Multidimensional Array in PHP
• Find specific key value in array of objects using JavaScript
• Appending a key value pair to an array of dictionary based on a condition in JavaScript?
• How to generate array key using array index – JavaScript associative array?
• How to create an array with multiple objects having multiple nested key-value pairs in JavaScript?
• Creating a JavaScript Object from Single Array and Defining the Key Value?
• How to store a 2d Array in another 2d Array in java?
• How to access an object value using variable key in JavaScript?
• How to check whether a particular key exist in javascript object or array?
• Get key from value in JavaScript
• How to store array values in MongoDB?
• How to group an array of objects by key in JavaScript

Kickstart Your Career

Get certified by completing the course

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• English (US)

Array.prototype.keys()

The keys() method of Array instances returns a new array iterator object that contains the keys for each index in the array.

Return value

A new iterable iterator object .

Description

When used on sparse arrays , the keys() method iterates empty slots as if they have the value undefined .

The keys() method is generic . It only expects the this value to have a length property and integer-keyed properties.

Using keys() on sparse arrays

Unlike Object.keys() , which only includes keys that actually exist in the array, the keys() iterator doesn't ignore holes representing missing properties.

Calling keys() on non-array objects

The keys() method reads the length property of this and then yields all integer indices between 0 and length - 1 . No index access actually happens.

Specifications

Browser compatibility.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

• Polyfill of Array.prototype.keys in core-js
• Indexed collections guide
• Array.prototype.entries()
• Array.prototype.values()
• Array.prototype[@@iterator]()
• TypedArray.prototype.keys()
• Iteration protocols

JS Reference

Html events, html objects, other references, javascript array keys().

Create an Array Iterator object, containing the keys of the array:

Use the built in Object.keys() Method:

Description

The keys() method returns an Array Iterator object with the keys of an array.

The keys() method does not change the original array.

Return Value

Related pages:.

Array Tutorial

Array Const

Array Methods

Array Iterations

Browser Support

keys() is an ECMAScript6 (ES6) feature.

ES6 (JavaScript 2015) is supported in all modern browsers:

keys() is not supported in Internet Explorer 11 (or earlier).

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

[email protected]

Top Tutorials

Top references, top examples, get certified.

JavaScript Object Keys Tutorial – How to Use a JS Key-Value Pair

You can group related data together into a single data structure by using a JavaScript object, like this:

An object contains properties, or key-value pairs. The desk object above has four properties. Each property has a name, which is also called a key, and a corresponding value.

For instance, the key height has the value "4 feet" . Together, the key and value make up a single property.

The desk object contains data about a desk. In fact, this is a reason why you’d use a JavaScript object: to store data. It’s also simple to retrieve the data that you store in an object. These aspects make objects very useful.

This article will get you up and running with JavaScript objects:

• how to create an object
• how to store data in an object
• and retrieve data from it.

Let’s start by creating an object.

How to Create an Object in JavaScript

I'll create an object called pizza below, and add key-value pairs to it.

The keys are to the left of the colon : and the values are to the right of it. Each key-value pair is a property . There are three properties in this example:

• The key topping has a value “cheese” .
• The key sauce has a value “marinara” .
• The key size has a value “small” .

Each property is separated by a comma. All of the properties are wrapped in curly braces.

This is the basic object syntax. But there are a few rules to keep in mind when creating JavaScript objects.

Object Keys in JavaScript

Each key in your JavaScript object must be a string, symbol, or number.

Take a close look at the example below. The key names 1 and 2 are actually coerced into strings.

It’s a difference made clear when you print the object.

There’s another rule to keep in mind about key names: if your key name contains spaces, you need to wrap it in quotes.

Take a look at the programmer object below. Notice the last key name, "current project name" . This key name contains spaces so, I wrapped it in quotes.

Object Values in JavaScript

A value, on the other hand, can be any data type, including an array, number, or boolean. The values in the above example contain these types: string, integer, boolean, and an array.

You can even use a function as a value, in which case it’s known as a method. sounds() , in the object below, is an example.

Now say you want to add or delete a key-value pair. Or you simply want to retrieve an object’s value.

You can do these things by using dot or bracket notation, which we’ll tackle next.

How Dot Notation and Bracket Notation Work in JavaScript

Dot notation and bracket notation are two ways to access and use an object’s properties. You’ll probably find yourself reaching for dot notation more often, so we'll start with that.

How to Add a Key-Value Pair with Dot Notation in JavaScript

I'll create an empty book object below.

To add a key-value pair using dot notation, use the syntax:

objectName.keyName = value

This is the code to add the key (author) and value ("Jane Smith") to the book object:

Here's a breakdown of the above code:

• book is the object's name
• author is the key name
• "Jane Smith" is the value

When I print the book object, I’ll see the newly added key-value pair.

I’ll add another key-value pair to the book object.

The book object now has two properties.

How to Access Data in a JavaScript Object Using Dot Notation

You can also use dot notation on a key to access the related value.

Consider this basketballPlayer object.

Say you want to retrieve the value “shooting guard.” This is the syntax to use:

objectName.keyName

Let's put this syntax to use to get and print the "shooting guard" value.

• basketballPlayer is the object's name
• position is the key name

This is another example.

How to Delete a Key-Value Pair in JavaScript

To delete a key-value pair use the delete operator. This the syntax:

• delete objectName.keyName

So to delete the height key and its value from the basketballPlayer object, you’d write this code:

As a result, the basketballPlayer object now has three key-value pairs.

You’ll probably find yourself reaching for dot notation frequently, though there are certain requirements to be aware of.

When using dot notation, key names can’t contain spaces, hyphens, or start with a number.

For example, say I try to add a key that contains spaces using dot notation. I’ll get an error.

So dot notation won’t work in every situation. That’s why there’s another option: bracket notation.

How to Add a Key-Value Pair Using Bracket Notation in JavaScript

Just like dot notation, you can use bracket notation to add a key-value pair to an object.

Bracket notation offers more flexibility than dot notation. That’s because key names can include spaces and hyphens, and they can start with numbers.

I'll create an employee object below.

Now I want to add a key-value pair using bracket notation. This is the syntax:

objectName[“keyName”] = value

So this is how I’d add the key (occupation) and value (sales) to the employee object:

• employee is the object's name
• "occupation" is the key name
• "sales" is the value

Below are several more examples that use bracket notation's flexibility to add a variety of key-value pairs.

When I print the employee object, it looks like this:

With this information in mind, we can add the “shooting percentage” key to the basketballPlayer object from above.

You may remember that dot notation left us with an error when we tried to add a key that included spaces.

But bracket notation leaves us error-free, as you can see here:

This is the result when I print the object:

How to Access Data in a JavaScript Object Using Bracket Notation

You can also use bracket notation on a key to access the related value.

Recall the animal object from the start of the article.

Let's get the value associated with the key, name . To do this, wrap the key name quotes and put it in brackets. This is the syntax:

objectName[“keyName”]

Here's the code you'd write with bracket notation: animal["name"]; .

This is a breakdown of the above code:

• animal is the object's name
• ["name"] is the key name enclosed in square brackets

Here’s another example.

Note that sounds() is a method, which is why I added the parentheses at the end to invoke it.

This is how you’d invoke a method using dot notation.

JavaScript Object Methods

You know how to access specific properties. But what if you want all of the keys or all of the values from an object?

There are two methods that will give you the information you need.

Use the Object.keys() method to retrieve all of the key names from an object.

This is the syntax:

Object.keys(objectName)

We can use this method on the above runner object.

If you print the result, you’ll get an array of the object’s keys.

Likewise, you can use the Object.values() method to get all of the values from an object. This is the syntax:

Object.values(objectName)

Now we'll get all of the values from the runner object.

We’ve covered a lot of ground. Here’s a summary of the key ideas:

• Use objects to store data as properties (key-value pairs).
• Key names must be strings, symbols, or numbers.
• Values can be any type.

Access object properties:

• Dot notation: objectName.keyName
• Bracket notation: objectName[“keyName”]

Delete a property:

There’s a lot you can do with objects. And now you’ve got some of the basics so you can take advantage of this powerful JavaScript data type.

I write about learning to program, and the best ways to go about it on amymhaddad.com . I also tweet about programming, learning, and productivity: @amymhaddad .

Programmer and writer | howtolearneffectively.com | dailyskillplanner.com

If you read this far, thank the author to show them you care. Say Thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started