JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Javascript offers different ways to work with arrays one of the most used data structures out there.

Learn some of these methods and functions to improve the way you manipulate arrays in your code.

Javascript offers different ways to manipulate an array. One of this situations is the need of update or modify the content of one of the items of an array of objects. To do this we can use mutable methods like index access or immutable ways by using `Array.map` or a combination of `Array.findIndex` and `Array.slice`

3 Ways to Update the Content of an Array of Objects with Javascript

Javascript offers at least 4 ways to fill an array with different values using only native language methods. These methods allow you to create an arrangement of a predefined size and content.

It's possible to use `Array.fill` to create an Array with a pre-defined size and then use `Array.map` to populate the items with a default value, like integer or string.

It's also possible to populate the array with an object, but we will require to use another  function because `Array.fill` just copy a reference to the original object without creating multiple unique objects. To solve this we can use `Array.map`.

Other way to solve the same problem is by using a for loop, but this is a mutable method.

Also, we can use `Array.from` or the array spread syntax in combination with the `Array.map` function.


4 Ways to populate an Array in Javacript

This course will dig deep into the Array#reduce in JavaScript and give you a solid understanding to start using it today.

Reduce Data with Javascript Array#reduce

Explore JavaScript (es6) array methods. We will slice, join, map, and reduce our way to better understanding of the powerful array methods that modern JavaScript delivers.

Understand JavaScript Arrays

Learn how to build complex components using different design patterns implemented with the React Hooks API.

Build Advanced Components with React Hooks

Efficient Javascript Array Manipulation

https://app.egghead.io/api/v1/lessons/javascript-3-ways-to-update-the-content-of-an-array-of-objects-with-javascript/subtitles

Matias Hernandez: [0:00] JavaScript allow us to update the content of our object of arrays. To do this, we will use this little handy function that creates random user objects. One method to update the content of the array objects is accessing the elements of it by the array index, but this is a mutable method.

[0:24] There are immutable ways to do the same goal, like the map of function. Map iterates over the array and by using a callback function allow access to the items. Map creates a new array with the content return it by the cover function.

[0:39] In this case, we use a conditional block to update only the item that have an ID equal to three. By using object of spread syntax, we update only the property name. In case that the conditional block is false, we return the original item.

[1:00] Another way to update the content of one of the items by not knowing the index is by using the findIndex function. To avoid mutate the original array, we will use arrays slice function as our helper, findIndex allow us to use a test function. We'll return the index of the element that passed the test.

[1:21] Then, after we got the index, we can create a new item by using object of spread syntax to update only the name property following by creating a new array using array slice to get two portions of the array, before and after the index. In summary, JavaScript offers different ways in a mutable and immutable fashion to update and narrow your object.

https://app.egghead.io/api/v1/lessons/javascript-3-ways-to-update-the-content-of-an-array-of-objects-with-javascript/transcript

https://app.egghead.io/api/v1/lessons/javascript-4-ways-to-populate-an-array-in-javacript/transcript

Efficient Javascript Array Manipulation

Matías Hernández

You might also like these resources:

Reduce Data with Javascript Array#reduce

Understand JavaScript Arrays

Build Advanced Components with React Hooks

Course Content

You might also like these resources:

Reduce Data with Javascript Array#reduce

Understand JavaScript Arrays

Build Advanced Components with React Hooks