- ‘Null’ and ‘undefined’
- ‘objects objects objects’
- Number or String?
- if it an Array?
- typeof
- function fun
After learning of a few weird ‘bugs’ that javascript produces, I became intrigued and thought it would be fun to look for more of these cases. This is by no means a full list but just some examples I found by messing with JS and searching the internet.
Null and undefined, on their own, are part of the seven instances that are treated as falsey values in JS. Maybe because they belong to this exclusive club, do they act oddly in these scenarios. Feel free to test these examples out in your terminal and watch the magic(?) happen.
null ** 2;
// 0
undefined ** null;
// 1
This already looks some sort of brain teaser where the problem is to figure out what the logic is even based on. Even mathematically (outside the scope of code) if we were to treat null as zero values, the returns don’t make sense. The first example here would look like 0**2, which would return a value of 1. The second example would look like 0**0 which has no agreed on value (either 1, 0, or undefined). Obviously, math and programming logic might be directly connected here, but the point is to try to tackle illogical outcomes through logical means.
The next five examples involve arrays ‘[]’ and objects ‘{}’. These examples are even weirder because of odd outcomes and because of the fact that these code examples would likely never be practiced in the field.
{} + {};
// '[object Object][object Object]'
{} + '{}';
// NaN
[] + {};
// '[object Object]'
{} + [];
// 0
[] + [];
// ''
Of these five examples, the second is probably the most reasonable because an object{} or string are numbers. However, you can add strings together in JS, so the oddity here is the return value of NaN as the error instead of another error. What’s curious about the first, third, and fifth example, is the fact that they return strings. Also, the fourth example returns zero. None of these values could rationally be predicted.
This next set of oddities, are probably the ones that make the most sense because they can be somewhat logically predicted, but are included in this blog because they are still interesting to explore.
1 + 2 + 3;
// 6
'1' + 2 + 3;
// '123'
1 + '2' + 3;
// '123'
1 + 2 + '3';
// '33'
The first example is completely normal, and something taught right away in most education systems. The second example is slightly weirder. We know that JS likes to add strings together and it makes sense that it would convert the number 2 into a string to create ’12’ and do the same to the number 3 to create ‘123’. The third example still does this string conversion, but only after adding two numbers. 1 + 2 is 3, 3 + ‘3’ is ’33’. The insight we can gain here is that order matters, and more than anything this is good visual practice to get used to this fact.
This next section covers the Array(); function.
Array(5);
// [<5 empty items]
Array(5) + 2;
// ',,,,2'
Array(5).join("w");
// 'wwww'
Array(5).join(2);
// '2222'
Array(5).join("w"+1);
// 'w1w1w1w1'
Array(5).join("w"-1);
// 'NaNNaNNaNNaN'
The first example here is more or less normal. If you assign a variable to this example and looked at length, it would indeed return 5 even though the array has undefined values. The second example, is odd because it converts the array to a string with the fifth (assumed) comma replaced with a 2. The third and fourth examples are more or less the same but with the letter ‘w’ and the number ‘2’ respectively. The odd part here is that the fifth (assumed) comma/placeholder is missing. The fifth example makes sense after looking at the third example here but on its own, again, out of the ordinary. The last example, again, looks normal after the third and fifth examples but it’s interesting that NaN is converted to a string and that subtracting is where JS draws the line in returning an error type.
These last few examples include typeof() and anonymous function behavior. The typeof behavior is most likely intended to work like this but is still interesting and could be used to the advantage by the savvy programmer.
typeof(Null);
// 'undefined'
typeof(Null) + 'hey';
// 'undefinedhey'
typeof(5);
// 'number'
The first example shows that ‘undefined’ is returned as string, and the second example proves it because adding a string to a string combines the two (string behavior). The third example shows that it always returns a string regardless of type.
let fn = function(){console.log('hello there')};
5 + fn;
// "5function(){ console.log('hello there') }"
'hey' +fn;
// "heyfunction(){ console.log('hello there') }"
5 + fn();
// hello there
// NaN
'hey' + fn()
// hello there
// 'heyundefined'
Here I set up a variable to equal an anonymous variable. Interestingly, adding a num or string to the variable (without calling the function), returns a string with the combination of the string and the whole function as if it were initially written as a string. However, adding a number to the variable with the function called returns NaN (after the console.log is outputted), which finally makes sense. Adding a string, instead of a number, again runs the console.log but then returns a string of the original string that was added to fn() along with ‘undefined’.
Although this information is a step away from relevant Javascript knowledge, it offers an illogical side to what is supposed to be something built on logic. It’s important to realize the faults of our tools so that we can recognize their limits and so that the next generation of that language, or any other language, can be better than the last.
Other relevant links to further your knowledge in Programming Oddity
Alejandro's blog 