Use Some as a Ternary Operator or Conditional
some returns a boolean value after passing each item in the source array through the test function that you pass in as the first parameter. This makes it well suited to the types of queries that require a simple yes or no answer. In this lesson we look at 2 practical use-cases for some. The first shows how it can be used with a ternary operator to switch a class on an element & the second shows how some can be used in an if conditional.
[00:00] Array Some accepts a function as its first parameter. It will begin to call this function once for every item in this source array. Should any of those function calls yield a truthy value, then Some will return true. So in this example where our source array has five items in it, we call Some on the items array, x will become equal to each item in this array. So first 1, then 2, then 3. On the first call, x will be equal to 1.
[00:32] This expression will return false, so we'll move onto the next item. X becomes equal to 2, this returns false again, we move onto the next. When we move onto the third item, this expression will now be true so the process stops and Some returns the value true, which we assign to the has3 variable. So if we run this, you'll see we get true. If we provide a number that doesn't exist in our array, like 6, we get false. So Array Some is great for quick and dirty query on the array when you just want a yes or no answer.
[01:08] So let's put this into practice. Here we have an array of tasks. They each have a title and a completed property. We look in the DOM for an element with the class taskList here, and we build up some HTML by mapping over these tasks and wrapping those that are completed in a strikethrough tag. So that handles the rendering of each item in the list. But we want to add a global modifier class to the list if all items are complete, and a different modifier class if there are any items left uncompleted.
[01:41] This will allow us to use some CSS to change the style. So we can do this by adding to the class list. To determine which class we're going to add, we can call tasks.some, here we'll have access to each task, and we can return task.completed is exactly equal to false. So because the Some method returns either true or false, this line will return true if any of our tasks are left uncompleted. If that's the case, we can add the class taskList uncompleted, or the inverse of that will be taskList completed.
[02:22] We hit save, and you can see we now have taskList uncompleted. If we change this to true, we get taskList completed. So this will allow us to add some CSS to change the look of this when all tasks are completed. For example, if we were to put taskList--completed, color:light-gray. There you see we have the grayed-out list. This is a great example of when you should use Array Some. When adding a class to our list, we are always going to add either uncompleted or completed.
[03:05] We didn't care what the title of any of these items were, or if they had any of the properties. All we cared about is whether a single one of them had the completed property set to false. Once we knew that, we could then decide which class to use and we have the whole piece of logic wrapped up in a couple of lines. Another place you might use Array
[03:31] Some is to guard against duplicate entries. So if you go back to just this tasks array, let's say we had a function called addTask in which you give it a title, and this will push onto the tasks array a new object that contains title that you passed in, and completed false as the default state of this task. Now, if we call addTask with "Feed the dog," and then log the tasks to the console, we can see we have the original three plus this one we added here. So far, so good.
[04:09] But what if we wanted to check for duplicates? We change this to "Feed the cats." We run this, and you see we now have duplicate entries. We can use Array Some to guard against this. Inside the addTask function we could exit early if an item with this title already exists. So we can say, if tasks.Some access each task individually, and compare the title to the one given in the function call. So calling Some on the tasks array will cause this function to be called for each of these items.
[04:45] Task.title will be equal to "Do laundry," "Feed the cat," "Watch the array lessons on Egghead," and we compare each of those in turn to what was passed in here in the function call. Then because Some returns either true or false, it will allow us to return early if the given title matches any that already exists. So in this case, when we call it with "Feed the cat," it's only going to make it into the second item where this will become true, and we return. So if you run this now, you can see this is free of duplicates.
[05:20] Now of course, you could in here have some logging or if you're in the browser you may put a message to the user, some sort of temporary error to say there's a duplicate. But the key thing to take away here is that especially now with ES2015 and these arrow functions, Array Some is the ideal method to use when you want a simple yes or no answer from querying your array.