Skip to content

Latest commit

 

History

History
89 lines (74 loc) · 6.09 KB

coercion.md

File metadata and controls

89 lines (74 loc) · 6.09 KB
Raw

Coercion in JavaScript refers to the automatic or implicit conversion of values from one data type to another. It's a fundamental aspect of JavaScript because it's a dynamically typed language, meaning you don't have to specify what type of data a variable contains. JavaScript automatically determines the data type for you and this can lead to some interesting behavior when you're comparing values.

When you use the == operator, JavaScript performs coercion if the types of the two values being compared are different. It tries to convert one or both of the values to a common type before making the comparison. This is known as "loose" or "abstract" equality.

For example:

console.log(1 == "1"); // true

In this case, JavaScript is coercing the string "1" to the number 1 before making the comparison, so it returns true.

However, if you use the === operator, no coercion is done. This is known as strict equality. If the types of the values are different, it simply returns false.

console.log(1 === "1"); // false

In this case, because the types are different (number and string), and no coercion is done, it returns false.

Kyle Simpson, in his "You Don't Know JS" series, encourages developers to understand and use coercion to their advantage, rather than avoiding it. He suggests that coercion can make your code more readable and understandable if used correctly: for example he says that you shoud use explicit types in the codebase rather than implicit ones. It's important to understand the rules of how coercion works in JavaScript to avoid unexpected results.

How to handle coercion:

  1. Use Strict Equality (===) and Inequality (!==): These operators do not perform type coercion, and they will only return true if both the type and value are the same.
console.log(1 === "1"); // false
console.log(1 !== "1"); // true
  1. Explicitly Convert Types: If you want to compare values of different types, it's often a good idea to explicitly convert them to the same type. This makes your code clearer and helps avoid unexpected results from implicit coercion.
console.log(Number("1") === 1); // true
console.log(String(1) === "1"); // true
  1. Be Careful with Truthy and Falsy Values: JavaScript has a concept of "truthy" and "falsy" values. All values are truthy unless they are defined as falsy. Falsy values are false, 0, "" (empty string), null, undefined, and NaN. When comparing these values with ==, JavaScript can give unexpected results due to coercion.
console.log(0 == false); // true, because both are falsy
console.log("" == false); // true, because both are falsy
console.log(null == undefined); // true, because both are falsy

Coercion in Arrays

When using coercion with arrays in JavaScript, there are several potential pitfalls to be aware of:

  1. Unexpected String Conversion: When an array is used in a context that requires a string, JavaScript will convert the array to a string by joining its elements with commas. This can lead to unexpected results if you're not aware of it.
console.log([1, 2, 3] + [4, 5, 6]); // "1,2,34,5,6"
  1. Unexpected Number Conversion: When an array is used in a context that requires a number, JavaScript will convert the array to a number by joining its elements with commas and then converting the resulting string to a number. This can lead to unexpected results if you're not aware of it.
console.log([1, 2, 3] - [4, 5, 6]); // -3
  1. Loose Equality with Arrays: When comparing an array with a primitive value using ==, JavaScript will try to convert the array to a primitive value. This can lead to unexpected results.
console.log([0] == false); // true, because [0] is converted to its primitive value "0"

Coercion in Objects

Yes, also with objects there are a lot of pitfalls:

  1. Unexpected String Conversion: When an object is used in a context that requires a string (in this case the + operator, that performs a string concatenation), JavaScript will convert the object to a string by calling its toString() method. This can lead to unexpected results if you're not aware of it.
  console.log({} + []); // "[object Object]"
  1. Unexpected Number Conversion: When an object is used in a context that requires a number, JavaScript will convert the object to a number by calling its valueOf() method. This can lead to unexpected results if you're not aware of it.
  console.log({} - []); // NaN
  1. Loose Equality with Objects: When comparing an object with a primitive value using ==, JavaScript will try to convert the object to a primitive value. This can lead to unexpected results.
  console.log({} == false); // false, because {} is not converted to a primitive value
  1. Loose Equality with Arrays: When comparing an array with an object using ==, JavaScript will try to convert the array to an object. This can lead to unexpected results.
  console.log([0] == {}); // false, because [0] is converted to its primitive value "0"
  1. Loose Equality with Dates: When comparing a date with an object using ==, JavaScript will try to convert the date to an object. This can lead to unexpected results.
  console.log(new Date() == {}); // false, because new Date() is converted to its primitive value "0"
  1. Loose Equality with Primive values: When comparing a string with an object using ==, JavaScript will try to convert the string to an object. This can lead to unexpected results.
  console.log("hello" == {}); // false, because "hello" is not converted to a primitive value
  console.log(123 == {}); // false, because 123 is not converted to a primitive value
  console.log(true == {}); // false, because true is not converted to a primitive value

Functions also present numerous challenges when it comes to coercion, but it's likely that you'll encounter coercion more frequently with arrays and objects.