Why does adding "{" "}" remove brackets from an array? (JavaScript)

Question

Example:

var test = [];
test.push( 'string', 'test'); //[ 'string', 'test' ]
console.log('{' + test + '}'); // {string,test}
console.log(typeof('{' + test + '}')); //string

How come adding the { and } removes the brackets from test? I would have expected the result of the third line to be { [string, test] }

Try just `console.log(''+test)` - the string representation of an array doesn't have brackets. — JJJ, Mar 13 '17 at 06:59
The `+` punctuator is overloaded. It can mean [arithmetic addition, string concatenation](http://www.ecma-international.org/ecma-262/7.0/index.html#sec-addition-operator-plus) or the [unary `+` operator](http://www.ecma-international.org/ecma-262/7.0/index.html#sec-unary-plus-operator). Which one is based on context. — RobG, Mar 13 '17 at 07:04
`'' + test` coerces `test` to a string: `test.toString()` gives the same result. — Web_Designer, Mar 13 '17 at 07:10
JS is a very loosely typed language. In the operations involving different types the type coercion from objects to primitives like String or Boolean are performed automatically. In this particular case the `Array.prototype.toString()` function just neglects the outer brackets and does the opposite of `String.prototype.split(",")`. — Redu, Mar 13 '17 at 10:26

score 2 · Answer 1 · answered Mar 13 '17 at 07:04

2

The reason is one of the many bad choices made when Javascript was created, and now it's too late to fix because of backward compatibiity.

An array when converted to a string becomes the concatenation of the elements converted to strings, separated by commas without wrapping [ ] markers.

This for example is the reason for which

(1 == [1])

is true in Javascript (the two have different types and their conversion to string is identical), and the reason for which defining

var a = [1], b = 1, c = [[1]];

the expression

(a == b && b == c && a != c)

is also true.

answered Mar 13 '17 at 07:04

6502

112,025
15
165
265

Why is having the string representation of an array be the element values separated by commas a bad choice when JavaScript was created? Is there a better default option that could've been implemented for when converting an array to a string? – nnnnnn Mar 13 '17 at 07:26
@nnnnnn: `[1, 2, 3]` being translated for example to `"[1, 2, 3]"` would have been better (it's what Python does). Sure most of the crazyness of `==` comes from implicit conversions (Javascript would have been better with `===` being the "default" comparison) but array->string rule adds some extra weirdness. – 6502 Mar 13 '17 at 07:51

score 1 · Accepted Answer · edited May 23 '17 at 11:46

JS performs type coercion or type conversion , which means that when 2 different data types are used together in an expression, we get an "equivalent" type.

Example

We know that true and false are booleans, not numbers. But we can still use them as numbers, because due to type coercion, true == 1 and false == 0.

Not that I am using == and not ===.

Similarly, we can do:

var a = 123;
var b = a + 1;     // 124
var c = a + true;  // 124
var d = a + '1';   // 1231

In your case, you are coercing an aray and a string. And the JS engine coerces the array to string type:

var a = [1,2,3]
console.log(a)              // [1, 2, 3]
console.log(a + '')         // "1,2,3"
console.log('{' + a + '}')  // "{1,2,3}"

score 1 · Answer 3 · edited Mar 13 '17 at 09:08

Javascript is very flexible, unfortunately in this case it's very very flexible for us understand. So what's happen in below code

console.log('{' + test + '}');

test is an Array object, but when you try to combine it with another string, JavaScript will see everything are strings, in this case test will be converted to string,test. The converting way like Array.prototype.toString(). The same thing with weak comparison (==). So we can use trick comparison (===) to avoid that

score 0 · Answer 4 · answered Mar 13 '17 at 07:05

0

That is because, when you do: '' + test; you will get string: string,test

for Array object, if it combined with any string, it will be converted to string with format: element1,element2,element3

answered Mar 13 '17 at 07:05

Xin

33,823
14
84
85

Why does adding "{" "}" remove brackets from an array? (JavaScript)

4 Answers4

Example