3

I am new in ES6. I am trying to log a concatenated string (string+spread argument) on console. But, I am unable to concatenate it. Here is the code line:

var arr1 = [1,2,3,4,5];
var arr2 = [6,7,8,9,10];

//below line 
console.log("Spreading an array iterable: " + ...arr1);
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Day 1: Spread Operator</title>
</head>
<body>


</body>
</html>
VLAZ
  • 26,331
  • 9
  • 49
  • 67
MdFarzan
  • 320
  • 4
  • 11
  • If you want to concatenate the array elements with the string, you can just do --> `"Spreading an array iterable: " + arr1`. Array will be converted to a string before being concatenated. – Yousaf Sep 14 '20 at 11:24
  • 1
    It's not an operator. You cannot use this syntax wherever you want. It's part of array literal, object literal and function definitions. https://stackoverflow.com/a/37152508/218196 – Felix Kling Sep 14 '20 at 11:45

2 Answers2

4

You could just spread ... the array as parameters for console.log.

console.log is a function which takes arguments and diplays them in a line, separated by space.

Here, the first value is a string and all following parameters are the elements of the array. ... takes an iterable and convert the elements into arguments.

var arr1 = [1, 2, 3, 4, 5];

console.log("Spreading an array iterable: ", ...arr1);
Nina Scholz
  • 376,160
  • 25
  • 347
  • 392
  • Thanks it's working. But could you explain how it's working with , (comma symbol) instead of + (concatenation symbol)? – MdFarzan Sep 14 '20 at 11:24
  • 2
    @MdFarzan with `arr = [1, 2, 3]` the line `console.log(...arr)` is equivalent to `console.log(1, 2, 3)`. The spread syntax will result in a call to `console.log` with each member of the array as an argument. `console.log("Spreading an array iterable: ", ...arr1);` just means `console.log("Spreading an array iterable: ", 1, 2, 3, 4, 5);` or "print `"Spreading an array iterable: "` and `1`, and `2`, and `3`, and `4`, and `5`" – VLAZ Sep 14 '20 at 11:30
0

The spread operator works in an array only [...arr1]

When you try to do

console.log("Spreading an array iterable: " + ...arr1);

The + operator defines a string context. In a string context the spread operator doesn't work. It's a syntax error. You need to use the spread operator in an array literal [] or like Nina's answer as a function parameter (or inside an object literal, but that does not apply here).

So in the line

console.log("Spreading an array iterable: " + [...arr1]);

the + operator also establishes a string context, but now the spread operator is inside an array literal. This coerces the toString() method of the array.

See the MDN doc
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_array_literals

var arr1 = [1,2,3,4,5];
var arr2 = [6,7,8,9,10];

//below line 
console.log("Spreading an array iterable: " + [...arr1]);
console.log("Spreading an array iterable: " + [...arr1, ...arr2]);
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Day 1: Spread Operator</title>
</head>
<body>


</body>
</html>

The Syntax section says it all

For function calls:
myFunction(...iterableObj);

For array literals or strings:
[...iterableObj, '4', 'five', 6];

For object literals (new in ECMAScript 2018):
let objClone = { ...obj };

yunzen
  • 32,854
  • 11
  • 73
  • 106