Are you just dipping your toes into the ocean of JavaScript? Brace yourself for some unexpected trips over the most deceptive pebbles.
The Hide and Seek Game of "this"
JavaScript's "this" is a bit of a chameleon, often referred to as the "Dr. Jekyll and Mr. Hyde" of JavaScript. When "this" is used outside of an object, it refers to the global object. But within a method, "this" refers to the object that invokes the method. If you're not careful, you could find yourself playing an unending game of hide and seek with "this".
Wrong Way:
function car() {
this.speed = 100;
setTimeout(function() {
console.log(this.speed); // Output: undefined
}, 1000);
}
new car();
Right Way: use arrow function.
function car() {
this.speed = 100;
setTimeout(() => {
console.log(this.speed); // Output: 100
}, 1000);
}
new car();
The Existential Crisis: undefined versus null
Ah, the age-old debate. Are you absent (null) or just undefined? While null is an assigned value that means "no value or no object", undefined means a variable has been declared but has not yet been assigned a value. You could say null is philosophical about its emptiness, while undefined is blissfully ignorant.
let emptyFridge = null; // You know it's empty
let myFridge; // Where did it go?
The Rush Hour: Loading Scripts Before the DOM Party Begins
Don't be that guy who shows up at the party before the host. Loading scripts before the DOM is loaded is like going on stage without your script. The actors (HTML elements) aren't ready for you yet!
Wrong Way:
<script src="myscript.js"></script>
<body>
<!-- Here be dragons...or maybe just HTML -->
</body>
Right Way:
<body>
<!-- Here be dragons...or maybe just HTML -->
<script src="myscript.js"></script>
</body>
Naming Variables: A Tragicomedy
The road to programming hell is paved with badly named variables. Keep in mind: 'x', 'temp', 'stuff' are not real names, they're the scribbles of a deranged coder.
Wrong Way:
let x = 10; // What does 'x' even mean?
Right Way:
let numberOfApples = 10; // Oh, now it makes sense!
The Extra Piece of Luggage: Redundant else Statements
It's always tempting to pack that extra pair of socks "just in case". But with else statements, more isn't always merrier. Don't be the coder who packs for a blizzard when it's a sunny day.
Wrong Way:
if (condition) {
return x;
} else {
return y;
}
Right Way:
if (condition) {
return x;
}
return y;
The Deceptive Twins: Assignment and Equality Operators
Assignment operator (=) is the obedient child that sets a value to a variable. Equality operator (==) is the inquisitive one, checking if two values are equal. But watch out for their evil twin (===), who checks equality and datatype! Don't get fooled by their family resemblance.
let x = 10; // Assigns the value 10 to x
console.log(x == "10"); // Returns true
console.log(x === "10"); // Returns false, different datatypes
Enjoy your journey with JavaScript. And remember, we've all tripped over these same stones!
Top comments (1)
Tank you much for your amusing and instructive post! We should also mention the possible pitfalls of variable initializers:
default is used, if x is undefined. But also if
(x == 0)or(x==null), which is often not desired. There are two possible solutions: