You're in good company

Right off the bat get your own personal site - use it as a free personal blog, or portfolio site.

Free forever

Customize your site's branding - your own custom domain, colors, layout, and more.

Tailor your branding.

Home

In this post, we will look at one of the most used and useful tools in JavaScript - the 

Let's assume that we took some trips this month, which surely would be worth documenting, given that 2020 has been a year of very few of them.

So we documented the trips that are stored in an array called 

In the following paragraphs, we will manipulate our array with the 

 is a method that will return a copy of the original array. While 

 can make a simple copy of the original array with no changes, it wouldn't make sense to do that with this method - as there are dedicated ones for that.

 method (amongst some others) is the ability to apply changes (manipulate the data in the array) and create a new array with the changed data.

While a new array will be created with the changed data, the original array will not be affected.

These changes are defined with a function (callback) which we pass in as a parameter.

Create an array of values based on a field in every object in the array

The most basic change we could do to an array is to strip all of the data that we don't care about and create a new array with only the information we do care about.

So, if we have an array of objects - the most basic example would be to extract a value of a specific field from each object in the array.

Let's create a list of trip destinations from our array of trips. In order to do that, we can apply 

 method with the following callback as a parameter:

// [ 'Home', 'Work', '333 Bay Street', 'Wall Climbing Gym' ]

// [  { id: 1, destination: "Home", price: 1240 },  { id: 2, destination: "Latvia", price: 50 },  { id: 3, destination: "333 Bay Street, Toronto", price: 16 },  { id: 4, destination: "Wall Climbing Gym", price: null }]

We could have easily wrapped the return statement of our callback 

, and that would have rendered a list of UI elements in our app with the destinations.

Quite easy and quite powerful. 👨‍💻

Now, it's time to give ourselves a discount on our trips. We will do that by reducing the prices of the trips by half. We will also check for the presence of a price with a 

 so that if the trip doesn't have a price, we can leave it as is (return without changes).

/* This Guard Clause, will return a trip without modifying it */

/* Here we are spreading the trip and modifying the price of it */

/* Console logs an array with updated prices */

So we have discounted our trips (modified the trip data) and created a new array with the original array unchanged.

Any thoughts? Let me know in the comments below.

Here are some more articles on other Array methods:

An intro to one of the most useful methods in JavaScript - the Array .map() method.

What is JavaScript .map() and how to use it

Discussions