JavaScript 30 – Day 7: Array Cardio 2

Array Cardio—yeeeaaahhh!!!

Sorry. 🙂

Welcome to my recap of Day 7 of the free JavaScript 30 online video course by Wes Bos. In case you really have not yet heard of the course, quickly head over to it and get started right away! 🙂

Please refer to the JavaScript 30 archive for all recap posts.

Objective

On Day 7, we will explore four new JavaScript array functions: .some(), .every(), .find(), and .findIndex(). In fact, it’s five, as you will see soon.

The provided starter files include not more than a single HTML file that again contains three arrays with data to perform our workout on. 🙂 For the sake of better reading, I moved the data into a separate JavaScript file for my fork of the JavaScript 30 repository.

I stopped the video right after the first couple seconds, and jumped right in on the cardio.

Conception

Nothing to do here. Using array functions is straightforward, and the individual tasks are given.

Implementation

Let’s start with the workout then! 🙂

Check a Condition for Some Items

This is my code to check if at least one person is 19 or older:

const thisYear = ( new Date() ).getFullYear();
const isNineteenOrOlder = ( { year } ) => ( 19 <= thisYear - year );

console.log( people.some( isNineteenOrOlder ) );

I extracted the callback so I can easily re-use it. I also cached the year, because, well, it most probably won’t change between the two calls. 😉

Check a Condition for All Items

Having the callback ready, this subtask is no more than this:

console.log( people.every( isNineteenOrOlder ) );

Find a Specific Item

The third subtask is about finding a specific item according to some condition. And I did it like so:

console.log( comments.find( ( { id } ) => ( 823423 === id ) ) );

(Find and) Delete a Specific Item

Workout number 4 is to (find and then) delete a specific item, again, according to some condition. Here is how I went about this:

const index = comments.findIndex( ( { id } ) => ( 823423 === id ) );

console.log( comments[ index ] );

delete comments[ index ];

console.log( comments );

Refinement

Nope. Unfortunately, yes, there was one thing to improve. 🙁 😀

In the fourth and last subtask, I successfully deleted the desired item. However, there are two different results after having deleted an item:

• the whole item is completely gone (i.e., all items that come after the deleted one now have another index!);
• only the item data is deleted (i.e., all other items still have their original index, and the index of the deleted item gives undefined).

I (subconsciously) decided to do the second thing, by using delete. Wes, however, wanted the new array to have all the items of the original array, except for the deleted one; and no undefined and the like.

I adapted my code like so:

const index = comments.findIndex( ( { id } ) => ( 823423 === id ) );

console.log( comments[ index ] );

comments.splice( index, 1 );

console.log( comments );

Using .splice(), which is the fifth array method I mentioned before, is straightforward, and just makes sense to me.

Live Demo

Want to see this in action? Well, here is a live demo. 🙂

Make sure to have a look at your console, though. 😉

Retrospection

Nothing new for me today, but it’s always good to practice these things, right?

And You?

JavaScript 30 is free! So, unless you already did this on your own, what’s your reason not to? 🙂