Kau-Boys

If you only ever deal with English strings in your code, you can stop reading now. Unless you are curious and want to learn something new, then please stay. 😉

In languages like German, we have characters that don’t exist in the English alphabet. Some look similar to other characters, but some are extra. And in German we only have 4 of them, other languages have many more.

How strings are usually sorted

When you have an array of strings, there are different ways in how they are sorted. Let’s look at some examples:

console.log(['c', 'b', 'a', 'B', 'A', 'C'].sort())
// (6) ['A', 'B', 'C', 'a', 'b', 'c']

If you ever wrote some code and sorted it with a simple sorting function, you might be aware that many of them use the order of the characters in the ASCII table. That’s why we see the capital letters first, followed by the lower-case letters.

That might be just what we expect and want for English. But let’s throw in some German Umlaut into the array:

console.log(['ä', 'b', 'a', 'B', 'Ä', 'A'].sort())
// (6) ['A', 'B', 'a', 'b', 'Ä', 'ä']

Even if you don’t speak German and don’t know about the order of letters, this doesn’t look correct, right? The capital “Ä” comes after all other lower-case letters. Since the Umlauts are not part of the ASCII table (like most letters not include in “Basic Latin”), JavaScript is using their UTF-16 code unit values so sort them. These also represent each character with a number. The letter “Ä” for example has the numeric value 228, while “z” has 122, and that’s why it is ordered like above.

Using the Intl.Collator object for natural sorting

The solution for this is really very easy. The sort() function for an array can take a callback function as a parameter. This function get passed two values of the array. It should return a negative number, if the first value is smaller than the second one, return a positive number, if the opposite is true, or return 0, if both have the same value.

But we don’t have to write such a callback function for every language ourselves. Instead, we can use the Intl.Collator object. For our German umlaut example, the code would look like this:

console.log(['ä', 'b', 'a', 'B', 'Ä', 'A'].sort(new Intl.Collator('de').compare));
// (6) ['a', 'A', 'ä', 'Ä', 'b', 'B']

Not only do we now have our umlaut next to the similarly looking letters, we also get each lower-case letter followed by its capital letters. This is also what you would expect from a “dictionary sorting”.

Using the compare function directly

As mentioned earlier, the sort() function expects a callback that returns a negative, or positive number, or a 0. And this is exactly what the function does. We can explicitly call that function (and not only reference its name) and pass in two letters to compare:

new Intl.Collator('de').compare('ä', 'a')
// 1
new Intl.Collator('de').compare('a', 'ä')
// -1
new Intl.Collator('de').compare('a', 'a')
// 0

To demonstrate, that this function is not simply using a static list of numbers for each character, but really sorts by a specific language, here is a good example for that:

new Intl.Collator('de').compare('ä', 'z')
// -1
new Intl.Collator('sv').compare('ä', 'z')
// 1

The Swedish language, which I’m currently trying to learn, also has the “ä” letter. But it is sorted differently than a German umlaut, and you would find words starting with almost at the end of a Swedish dictionary (only followed by words starting with “ö”).

Using advanced options

There are some options you can also pass as an object to the sort() function, like in this example, when you want to have capital letters first:

console.log(
	['ä', 'b', 'a', 'B', 'Ä', 'A'].sort(
		new Intl.Collator(
			'de', 
			{
				caseFirst: 'upper'
			}
		).compare
	)
);
// (6) ['A', 'a', 'Ä', 'ä', 'B', 'b']

You can find some more options on the documentation page or a full list in the ECMA specification. There are even some wild “languages” like “de-u-co-phonebk“, to order an array like it would appear in a German phone book – in case you know what I am talking about. 😁

Bonus: Sorting number string

I don’t want to write about all options, but one might be really helpful in your code. If you even sorted an array with numbers as string, you know that alphanumeric sorting does not work:

console.log(['1', '2', '11', '101', '3'].sort());
// (5) ['1', '101', '11', '2', '3']

But with the option numeric, you get what you want (the first “language” parameter might not be important here):

console.log(
	['1', '2', '11', '101', '3'].sort(
		new Intl.Collator(
			'en',
			{
				numeric: true
			}
		).compare
	)
);
// (5) ['1', '2', '3', '11', '101']

Just what we wanted to have. 😊

Conclusion

Sorting strings by their natural order in a specific language can really make a big difference on how usable your code is (or if it would even break things, if done incorrectly). With the Intl.Collator object, this is made rather easy in JavaScript. Other programming languages don’t provide such a powerful tool for you.

Many programming languages have this. Instead of defining all parameters for a function, you can pass any number of parameters into a function and then work with them.

Functions with static parameters

Before we get into dynamic parameters, let us introduce a function we can then work on. How about one adding two numbers?

function sum( a, b ) {
	return a + b;
}

console.log( sum( 4, 5 ) ); // 9

Nothing special here, right? But what would happen if we just add more parameters to the function call?

console.log( sum( 4, 5, 6 ) ); // 9

Nothing would happen, since the function is only using the first two parameters. But you not get an error. JavaScript is simply not using the third parameter.

The arguments object

Even if we don’t use the third parameter, it is still available. But how can we use it, when we don’t have a parameter name for it? We can use the arguments object to get all the parameters, even if we haven’t even defined any parameter for the function:

function sum() {
  let total = 0;
  for (const number of arguments) {
    total += number;
  }
  return total;
}

console.log( sum( 4, 5 ) ); // 9
console.log( sum( 4, 5, 6 ) ); // 15

The arguments object works very much like an array. You can access the first parameter with arguments[0], etc. In our sum() function, we don’t even have any arguments at all, as mentioned before. But you can also combine defined and additional ones:

function someFunction( a, b ) {
	console.log( a ); // 4
	console.log( b ); // 5 
	console.log( arguments ); // [4, 5, 'a string', Array(2), ...]
}

someFunction( 4, 5, 'a string', [ 'an', 'array' ] );

The arguments object always contains all parameters passed to the function, even those with a name. The object has some other properties, you can read more about in the documentation.

The rest parameter

A more modern way to use dynamic parameters in JavaScript is the rest parameter. Let’s start with a simple example again. We implement our sum() function and use the rest parameter this time:

function sum( ...numbers ) {
	let total = 0;
	for ( const number of numbers ) {
		total += number;
	}
	return total;
}

console.log( sum( 4, 5 ) ); // 9
console.log( sum( 4, 5, 6 ) ); // 15

The only parameter here is “...numbers“, and this is the “rest parameter”. Another good example is this one:

function calc( operation, ...numbers ) {
	switch ( operation ) {
		case "sum":
			return numbers.reduce( ( total, num ) => total + num, 0 );
		case "multiply":
			return numbers.reduce( ( product, num ) => product * num, 1 );
		case "subtract":
			return numbers.reduce( ( difference, num ) => difference - num );
		case "divide":
			return numbers.reduce( ( quotient, num ) => quotient / num );
		default:
			console.error(`Invalid operation "${operation}"`);
			return;
	}
}

console.log( calc( "sum", 4, 5, 6 ) ); // 15
console.log( calc( "multiply", 4, 5, 6  ) ); // 120

Now the “rest” makes sense, right? We have some normal parameters, followed by the rest parameter, which contains all other parameter, or simply, the rest of the parameters. You can always only have one rest parameter, and it must be the last parameter. This example also shows a good use case for the console.error() function from our previous blog post.

Bonus: the arguments object used as the rest parameter

In our first example on the rest parameter, you wouldn’t even need to have the ...numbers parameter, since it’s the only parameter. You could just have used argument object in combination with the spread operator like this:

function sum() {
  let total = 0;
  const numbers = [...arguments]; // Convert arguments object to a real array
  for (const number of numbers) {
    total += number;
  }
  return total;
}

This conversion in line 3 is not really necessary, since the arguments object behaves very similar to an array, but nonetheless you can do it and might have a use case for this. But as soon as you have more (named) parameters, that probably wouldn’t work anymore.

Conclusion

A function with a fixed number of arguments might be too inflexible, especially, when you deal with arrays or lists. In these cases, the rest parameter or the arguments object can help to write some nice and short functions.

You might now ask yourself: What?! That was also my first reaction, when I’ve heard about labeled statements. So what are they, and when can they be used?

Are they goto statements?

Many programming languages have goto statements. Some programming languages even only added them in later version, like PHP did with version 5.3, and this is how it would look like in PHP:

$array = [
	'one' => [ 1, 2, 3 ],
	'two' => [ 4, 5, 6 ],
];

foreach ( $array as $key => $numbers ) {
	foreach ( $numbers as $number ) {
		if ( $number === 4 ) {
			goto fourFound;
		}
	}
}

echo "There is no 4 in the array";
goto end;

fourFound:
printf( "There is a 4 in array '%s'", $key );

end:

In this example, we have two foreach loops. The code tries to and find a 4 in a two-dimensional array. As soon as a 4 is found, we can stop the loops and print the result. To leave the loop(s), this code is using a goto statement to “go to” line 17 to the label fourFound, where we print out the result. There is also a second goto at line 15, which would move to the end label. In any case, only one echo/printf function would be called.

Many experienced developers would see multiple ways to improve that code, but I hope it can demonstrate, how a goto in PHP (and many other languages work) works. But what are labeled statements in JavaScript? They are similar to the labels in PHP shown here, but there is no goto statement and those labels can only be used in combination with either the break or the continue keyword.

How to use continue and break in your code?

If you have a loop, you can break out of the loop, by using the break statement like this:

const numbers = [1, 2, 3, 4, 5, 6];

for (let i = 0; i < numbers.length; i++) {
	if (numbers[i] === 4) {
		console.log(`Found 4 at index ${i}`);
		break;
	}
}

This code would iterate through the numbers array, but as soon as it found the 4, it would “break out” of the array and not look at the other values.

The continue statement can be used to stop the current iteration and start with the next one. Like in this modified example:

for ( let i = 0; i < numbers.length; i++ ) {
	if ( numbers[i] % 2 !== 0 ) {
		continue;
	}
	if ( numbers[i] === 4 ) {
		console.log( `Found 4 at index ${i}` );
		break;
	}
}

In line 2, we check, if the current number is odd. If that’s the case, it can’t be the number 4 we are searching for. We then use the continue statement, to start with the next iteration, so the condition in line 5 would not be executed.

How to skip an “inner loop”?

Let’s take the first code example from PHP again and use the break statement instead of a goto statement:

$array = [
	'one' => [ 1, 2, 3 ],
	'two' => [ 4, 5, 6 ],
];

foreach ( $array as $key => $numbers ) {
	foreach ( $numbers as $number ) {
		if ( $number === 4 ) {
			break 2;
		}
	}
}

if ( $number === 4 ) {
	printf( "There is a 4 in array '%s'", $key );
} else {
	echo "There is no 4 in the array";
}

In PHP, you can use break 2 to not only exit the “inner loop”, but also the “outer loop”. So the number after break indicates how many “control structures” you want to break out from. Something similar is possible with continue 2, where the program would continue with the next iteration of the “outer loop”.

In JavaScript however, this is not possible. You cannot add any number after a break or continue statement. And that’s where labeled statements come into play.

Breaking out an inner loop in JavaScript

If we try to create the same code as above in JavaScript, we can use a labeled statement like in this code:

var array = {
	one: [1, 2, 3],
	two: [4, 5, 6],
};

outerLoop:
for ( var key in array ) {
	var numbers = array[key];
	for ( var i = 0; i < numbers.length; i++ ) {
		if ( numbers[i] === 4 ) {
			break outerLoop;
		}
	}
}

if ( numbers[i] === 4 ) {
	console.log( `there is a 4 in array ${key}'` );
} else {
	console.log( "There is no 4 in the array" );
}

The label does not need to be on its own line, it can also be in one line for the for loop. For better readability, I just formatted it like this.

If you prepend each loop with a label, you could also have use break statement to jump to any loop. The same is true for continue.

What should I use this for?

So should you use labeled statements? My advice would be similar to the one given by the xkcd comic on goto: Don’t use it!

If you end up writing some code that would profit from something like break 2, continue 2, or the JavaScript equivalent using a labeled statement, this would be a clear sign for me, that this piece of code should be refactored.

Instead of using a goto to jump out of a loop, put that loop inside a function and use return. And for nested loops, you can also use nested functions in loops.

There are plenty of things to optimize in the code above, not only the nested loops. With some modern JavaScript functions, it could look like this:

const array = {
	one: [1, 2, 3],
	two: [4, 5, 6],
};

function findTheFour(obj) {
	for (const property in obj) {
		if (obj[property].includes(4)) {
			return property;
		}
	}
	return null;
}

const found = findTheFour(array);
if ( found ) {
	console.log( `there is a 4 in array ${found}'` );
} else {
	console.log( "There is no 4 in the array" );
}

Isn’t that a lot easier to read? Using the includes() function for arrays, we can even safe the “inner loop”. And we do not need any labeled statement.

Conclusion

You may ask yourself why I’ve shown you this feature of JavaScript, and then advise against the usage of it. Well, there is code out there using it which you might not understand, if you have never seen labeled statements or goto in other programming languages. And I haven’t even shown you all the things you can do with it. So feel free to read the documentation on it, and maybe you do find a use case, where it can really benefit your code base, what ever case that might be.