How to check if a word starts with a value stored inside an array in JavaScript

Suppose you have an array of letters, and a word, and you need a little JavaScript code which answers the question: “Does this word start with any of the letters in my array?”. As an example, suppose the word is "aardvark" and your array is an array of vowels: ["a", "e", "i", "o", "u"]. At a glance, you can say that"aardvark" does start with the vowel “a”, so the answer to the question is yes.

Now you need to write the JavaScript code which will do the work for you, for any word at all.

First, you can use the fact that the JavaScript String type has a method startsWith¹ which returns true if the string starts with the input value.

For example:

let value = "aardvark".startsWith("a");
console.log(value); // prints "true"

That’s a good start. Now we need to check all the vowels in our array. There’s a very handy Array method, some², which can be used for this purpose. Let’s look at how it works for this example:

let vowels = ["a", "e", "i", "o", "u"];
let value1 = vowels.some(function(vowel) {
    return "aardvark".startsWith(vowel);
});

The way this code works is that some evaluates the passed in callback function for every vowel in the array until it finds one which returns true (or more correctly, a “truthy” value³). Then, it stops, and doesn’t look at any more vowels in the array – the output of the method is true. If the function never returns true – for example, if we replaced “aardvark” with “camel” – then the output of some would be false.

Let’s rework this code so that it can be easily reused for any word:

let startsWithVowel = function(word) {
    return vowels.some(function(vowel) {
        return word.startsWith(vowel);
    });
};

Then you can test this for any word you want. For example, open Chrome browser, open the JavaScript console⁴ by typing Ctrl+Shift+J, and type in the above code to define your function. Then you can test the function manually with different inputs, like this:

startsWithVowel("aardvark");
true
> startsWithVowel("umbrella");
true
> startsWithVowel("camel");
false

The cool part about the implementation of startsWithVowel is that it won’t perform word.startsWith(vowel) on every single element in the array if it doesn’t need to do so. It only evaluates this until it finds an element which causes word.startsWith(vowel) to return true. In the case of “aardvark”, that’s the very first element.

You may be wondering “why do I have to use this Array.some method? I could have used a for loop.” Yup, you’re right. Here’s a different implementation which uses a for loop to do the same thing:

let startsWithVowelLoop = function(word) {
    let l = vowels.length;
    let result = false;
    for (let i = 0; i < l; i++) {
        if (word.startsWith(vowels[i])) {
            result = true;
            break;
        }
    }
    return result;
};

When I was first introduced to the some method, I had the same doubts. Why use this method to do something that I already knew how to do perfectly well with a loop? There are a couple of reasons. First, the code is shorter when written using the some method. That’s not such a big deal; sometimes short code is harder to read. However, in my opinion, it’s actually easier to read the implementation of startsWithVowel. My eye goes straight to some, and I know that method will just look for “some” value which satisfies the condition in the callback function. It’s also important that you’re going to find code like this all over the place, these days. Since you have to know what it means, it helps to use it in order to get comfortable with it.

In my next blog post, I’ll explore the performance differences between the for loop and the Array.some method⁵.