My Top 3 JavaScript Pitfalls (So Far)

Photo by Blake Connally on Unsplash

JavaScript is a powerful and flexible language, but it’s not without its quirks. In fact, some of its features can be downright disgusting if you’re not prepared for them. These pitfalls can lead to confusing behavior and hard-to-find bugs. In the following video, I’ll delve into some of the most disgusting JavaScript pitfalls, from global variables and automatic semicolon insertion to type coercion and the peculiarities of the this keyword. Buckle up and get ready to dive deep into the weird world of JavaScript!

1. Automatic Semicolon Insertion: JavaScript automatically inserts semicolons at the end of lines, which can cause unexpected behavior.

One might expect the result here to be an object with the key “name” and the value “John”. However, if you implement a function that returns as shown below, the result will be undefined. Believe it or not, this simply has to do with the object being returned on the line after the “return” statement. Here, JavaScript inserts a semicolon after the return, preventing the expected object from being returned.

Example:

return
{
  name: "John"
}; // This will return undefined, not an object

2. The this keyword: In JavaScript, the value of this is determined by how a function is called. It can be confusing for beginners as well as for advanced programmers.

The value of this in JavaScript is largely dependent on the context in which a function is called. It can be influenced by various factors such as the object that invoked it, whether it was called with 'new', whether strict mode is in place or if call / apply / bind methods were used.

The execution context for an execution is global by default. That means that if code is executed as part of a simple function call, this refers to a global object. In a browser environment, the global object is the window object. In a NodeJS environment, a special object named global is the value of this. So let’s give a brief overview:

Alone, this refers to the global object:

console.log(this); // logs global object (e.g., Window in a browser)

In a function, this refers to the global object:

function test() {
  console.log(this); // logs global object
}
test();

In a function, in strict mode, this is undefined:

"use strict";
function test() {
  console.log(this); // logs undefined
}
test();

In an event, this refers to the element that received the event:

button.onclick = function() {
  console.log(this); // logs the button element
};

Methods like call(), apply(), and bind() can refer this to any object:

function test() {
  console.log(this); // logs {a: 1}
}
test.call({a: 1});

When a function is called with new, this refers to the newly created object:

function Car(make, model) {
  this.make = make;
  this.model = model;
}

let myCar = new Car('Toyota', 'Corolla');
console.log(myCar); // logs { make: 'Toyota', model: 'Corolla' }

As you can see, in JavaScript, the this keyword is considered a challenging concept because its value is dynamically scoped and can change based on the context.

3. Non-Blocking Behavior: JavaScript is an asynchronous and concurrent programming language. It is non-blocking programming language, which means that code doesn’t necessarily execute in the order you might expect.

Example:

console.log('1');
setTimeout(function() {
  console.log('2');
}, 0);
console.log('3'); // logs 1, 3, 2

The shown code snippet showcases JavaScript’s non-blocking behavior. In this snippet, ‘1’ is logged first, then the setTimeout function is called with a delay of 0 milliseconds, then '3' is logged. The setTimeout function is non-blocking and schedules a callback function to run after the specified delay (0 milliseconds in this case), but does not pause to wait for it. As a result, '3' is logged before '2', even though '2' appears earlier in the code than '3'.

In contrast, many other programming languages, such as Python, operate in a blocking manner. To illustrate, let’s consider a similar code snippet in Python:

import time

print('1')
time.sleep(0)
print('2')
print('3')

In this Python snippet, ‘1’ would be printed first, then the program would sleep for 0 seconds (effectively doing nothing, but the sleep function would still block), then ‘2’, and finally ‘3’. This is because Python’s sleep function is blocking, meaning that it halts the execution of the program for the specified amount of time. Therefore, in Python, the output would be '1', '2', '3', which is the order that the print statements appear in the code.

And there you have it folks, my top 3 JavaScript pitfalls to watch out for. I hope this video has been informative and helpful in navigating the sometimes confusing world of JavaScript. Remember, it’s all about understanding and mastering these quirks that can turn you from a good JavaScript programmer into a great one.

If you liked this video, don’t forget to hit that like button and consider subscribing for more content like this. Feel free to drop any questions or comments below, and I’ll do my best to respond. Until next time, happy coding and … Cheers.