Share 20 strange JS expressions and see how many correct answers you can get

JavaScript Is a very fault-tolerant programming language , Many expressions that are illegal in other programming languages are JavaScript Can work normally in .

This leads to a lot of strange code . Do you want to challenge it ？

Challenge

In this challenge , You will see 20 An odd expression , And guess the output .

1.

true + false

2.

**1.**

3.

[1, 2, 3] + [4, 5, 6]

4.

0.2 + 0.1 === 0.3

5.

10,2

6.

!!""

7.

+!![]

8.

true == "true"

9.

010 - 03

10.

"" - - ""

11.

null + 0

12.

0/0

13.

1/0 === 10 ** 1000

14.

true++

15.

"" - 1

16.

(null - 1) - "1"

17.

38 * 4343 * 2342+ (“true” — 0)

18.

5 + !5 + !!5

19.

[] + [1] + 2

20.

1 + 2 + "3"

Results and Analysis

true + false

Try to use the addition operator between two Boolean values （+） when , They will be converted into numbers .

And we all know that true Should be converted to 1,false Should be converted to 0. therefore true+false return 1.

[,,,].length

[,,,]  Output an array with three empty slots . The last comma is the comma at the end .

You can think of it that way .

[,]     ==> [empty,]
[,,]    ==> [empty, empty,]
[,,,]   ==> [empty, empty, empty,]

therefore  [,,,].length  return 3.

[1, 2, 3] + [4, 5, 6]

When you try to use the addition operator between arrays （+） when , They will be converted to strings .

When converting an array to a string , Array of  toString()  Method is called .toString() The method is JavaScript For internal use , When an array needs to be displayed as text , It will connect its elements with commas .

[1, 2, 3].toString() ==> '1, 2, 3'
[4, 5, 6].toString() ==> '4, 5, 6'

therefore

[1, 2, 3] + [4, 5, 6] ==> '1, 2, 3' + '4, 5, 6' ==> "1,2,34,5,6"

0.2 + 0.1 === 0.3

Because floating point numbers are difficult to express accurately in computers , Mathematically 0.1 and 0.2 In the computer, only approximate numbers can be used to express .

0.1+0.2 The result is not entirely 0.3. not only JavaScript, Other programming languages have the same problem .

10, 2

comma （,） stay JavaScript Is also a legal operator , It evaluates each operand （ From left to right ）, And return the value of the last operand .

therefore ,10,2 return 2

!!""

"" It's an empty string , It is an imaginary value .

Be careful ：0、 An empty string ""、null and undefined They are all imaginary values .

!  It's logical " Not " Operator , hold true become false, vice versa .

If we use it twice !, That is to say !!, It will convert a normal value into a Boolean value . therefore !"" return  false.

+!![]

Arrays are all true values , Even empty arrays . therefore !![] Will return true.

!![]; // -> true

and + No. will convert the truth value into its numerical representation : 1, therefore  +!![]  return  1.

true == "true"

Double equality operator （==） Check whether the two operands are equal , And return a boolean result .

According to the abstract double comparison rules , These two values are converted into numbers during comparison .

true == "true" ==> Number(true) == Number("true") ==> 1 == NaN

therefore ,ture =="true"  return false.

010 - 03

Here's a little trick ： If a number with 0 start , So in JavaScript It is regarded as an octal digit . therefore ：

010 - 03 ==> 8 - 3 ==> 5

in addition ：

• If a number with 0b start , So it's in JavaScript Is regarded as binary digits .

• If a number with 0x start , It's in JavaScript Is treated as a hexadecimal digit .

** ""--"" **

This seems to be a wrong syntax , But it does work .

Empty strings can be converted to Boolean values false Or numeric value 0. therefore  -""  by  0

null + 0

As we said before ,null Is an imaginary value . It will be converted to Boolean false Or numeric value 0. So the result returns  0.

0/0

This is an illegal mathematical expression . equation 0/0 There is no meaningful numerical answer , The output is just NaN.

1/0 === 10 ** 1000

although 1/0 As before, it is also an illegal mathematical expression . But when the divisor is not 0 when ,JavaScript Think the result of this expression is Infinity.

and 10**1000 It's a big number ,JS This number cannot be represented correctly .(JavaScript The highest integer value in is 2^53-1). therefore 10 * 1000 It is also regarded as infinite (Infinity).

Infinity is always equal to another infinity , therefore 1/0 === 10 ** 1000 return true.

true++

This is nothing special , This is just a grammatical error .

""- 1

Although the addition operator （+） Used for both numbers and strings , But the subtraction operator （-） It's useless for strings , therefore JavaScript Interpret it as an operation between numbers . An empty string will be forced by the type 0.

"" - 1 ==> Number("") - 1 ==> 0 - 1 ==> -1

therefore  "" — 1  return  -1

** (null - 1) - "1" **

As mentioned above .

null ==>  0
(null - 1) ==> -1
"1" ==> 1

therefore  (null — 1) — “1”  return  -2

38 * 4343 * 2342+ ("true" - 0)

You may wonder JS Is so crazy , So that it will string "true" Convert to Boolean true The number of represents . However , It's not that crazy . What actually happened was , It attempts to convert strings into numbers , But failed .

Number("true"); // -> NaN

stay JavaScript In digital operation of , As long as one value is NaN, The final result of the operation must be NaN.38 * 4343 * 2342 Just a smoke bomb .

5 + !5 + !!5

As mentioned above .

• 0、 An empty string ""、null and undefined They are all imaginary values .

• Non zero numbers are true values .

therefore ：

!5 ==> 0
!!5 ==> 1

**[] + [1] + 2 **

Trying to use the addition operator between arrays （+） when , They will be converted to strings .

[] ==> ''
[1] ==> '1'
[] + [1] ==> '1'
'1' + 2 ==> '12'

So the result is '12'.

1 + 2 + "3"

JavaScript Perform these operations from left to right . When the number 3 And string 3 When adding , String connection will take precedence .

1 + 2; // -> 3
3 + "3"; // -> "33"

summary

To be frank , These challenges do not provide any value for our coding skills , So you should not write this kind of code in actual projects

however , Use these skills as a pretense between friends and colleagues 13, Isn't it a very interesting thing ？

author ：Marina Mosti   translator ： The front end little wisdom source ：medium original text ：https://medium.com/frontend-canteen/20-useless-but-funny-challange-for-javascript-develor-9eea39bb8efb