DEV Community

codeToBug
codeToBug

Posted on • Originally published at codetobug.dev

Tripping Over Code: An Amusing Exploration of Beginner JavaScript Blunders

#javascript #webdev #beginners

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();
Enter fullscreen mode Exit fullscreen mode

Right Way: use arrow function.

function car() {
    this.speed = 100;
    setTimeout(() => { 
        console.log(this.speed); // Output: 100 
    }, 1000);
}
new car();
Enter fullscreen mode Exit fullscreen mode

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?
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Right Way:

<body>
<!-- Here be dragons...or maybe just HTML -->
<script src="myscript.js"></script>
</body>
Enter fullscreen mode Exit fullscreen mode

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?
Enter fullscreen mode Exit fullscreen mode

Right Way:

let numberOfApples = 10; // Oh, now it makes sense!
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Right Way:

if (condition) {
  return x;
}
return y;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Enjoy your journey with JavaScript. And remember, we've all tripped over these same stones!

Top comments (1)

Collapse
 
efpage profile image
Eckehard • • Edited

Tank you much for your amusing and instructive post! We should also mention the possible pitfalls of variable initializers:

function test(x){
     let someVar = x || "default"
}
Enter fullscreen mode Exit fullscreen mode

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:

function test(x = default){  // use default parameter
    let someVar = x
}  

function test(x){
    let someVar = (x === undefined) ? "default" : x // explicit test
}
Enter fullscreen mode Exit fullscreen mode

Read next

techtobe101 profile image

Jenkins CI/CD Freestyle Project: A Comprehensive Guide

Tech Tobé -

osalumense profile image

Understanding Type Annotations in TypeScript

Stephen Akugbe -

slobodan4nista profile image

The Compounded Interest of Good Software: An example of Carousel Components

Slobi -

paulund profile image

How to debug axios requests

Paulund -