JavaScript is a very forgiving language. It’s easy to write code that runs but has mistakes in it.
In this article, we’ll look at using the spread syntax for calling functions and the use of template strings instead of using string concatenation.
Using Spread Syntax Instead of .apply()
The spread syntax lets us call functions with an array spread into a comma-separated list of arguments in our function.
It’s a lot easier than the old way, where we have to call apply method on a function with an array of arguments to call a function with many arguments.
For instance, with the old apply method, to get a minimum of an array of numbers with the Math.min method, we’ve to write the following code:
const min = Math.min.apply(null, [1, 2, 3, 4, 5]);
In the code above, the apply method call’s first argument is the value of this , which is null because Math.min is a static method, so we don’t need to set a value for this .
The 2nd argument is the array of arguments that we want to pass into the method.
Therefore, we get the value 1 for min , which is the smallest value in the array.
With the spread syntax on function calls, we don’t have to do all that to call a function to spread an array of arguments into a comma-separated list of arguments of a function.
We can just use the ... operator to spread an array of arguments into a comma-separated list of arguments.
To call Math.min with the spread syntax, we can just write the following:
const min = Math.min(...[1, 2, 3, 4, 5]);
As we can see, we get the same return value of 1 from the method call, but we’ve to type a lot less to do the same thing. Also, we don’t have to use the apply method to call it with a list of arguments.
Using Template String Literals Instead of String Concatenation
Template string literals is another great feature that’s released with ES6. It lets us interpolate expressions into our strings so that we get a dynamic string.
This is much better than string concatenation since that gets confusing very quickly with all those + signs to concatenate strings.
For instance, instead of writing the following code:
const greeting = 'hi';
const firstName = 'jane';
const lastName = 'smith';
const greetingStr = greeting + ', ' + firstName + ' ' + lastName;
which is confusing when we read it with all the + signs and quotes. We write the following code with template strings:
const greeting = 'hi';
const firstName = 'jane';
const lastName = 'smith';
const greetingStr = `${greeting}, ${firstName} ${lastName}`;
In the code above, we used template string literals, which lets us interpolate expressions into our string with the ${} delimiter.
We insert the greeting , firstName , and lastName variables straight into the template string literal.
It’s much clearer since we don’t have to deal with the + operators and quotes everywhere.
Also, template strings are delimited by backticks, so we can use single and double quotes for quoting text rather than as string delimiters.
It’s also sensitive to spaces and line breaks so we can use it to make multiline strings without much trouble.
To make a multiline string, we just have to write the following:
const greeting = 'hi';
const firstName = 'jane';
const lastName = 'smith';
const greetingStr = `${greeting},
${firstName} ${lastName}`;
Then we get that the value of greetingStr is:
hi,
jane smith
That’s great since the old way of creating multiline strings is with the linebreak character and concatenation.
So we had to write something like the following to create a multiline string:
const greeting = 'hi';
const firstName = 'jane';
const lastName = 'smith';
const greetingStr = greeting + ',n' + firstName + ' ' + lastName;
In the code above, we added an extra n after the , to create a new line.
If we have more newline characters to create line breaks, then the code will get more confusing.
Conclusion
The spread syntax and template string literals are both great features of modern JavaScript.
The spread syntax lets us spread an array into a comma-separated list of arguments in our JavaScript code.
Template string literals let us interpolate JavaScript expressions into our code, which is much better than concatenating them all together. It also lets us create multiline strings without adding line break characters explicitly.
