How to test if all characters in a string a unique with vanilla JavaScript

Today, we’re going to do another coding challenge.

For this one, we’re going to build a function (or maybe a few of them) that we can use to check if all of the characters in a string are unique. You can go off and try to complete it on your own, then come back and see how I approached it. Or if you’d prefer, you can code along with me.

This approach to learning is similar to how the Vanilla JS Academy. If that sounds appealing to you, registration for the next session is open now.

Let’s dig in!

Some example strings

Let’s imagine we have a few strings we want to test.

let str1 = 'Hello world!';
let str2 = 'cute dog!';

The first string, str1, contains the character l three times and o twice. It should fail our test.

The second string, str2, has no duplicate characters, and should pass our test.

If you want to try this on your own, here’s a starter template. Otherwise, keep reading!

Option 1: Using a for loop and String.prototype.indexOf()

The “old school” way to handle this would be with a for loop and the String.prototype.indexOf() method.

We can loop through each character in the string using a for loop. Inside the loop, we’ll use the String.prototype.indexOf() method to get the index of the current character in our string.

This method always returns the index of the first matching character. If the current character is a duplicate, the returned index won’t match the current one and we can return false.

Otherwise, we’ll return true.

function isUniqueString (str) {
	for (let i = 0; i < str.length; i++) {
		if (str.indexOf(str[i]) !== i) return false;
	}
	return true;
}

We probably also want to ignore case, and treat capitalized and lowercase letters as the same character.

Before looping, we’ll use the String.prototype.toLowerCase() method to convert our string to all lowercase, and reassign the str variable.

function isUniqueString (str) {
	str = str.toLowerCase();
	for (let i = 0; i < str.length; i++) {
		if (str.indexOf(str[i]) !== i) return false;
	}
	return true;
}

Option 2: Using the Array.prototype.filter() method

With this approach, we can again use the String.prototype.indexOf() trick.

But instead of looping over the string, we’ll use the String.prototype.split() method to convert the string to an array. Then, we’ll use the Array.prototype.filter() method to create a new array of only unique characters.

If the first matching character in the array has the same index as the current character, we include. If not, we exclude it.

function isUniqueString2 (str) {
	let orig = str.toLowerCase().split('');
	let uniq = orig.filter(function (char, index) {
		return orig.indexOf(char) === index;
	});
}

Finally, we can compare the length of the original array to the new one with duplicates removed.

If they’re the same length, all characters are unique. If not, there were duplicates.

function isUniqueString2 (str) {
	let orig = str.toLowerCase().split('');
	let uniq = orig.filter(function (char, index) {
		return str.indexOf(char) === index;
	});
	return orig.length === uniq.length;
}

Option 3: Using Set()

The Set object is a newer addition to JavaScript that lets you store unique values. Each value in a Set can only appear once. You can use it to remove duplicates from arrays.

Just like our last attempt, we’ll use the String.prototype.split() method to convert our string into an array.

Then, we’ll pass it into the new Set() constructor, then pass the returned Set object into the Array.from() method, to get an array of unique characters.

function isUniqueString3 (str) {
	let orig = str.toLowerCase().split('');
	let uniq = Array.from(new Set(orig));
}

Just like with the Array.prototype.filter() method, we can now compare the length of the original array and the one with duplicates removed.

If they have the same length, there were not duplicates. Otherwise, there were.

function isUniqueString3 (str) {
	let orig = str.toLowerCase().split('');
	let uniq = Array.from(new Set(orig));
	return orig.length === uniq.length;
}

Wrapping up

You can download the completed source code here.

So which approach should you use? I personally like using Set(). I think it provides the most easy-to-read and understand solution. But that’s just, like… my opinion. You may prefer one of the other methods, and that’s fine, too!

If you enjoyed this article, you’ll love my Vanilla JS Academy workshop. Registration is open now, so don’t miss it!