Accidentally Using the Assignment Operator
- This if statement returns true (maybe not as expected), because 10 is true:
let x = 0;
if (x = 10) {...}
let x = 0;
if (x = 0) {...}
Expecting Loose Comparison
In regular comparison, data type does not matter. This if statement returns true:
let x = 10;
let y = "10";
if (x == y) // true
In strict comparison, data type does matter. This if statement returns false:
let x = 10;
let y = "10";
if (x === y) // false
switch statements use strict comparison
let x = 10;
switch(x) {
case "10": alert("Hello"); // no alert. should use case 10:
}
Confusing Addition & Concatenation
let x = 10;
x = 10 + 5; // Now x is 15
let y = 10;
y += "5"; // Now y is "105"
Misunderstanding Floats
let x = 0.1;
let y = 0.2;
let z = x + y // the result in z will not be 0.3. but 0.30000000000000004
let z = (x * 10 + y * 10) / 10; // z will be 0.3
Undefined is Not Null
You can test if an object exists by testing if the type is undefined
if (typeof myObj === "undefined")
but it will throw exception if
if (myObj === null)
if (myObj === undefined)
How to test a obj is not empty
if (typeof myObj !== "undefined" && myObj !== null)
type coercion
let x = 'hello' && 123; // x === 123
Incorrect references to this
Game.prototype.restart = function () {
var self = this; // save reference to 'this', while it's still this!
this.timer = setTimeout(function(){
this.clearBoard(); // this doesn't work here.
self.clearBoard(); // oh OK, I do know who 'self' is!
}, 0);
};
NaN
console.log(NaN == NaN); // false
console.log(NaN === NaN); // false
console.log(isNaN(NaN)); // true
Incorrect use of function definitions inside for loops
var elements = document.getElementsByTagName('input');
var n = elements.length; // assume we have 10 elements for this example
for (var i = 0; i < n; i++) {
elements[i].onclick = function() {
console.log("This is element #" + i); // Actual Result: This is element #10
};
}
Fix it with a function
var makeHandler = function(num) { // outer function
return function() { // inner function
console.log("This is element #" + num);
};
};
for (var i = 0; i < n; i++) {
elements[i].onclick = makeHandler(i+1);
}