Weird JavaScript Features

JavaScript is a versatile programming language that allows developers to create dynamic and interactive web applications. However, it also has some strange and unexpected features that can sometimes catch developers off guard. In this blog post, we'll explore some of the weird parts of JavaScript.

1. NaN

NaN stands for "Not a Number." It's a special value in JavaScript that represents an undefined or unrepresentable value. However, what's weird about NaN is that it's not equal to anything, even itself. For example, if you try to compare NaN to itself using the "===" operator, it will return false:

console.log(NaN === NaN); // false

To check if a value is NaN, you need to use the built-in isNaN() function:

console.log(isNaN(NaN)); // true
console.log(isNaN(42)); // false

2. Implicit type coercion

JavaScript is a dynamically typed language, which means that variables can hold values of any type. However, sometimes JavaScript will automatically convert one type to another in certain situations. This is called "implicit type coercion." For example:

console.log("42" + 42); // "4242"

In the example "42" + 42, JavaScript performs implicit type coercion by converting the number 42 to a string and then concatenating it with the string "42". The result of this operation is the string "4242".
This behavior of implicit type coercion can lead to unexpected results and can cause bugs if not properly understood and accounted for in code.

3. Truthy and falsy values

In JavaScript, any value can be evaluated as either "truthy" or "falsy." A truthy value is a value that's considered true in a Boolean context, while a falsy value is considered false. Here's a list of the falsy values in JavaScript:

• false
• 0
• ""
• null
• undefined
• NaN

Any other value is considered truthy. This can be useful in certain situations, but it can also lead to unexpected behavior if you're not aware of it. For example:

if ("") {
  console.log("This won't be printed");
}

if ([]) {
  console.log("This will be printed");
}

In the first example, the empty string is falsy, so the code inside the if statement won't be executed. In the second example, the empty array is truthy, so the code inside the if statement will be executed.

4. Scope and hoisting

JavaScript has a concept of "scope," which determines where variables are accessible. However, JavaScript also has a concept of "hoisting," which can make it seem like variables are accessible before they're actually declared. For example:

console.log(foo); // undefined
var foo = "bar";

In this example, the variable "foo" is hoisted to the top of the current scope, so it's accessible even before it's declared. However, its value is undefined until the assignment is made.

5. The "this" keyword

The "this" keyword in JavaScript refers to the object that the current function belongs to. However, the value of "this" can be tricky to determine in certain situations. For example:

var obj = {
  foo: "bar",
  baz: function() {
    console.log(this.foo);
  }
};
obj.baz(); // "bar"
var qux = obj.baz;
qux(); // undefined

In this example, the "this" keyword inside the "baz" function refers to the "obj" object, so the first call to "baz" logs "bar" to the console.However, when we assign the "baz" function to the "qux" variable and call it using the function invocation syntax qux(), the value of "this" is no longer the "obj" object, but instead refers to the global object (window in a browser, or global in Node.js). Since the global object doesn't have a property named "foo", the result of calling qux() is undefined.

This behavior can be unexpected and can cause errors if not properly accounted for in code. To avoid such issues, you can use functions like bind(), call(), or apply() to explicitly set the value of this inside a function.