#shorts: Just JavaScript things

When it comes to coding in JavaScript, it’s common to encounter bugs or unexpected behavior in your code. Sometimes, these bugs can be frustrating to debug and fix. Here are some common “Just JavaScript things” that you may come across:

1. Type coercion

JavaScript is a dynamically typed language, meaning that variables can change types during runtime. This can lead to unexpected behavior when trying to compare variables of different types. For example, the following code snippet may produce unexpected results:


var x = 10;
var y = "10";

if (x == y) {
console.log("Equal");
} else {
console.log("Not equal");
}


In this case, JavaScript will coerce the string “10” to a number when comparing it to the number 10, resulting in the console logging “Equal” even though the types are different.

2. Scope and hoisting

JavaScript has function scope, meaning that variables declared inside a function are not accessible outside of that function. Additionally, JavaScript has hoisting, where variable and function declarations are moved to the top of their containing scope during compilation. This can lead to unexpected behavior if you’re not aware of how hoisting works. For example:


var x = 10;

function printX() {
console.log(x);
var x = 20;
}

printX();


In this case, the console will log undefined because the declaration of x is hoisted to the top of the function, but the assignment of 20 is not hoisted.

3. Event bubbling

When handling events in JavaScript, event bubbling can occur where events triggered on child elements “bubble up” the DOM tree and trigger handlers on parent elements. This can lead to unexpected behavior if you’re not careful with event propagation. For example:

Click me

document.getElementById("parent").addEventListener("click", function() {
console.log("Parent clicked");
});

document.getElementById("child").addEventListener("click", function(event) {
console.log("Child clicked");
event.stopPropagation();
});


In this case, without stopping event propagation with event.stopPropagation(), clicking the button will also trigger the parent click handler.

These are just a few examples of some common “Just JavaScript things” that you may encounter while coding in JavaScript. Understanding these nuances can help you become a more proficient JavaScript developer and debug more effectively when troubleshooting issues in your code.