DEV Community

loading...

Do you know these weird parts of JavaScript?

lqj profile image QJ Li ・1 min read

What?! You called JavaScript Weird? Come on dude, I have using it for years, it is the best language I have ever met.

What?!

Let's have a coffee and see if we can ask some of these questions in our next interview, hehe.

Here we go:

> 0.1 + 0.2
0.30000000000000004
Enter fullscreen mode Exit fullscreen mode
> 1 + 23 - 10
113
Enter fullscreen mode Exit fullscreen mode
> null == undefined
true

> NaN == NaN
false
Enter fullscreen mode Exit fullscreen mode
> typeof null
"object"

> typeof NaN
"number"
Enter fullscreen mode Exit fullscreen mode
> ['1', '7', '11'].map(parseInt)
(3) [1, NaN, 3]
Enter fullscreen mode Exit fullscreen mode
> function foo() {
    return 
    {
      foo: 'bar'
    }
  }
foo()
< undefined

> function bar() {
  return {
    foo: 'bar'
  }
}
bar()
> {foo: "bar"}
Enter fullscreen mode Exit fullscreen mode
> [] + []
""

> {} + {}
"[object Object][object Object]"

> [] + {}
"[object Object]"

> {} + []
0

> +!+[]
1
Enter fullscreen mode Exit fullscreen mode
3 > 2
true

3 > 2 > 1
false
Enter fullscreen mode Exit fullscreen mode
> function Test() {
}()
Uncaught SyntaxError: Unexpected token )

> var test = function() {}
undefined
Enter fullscreen mode Exit fullscreen mode

OMG JS

References:

https://blog.mgechev.com/2013/02/22/javascript-the-weird-parts

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators

https://wtfjs.com/

Discussion

pic
Editor guide
Collapse
tchaflich profile image
Thomas C. Haflich

> 0.1 + 0.2
0.30000000000000004

This is a floating point rounding error and is definitely not exclusive to JavaScript. It happens with basically any language that implements floats.

3 > 2
true

3 > 2 > 1
false

I also don't think this one is language specific. It should evaluate the same nearly anywhere that follows a left to right execution order for same-precedence operators.

A lot of the other stuff is solid "weird language spec" though. I especially like this one:

> ['1', '7', '11'].map(parseInt)
(3) [1, NaN, 3]

Took me a moment to remember what it was doing there and figure out the trick. The fact that there are two separate bits of knowledge required is especially neat.

Collapse
lqj profile image
QJ Li Author

yes, you are right about these ones, I am including them to just showcase some 'weird' / interesting parts in JS. some of them are not actually weird, it is weird only when comparing with other languages.

sorry my eye catching title is kind of misleading

Collapse
shreyasminocha profile image
Shreyas Minocha

I found that one interesting too. Took me some time.

I noticed that

['1', '7', '11'].map((n) => parseInt(n, 10))

works as expected. parseint is misinterpreting the second parameter somehow?

Then I saw docs for Array.prototype.map.

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
    // Return element for new_array
}[, thisArg])

If the callback accepts a second parameter, it passes the index of the element to it. parseint does accept two parameters, but of course, it doesn't expect an index in the third one.

[
    parseint('1', 0),
    parseint('7', 1),
    parseint('11', 2)
]

And sure enough, the output confirms my theory!

Collapse
lqj profile image
QJ Li Author

you are close, if you take a look at the api doc, you will fully understand it.

developer.mozilla.org/en-US/docs/W...

parseInt(string, radix);
Thread Thread
shreyasminocha profile image
Shreyas Minocha

Yep! I'm aware. Pretty cool.

Collapse
dhanushkadev profile image
Dhanushka madushan

1 + "23" - 10 = 113
1 + "23" takes as string concatenation operation. The results is "123". Then it subtract 13.

Still not that clear how following things works.
[] + []

{} + {}
[] + {}
{} + []
+!+[]

Collapse
lqj profile image
QJ Li Author

I thought about +!+[], it could be like these (I may be wrong)

1. `+[]` is `0` 
2. `!0` is `true` 
3. `+true` is `1`
Collapse
dhanushkadev profile image
Dhanushka madushan

I think thats the solution. It's working on console.

Collapse
ralphkay profile image
Raphael Amponsah

Some of these have got to do with associativity, coercion and auto semicolon insertion.
3>2>1 this is based on left
right asociativity of the > operator 3>2 is evaluated first, which will be true and when we evaluate true >1 it will be false coz true is equal to 1 not greater.

After a return key if the interpreter does not find anything there will be an automatic semicolon insertion and returning nothing like that in the example will be undefined. All the code below the return key would be ignored.

Collapse
ralphkay profile image
Raphael Amponsah

But the language is interestingly weird! I think we can call it WeirdScript :)

Collapse
janpauldahlke profile image
jan paul

i have seen this before here destroyallsoftware.com/talks/wat i guess.

Collapse
lautarolobo profile image
Lautaro Lobo

o my freaking god