JavaScript: The Strange and Wonderful

I’ve been thinking about this post for quite some time. I just haven’t had the time to write it. But, JavaScript is both a weird and wonderful programming language. It has some features which are totally NOT the norm but make it cool and interesting to work with. While there are many flavors of JavaScript out there in the wild (ES1 -> ES6, TypeScript, CoffeeScript, etc.) the weirdness remains no matter how your JavaScript is written.

So, what prey-tell am I speaking about? Well, let’s take a look at some the weird wonderfulness:
TIP: You can copy/paste the below examples into the developer tools console

Loose Equality

Can this statement ever evaluate to true?
(a == 2 && a == 3 && a == 4)

Well, yes… yes it can. Let’s take a look: (taken from this article)

const a = {
  num: 0,
  valueOf: function() {
    return this.num += 1;
const equality = (a==1 && a==2 && a==3);
console.log(equality); // true

We just replace the built in valueOf function available on any object. Which is one of the wonderful and weird features of JavaScript.

What about this one? Again, yes and it’s because of the loose equality of JavaScript objects.

let a = 2;
let b = "2";
console.log((a == b)); // true

We can go on and on with examples of loose equality.

Function Declarations, Manipulations and Miscellany

A JavaScript function can be declared many ways. You can create an anonymous function, a declared function or use the Function constructor.  Here’s an example of each:

// Declared function
function foo(a, b) {
  return a * b;

// Anonymous function
let foo = function(a, b) {
  return a * b;

// Function constructor
let foo = new Function('a', 'b', 'return a * b;')

That’s cool, but you can also pass that function around just like a variable:

// Pass a declared function around like a variable
function foo(a, b) {
  return a*b;
let myFunc = foo;
console.log(myFunc(2, 3));

So, what if you want to “override” a method on an object, is that possible? Again, the answer is yes. Let’s take a look at overriding the function:

let _origOpen =; = function() {
  // Do Stuff....
_origOpen.apply(this, arguments);

Something else I don’t think is available in other programming languages is the presence of an arguments object inside a function. arguments is not really an array, but an “array like” object. It contains a length property and indices.

function foo(a, b) {
  for (let i = 0; i < arguments.length; i++) {
foo(2, 3);
// 2
// 3

A self calling function? While I haven’t seen this in other programming languages it is widely used in JavaScript and can be useful. Just be aware that you won’t be able to call that function

// This function will run when the script is invoked
(function foo() {
  console.log('in foo');
}()); // in foo

// Can't call it tho
foo(); // Uncaught ReferenceError: foo is not defined

(function bar() {
  console.log('in bar');
})(); // in bar

// Still can't call it
bar(); // Uncaught ReferenceError: bar is not defined

let baz = function() {
  console.log('in baz');
}(); // in baz

// Can't call this one either
baz(); // Uncaught TypeError: baz is not a function


What’s this nonsense? It’s a comparison “idea” really. Here’s an example, but first you need to know what equates to falsey:

  • null
  • undefined
  • “” // Empty String
  • 0
  • false

With the above information let’s take a look:

let emptyStr = "";
let num = 0;
let someObj = {
  a: null
if (emptyStr) {
  console.log("emptyStr is Truthy", emptyStr);
}else {
  console.log("emptyStr is Falsey", emptyStr);
if (num) {
  console.log("num is Truthy", num);
}else {
  console.log("num is Falsey", num);
if (someObj) {
  console.log("someObj is Truthy", someObj);
  if (someObj.a) {
    console.log("someObj.a is Truthy", someObj.a);
  }else {
    console.log("someObj.a is Falsey", someObj.a);
  if (someObj.unknownProp) {
    console.log("someObj.unknownProp is Truthy", someObj.unknownProp);
  }else {
    console.log("someObj.unknownProp is Falsey", someObj.unknownProp);
}else {
  console.log("someObj is Falsey");

// emptyStr is Falsey
// num is Falsey 0
// someObj is Truthy {a: null}
// someObj.a is Falsey null
// someObj.unknownProp is Falsey undefined

This functionality allows you to assign default values like:

function foo(a, b) {
  a = a || 10;
  b = b || 10;
  return a * b;
console.log(foo()); // 100
// Careful with using numbers where the actual value may be 0. Line 2 and 3 would change 0 to 10.
console.log(foo(0,5)); // 50
// Here's some weirdness,this returns 0 is because we passed string 0 which evaluated to true but was then converted to a number in the return statement
console.log(foo('0',5)); // 0 

function bar(options) {
  options = options || {};
  return options;
console.log(bar({foo: 'bar'})); // {foo: 'bar'}
console.log(bar()); // {}

So what about even more weirdness with Truthy/Falsey? (Actually a lot of the below examples are the way they are because of loose equality checking).

TIP: Always use === to avoid hard to find bugs. === checks type AND value. == attempts to convert the 2 values to the same type

'' == false; // true
null == false; // false
undefined == false; // false
0 == false; // true
0 == '0'; // true
null == undefined; // true

// use === instead
'' === false: // false
0 === false; // false
0 === '0'; // false
null === undefined; // false

Declaring Variables

There are many ways to declare a variable. You can use varlet or const. Let’s take a look at each:


When declaring a variable using var that variable is always hoisted to the top of the current scope. This means you can use a variable before it is defined (please oh please don’t do this tho). It also means that variable is available to any other blocks of code within the scope.

// Using var, the variable declaration is always hoisted to the top of the current scope
function foo() {
  var bar = 'baz';
// undefined
// baz

// The JavaScript engine converts this to the following at run time
function foo() {
  var bar;
  bar = 'baz';
// undefined
// baz


When declaring a variable using let that variable is only available to the block it is declared in. You can not use a variable defined with let before it is defined.

let a = 1;
if (a === 1) {
  let a = 2;
  console.log('a inside if=', a); // a inside if= 2
console.log('a outside if=', a); // a outside if= 1


When you declare a variable with const that variable is not allowed to be changed. I’ve started using const in my code more and more but mainly as a visual indicator that the value never changes. However, as with most things JavaScript there are things you can change about a variable defined with const:

const a = 2;
const b = {
    num: 2
b.num = 3;
try {
  a = 3;
}catch (e) {
  console.log(, ':', e.message);
console.log('a=', a, 'b=', b);
// TypeError: Assignment to constant variable
// a= 2 b= {num: 3}


This is by no means a complete list. There are a lot of strange and unique things going on with JavaScript. If you want a lot of weirdness, investigate the rules and implementations of this. So while JavaScript can have a lot of weirdness I think because of it’s weirdness it’s become one of the most popular programming languages on the web. It’s everywhere nowadays and is only growing.

Until next time…. Happy Coding.

Share This: