miguelmota / javascript-idiosyncrasies

A bunch of Javascript idiosyncrasies to beginners.

JavaScript idiosyncrasies

This is a collection of things in JavaScript that may not be well recognized, espcially to beginners.

Disclaimer: Some of these snippets are simply to demonstrate the quirky parts of JavaScript and by no means encourage best practices and should never be seen in production code.

---

In no particular order:

Q. What's the result?

(function() {
    var foo = new Object();
    var bar = new Object();
    var map = new Object();

    map[foo] = 'foo';
    map[bar] = 'bar';

    return map[foo];
})();

A.

"bar"

JSBin | JSBin explained

Q. What's the result?

function f() {
    return 'foo';
}
(function() {
    if (1 === 0) {
        function f() {
            return 'bar';
        }
    }
    return f();
})();

A.

"bar"

JSBin | JSBin explained

Q. What's the result?

(function() {
    return NaN === NaN;
})();

A.

false

JSBin | JSBin explained

Q. What's the result?

(function() {
    function foo() {
        return 'a';
    }

    return foo();

    function foo() {
        return 'b';
    }
})();

A.

"b"

JSBin | JSBin explained

Q. What's the result?

(function(limit) {
  for (var i = 0; i < limit; i++) {
    setTimeout(function() {
      console.log(i);
    }, 0);
  }
})(3);

A.

3
3
3

JSBin | JSBin explained

Q. What's the result?

(function(a, b) {
  arguments[1] = 3;
  return b;
})(1, 2);

A.

3

JSBin | JSBin explained

Q. What's the result?

(function(a, b, c) {
  delete arguments[0];

  return arguments.length;
})(1, 2, 3);

A.

3

JSBin | JSBin explained

Q. What's the result?

(function() {
    return (function (a, b) {}).length;
})();

A.

2

JSBin | JSBin explained

Q. What's the result?

(function(a, b) {
   var foo, bar;

   foo = (bar = a, b);

   return foo;
})(1, 2);

A.

2

JSBin | JSBin explained

Q. What's the result?

(function(undefined) {
  var foo;
  return foo === undefined;
})(true);

A.

false

JSBin | JSBin

Q. What's the result?

(function(n) {
    return ~(n);
})(-3);

A.

2

JSBin | JSBin explained

Q. What's the result?

(function(n) {
    return ~~n;
})(-1.5);

A.

-1

JSBin | JSBin explained

Q. What's the result?

(function(x) {
    return !!x;
})('a');

A.

true

JSBin | JSBin explained

Q. What's the result?

(function() {
    return typeof null === 'null';
})();

A.

false

JSBin | JSBin explained

Q. What's the result?

(function() {
    return +(new Date())
})();

A.

1393812837139

JSBin | JSBin explained

Q. What's the result?

(function() {
    return (new Date()).valueOf();
})();

A.

1393812845834

JSBin | JSBin explained

Q. What's the result?

(function() {
    return ''+(new Date());
})();

A.

"Sun Mar 02 2014 18:14:01 GMT-0800 (PST)"

JSBin | JSBin explained

Q. What's the result?

(function() {
    var foo = 'a';
    (function(foo) {
        foo = 'b';
    })(foo);
    return foo;
})();

A.

"a"

JSBin | JSBin explained

Q. What's the result?

(function() {
    return arguments.toString();
})();

A.

"[object Arguments]"

JSBin | JSBin explained

Q. What's the result?

(function() {
    return (function(){}) === (function(){});
})();

A.

false

JSBin | JSBin explained

Q. What's the result?

(function(n) {
    return n === new Number(n);
})(10);

A.

false

JSBin | JSBin explained

Q. What's the result?

(function(x) {
    return new String(x) === x;
})('a');

A.

false

JSBin | JSBin explained

Q. What's the result?

(function() {
    return [1+1] === [2];
})()

A.

false

JSbin | JSBin explained

Q. What's the result?

(function() {
    return {foo: 'bar'} === {foo: 'bar'};
})();

A.

false

JSBin| JSBin explained

Q. What's the result?

(function() {
    for(;;);
    return 1;
})();

A.

*Infinite loop*

JSBin | JSBin explained

Q. What's the result?

(function() {
    return ['10','10','10','10'].map(parseInt);
})();

A.

[10, NaN, 2, 3]

JSBin | JSBin explained

Q. What's the result?

(function() {
    var o = {
        toString: function() {
            return 'a';
        },
        valueOf: function () {
            return 1;
        }
    };

    return o + o;
})();

A.

2

JSBin | JSBin explained

Q. What's the result?

(function() {

  var f = function g() {
    return 1;
  };

  return g();

})();

A.

ReferenceError: g is not defined

JSBin | JSBin explained

Q. What's the result?

(function() {
  return void (1+1);
})();

A.

undefined

JSBin | JSBin explained

Q. What's the result?

(function() {

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

  a = [1,2];

  return a === b;

})();

A.

false

JSBin | JSBin explained

Q. What's the result?

(function() {
    var x = 1;

    return (function () {
        return x;

        var x = 2;
    })();
})();

A.

undefined

JSBin | JSBin explained

Q. What's the result?

(function(n) {
    var even = function (num) {
        return (num === 0) || !(even(num - 1))
    };

    var _even = even;

    even = void 0;

    return _even(n);
})(2);

A.

TypeError: undefined is not a function

JSBin | JSBin explained

Q. What's the result?

(function() {
    var n;

    function name() {
        return this.name
    };

    n = name.bind({name: 'foo'});
    n = n.bind({name: 'bar'})

    return n();
})();

A.

"foo"

JSBin | JSBin explained

Q. What's the result?

(function() {
    return ('3' > '12') === ('03' > '12');
})();

A.

false

JSBin | JSBin explained

Q. What's the result?

(function() {
    return Math.pow(2,53) === (Math.pow(2,53) + 1);
}();

A.

true

JSBin | JSBin explained

Q. What's the result?

(function() {
    return Math.pow(2,1024) === Infinity;
})();

A.

true

JSBin | JSBin explained

Q. What's the result?

(function() {
    return (Infinity - 100) === Infinity;
}();

A.

true

JSBin | JSBin explained

Q. What's the result?

(function() {
    return (0.1 + 0.2 === 0.3);
})();

A.

false

JSBin | JSBin explained

Q. What's the result?

(function() {
    return (0.1).toFixed(20);
})();

A.

"0.10000000000000000555"

JSBin | JSBin explained

Q. What's the result?

(function() {
    return parseFloat('3.3.4');
})();

A.

3.3

JSBin | JSBin explained

Q. What's the result?

(function() {
    return 010;
})();

A.

8

JSBin | JSBin explained

Q. What's the result?

(function() {
    return (parseInt('10000000000000000', 10) ===
            parseInt('10000000000000001', 10)
    );
})();

A.

true

JSBin | JSBin explained

Q. What's the result?

(function(n) {
    return (Function)('var n = n || 2; return n;')(n);
})(1);

A.

2

JSBin | JSBin explained

Q. What's the result? (assuming window scope)

var a = 1;
b = 1;

(function() {
  return (delete window.a) === (delete window.b);
})();

A.

false

JSBin | JSBin explained

(function(x) {
  var isMatch,
      regex = /[\w]/gi;

  return (regex.test(x) === regex.test(x));
})('a');

A.

false

JSBin | JSBin explained

Q. What's the result?

(function() {
    return ![];
})();

A.

false

JSBin | JSBin explained

Q. What's the result?

(function() {
    return +[];
})();

A.

0

JSBin | JSBin explained

Q. What's the result?

(function() {
    return [][[]];
})();

A.

undefined

JSBin | JSBin explained

Q. What's the result?

(function() {
    return +!+[];
})();

A.

1

JSBin | JSBin explained

Q. What's the result?

(function() {
    return []+[];
})();

A.

""

JSBin | JSBin explained

Q. What's the result?

(function() {
    return true + 1;
})();

A.

2

JSBin | JSBin explained

Q. What's the result?

(function() {
    return 1 / '';
})();

A.

Infinity

JSBin | JSBin explained

Q. What's the result?

(function() {
    return 1 * null;
})();

A.

0

JSBin | JSBin explained

Q. What's the result?

(function() {
    return new Array() == false;
})();

A.

true

JSBin | JSBin explained

Q. What's the result?

(function() {
  if ([]) {
    return [] == false;
  }
})();

A.

true

JSBin | JSBin explained

Q. What's the result?

(function() {
  return ''.concat(null);
})();

A.

"null"

JSBin | JSBin explained

Q. What's the result?

(function(a, b) {
  return a + + b;
})('a','b');

A.

"aNaN"

JSBin | JSBin explained

Q. What's the result?

(function() {
  Object.prototype.foo = 'foo';

  return foo;
})();

A.

"foo"

JSBin | JSBin explained

Q. What's the result?

(function() {
  return 1000 === 1e3;
})();

A.

true

JSBin | JSBin explained

Q. What's the result?

(function() {
  return 9999999999999999;
})();

A.

10000000000000000

JSBin | JSBin explained

Q. What's the result?

(function() {
  (function() {
    var a = b = 1;
  })();

  return typeof a === typeof b;
})();

A.

false

JSBin | JSBin explained

Q. What's the result?

(function() {
  return Array(3).map(function(o) { return 'a'; });
})();

A.

[undefined, undefined, undefined]

JSBin | JSBin explained

Q. What's the result?

(function() {
  var foo = [0,1,2];
  foo[10] = 10;
  return foo.filter(function(n) { return n === undefined; });
})();

A.

[]

JSBin | JSBin explained

Q. What's the result?

(function(x) {
  var ret = null;

  switch(x) {
    case 'A':
        ret = 'A';
        break;
    default:
        ret = 'unknown';
        break;
  }

  return ret;
})(new String('A'));

A.

"unknown"

JSBin | [JSBin explained](http://jsbin.com/leyaqamuru/1/edit?html,js,consol:w jke)

Q. What's the result?

(function() {
  var x = {};

  return x.prototype === Object.getPrototypeOf(x);
})();

A.

false

JSBin | JSBin explained

Q. What's the result?

(function() {
  function foo() {}
  foo.name = 'bar';

  return foo.name;
})();

A.

"foo"

JSBin | JSBin explained

Q. What's the result?

(function() {
  return Array(5).join(',').length;
})();

A.

4

JSBin | JSBin explained

Q. What's the result?

(function(x) {
  return x++ + ++x;
})(2);

A.

6

JSBin | JSBin explained

Q. What's the result?

(function() {
  'use strict';

  let type = typeof foo;
  let foo = 1;

  return type;
})();

A.

ReferenceError: foo is not defined

---

License

MIT

javascript-idiosyncrasies's Issues

Incorrect sample or explanation

It is not a correct sample, or explanation of sample is not correct, because [0][[]] is undefined too

(function() {
return [][[]];
})();

Explaination about these example

It is great collection. Beginners do not understand why example gives unexpected result. Can you please give explanation about it for each example?

should be 1?

(function() {
    var x = 1;
    return (function () {
        return x;
        var x = 2;
    })();
})();

Make jsbin optional by including explanations

This is a fun resource, but I find using it somewhat troublesome because one needs to jump between jsbin and your repo. If you are keen to suggestions, I propose refactoring the guide so that jsbin becomes optional.