Use Concat to Add Values to an Array

Combine Values of an Array into a String with Join

Check if a Value is in an Array with indexOf

Create a Shallow Copy of an Array with Slice

Sort an Array Alphabetically or Numerically 

Filter an Array with Truthy Values

Use Some as a Ternary Operator or Conditional

Add Elements onto an Array with Push

Modify Values in an Array with Map

Validate Data with the Every() Method

Produce a single value from an Array with reduce

Understand JavaScript Arrays

The `every` method returns true or false based on whether or not every item in the array passes the condition you provide in a callback function. In this lesson we look at some practical examples for simple validation, inferring state from data and for re-using the logic in our callbacks with array filters. 

[00:00] The every method returns true or false based on whether or not every element in this source array passes a condition that we provide here as the return value to this function. In this example we have five items, which means this function will be executed five times. X will become equal to one. Then two, three, four, then five. Because all of those items are less than 10, this will return true, which we set to the result and log to the console, which you can see here.

[00:31] Now if we were to change this to instead be five, so now we are saying, "Is every item in our array less than five." Or you can see that the first four obviously are, but this last one isn't. On the fifth run this will return false, which will cause the every method to return false. We should see that if we log it to the console, which we do.

[00:52] Now the interesting thing about the every method is that it will exit on the first failure. In this example, it's the last element of the array that's causing this to return false.

[01:03] What would happen if we remove this from here and instead placed it at the front? We log that again. You can see we still get false, but something very different has happened behind the scenes.

[01:14] Let's just put a tiny bit of logging in place to make this clearer. If we log called with and then the value that we're currently looking at, then we'll still return that same condition, so X less than five. If we run this again, now you can see that this function body was only executed one time.

[01:32] Because it returned false the very first time, it doesn't need to look at any more items in the array, but we stick it back on the end and run it, you can see that now this function body was executed once for each item. This could be important if your application is doing something that is quite expensive inside these checks. It's nice to know that it will exit on the very first failure. Now you should just think of every as a way of providing flexible validation for your arrays.

[02:02] Let's look at another example where we have an array that contains strings and numbers. If you want it to validate that it only contains strings, you can simply say, "Type of X is equal to string." Then if we run that, you can see we get false because this isn't a string. If we remove that item, we get true. Every can also be used to fill in the gaps from the data you have to work with.

[02:27] In this example we have an array with two objects in it that represent form fields. We are not given any information about whether or not the entire form was valid. We're just given information about each individual field. It's up to us to infer the state of this form.

[02:43] We can do that really easily with every simply by saying, "Is valid equal to fields.every?" We need to provide the condition. We'll say, "X.errors.length exactly equal to zero."

[03:01] If every item in the fields array has an empty array under errors, then we'll consider that form to be valid. If any of the fields have errors, then it will be invalid. If we log this to the console, we can see that this is indeed not a valid form.

[03:17] The beauty of this is that we've been able to infer the state of the form simply from the data provided to us. Now we can use this to conditionally add a header to the form that warned the user that there were errors below.

[03:31] Another example could be tracking the user's progression through a course of videos. Let's say that this array represents the course and each object is a video. They each have a title and a length. This is how many seconds are in the video. Then viewed is the amount of seconds the user has actually watched.

[03:51] Now to determine if this course is complete from this data only, we would have to check the viewed count against the length. We could say, "Is complete equal to videos.every?"

[04:06] Now condition is that the viewed count is exactly equal to the length. Log this to the console. You can see that no, this course is not complete because there's still a minute of this video to watch. If we were to up this to 4:20, now you can see it's true. As with before we now have the state of this course, even though it wasn't given to use in the data. We can use this to display a little green tick or something at the side of each course to show when it was completed.

[04:41] One final thing to mention about the every method is that if you look at this conditional that we provide here inside the call back, these are very similar to the type of conditions you provide to array filters. It's sometimes worth extracting them out to separate functions so that you can reuse them.

[05:00] For example, look what happens if I just change this method call here to filter. Log it to the console. You can see that we're actually getting both items because we changed these values. If we switch this back and log it again, you can see that we're only getting the completed videos.

[05:19] We haven't changed any of this logic, just changed the method here. To enable us to reuse this, we can simply pull it out into a separate function.

[05:27] We'll call it complete. Pass in X here. Then change this back to every. That's complete there.

[05:38] Log to the console again, and we're back to where we were earlier. This complete is now false again.

[05:45] Now if we also wanted to have an array of just completed videos, we can reuse the logic in this function simply by saying, "Videos.filter," and passing in the same complete function. Log it to the console. You can see it works.

Course

Understand JavaScript Arrays

Validate Data with the Every() Method

Share this video with your friends