Type conversion and casting

Type coercion (type coercion)

It is an automatic or implicit conversion of values from one data type to another (for example, a string to a number). Type conversions are similar to type conversions because they both convert values from one data type to another, with one key difference - type conversion is implicit, while type conversion can be implicit or explicit.

Examples :

Live Editor

function learnJavaScript() { const value1 = '5' const value2 = 9 let sum = value1 + value2 return sum }

function learnJavaScript() {
  const value1 = '5'
  const value2 = 9
  let sum = value1 + value2

  return sum
}

Result

Loading...

In the example above, JavaScript casts the number 9 into a string, and then concatenates the two 2️⃣ values together, resulting in the string 59. JavaScript had a choice between string or number and chose to use string.

The compiler could convert the string 5 to a number and return the sum of 14, but it did not. To get this result, you need to explicitly convert the string 5 to a number using the Number() method:

Live Editor

function learnJavaScript() { const value1 = '5' const value2 = 9 let sum = Number(value1) + value2 return sum }

function learnJavaScript() {
  const value1 = '5'
  const value2 = 9
  let sum = Number(value1) + value2

  return sum
}

Result

Loading...

Type conversion

Means the transfer of data from one data type to another. Implicit conversion occurs when the compiler automatically assigns (assigns) data types, but the source code may also explicitly require the conversion to complete.

String conversion

String conversion occurs when you want to represent something as a string. For example, we can use the String (value) function to convert a value to a string :

Live Editor

function learnJavaScript() { let value = true // boolean value = String(value) return typeof value }

function learnJavaScript() {
  let value = true // boolean

  value = String(value)
  return typeof value
}

Result

Loading...

The transformation takes place in an obvious way. true becomes"true"

Numeric conversion

Numerical conversion occurs in math functions and expressions.

Live Editor

function learnJavaScript() { let value = '6' / '2' return value }

function learnJavaScript() {
  let value = '6' / '2'

  return value
}

Result

Loading...

We can use the Number (value) function to explicitly convert value to a number :

Live Editor

function learnJavaScript() { let str = '123' let num = Number(str) return typeof num }

function learnJavaScript() {
  let str = '123'
  let num = Number(str)

  return typeof num
}

Result

Loading...

Explicit conversion is often used when we expect to get a number from a string context, such as text fields in forms.

If the string cannot be explicitly cast to a number, then the conversion result will be NaN (Not-a-Number, "not a number "). For example :

Live Editor

function learnJavaScript() { let age = Number('Any string instead of a number') return age }

function learnJavaScript() {
  let age = Number('Any string instead of a number')

  return age
}

Result

Loading...

Numeric conversion rules:

Value	Converted to ...
undefined	NaN
null	0
true / false	1 / 0
string	White space is trimmed at the edges. Further, if an empty string remains, then we get 0, otherwise a number is "read" from a non-empty string. On error, the result is NaN.

Examples:

Number('   123   ') // 123
Number('123z') // NaN (error reading the number in place of the "z" character)
Number(true) // 1
Number(false) // 0
Number(null) // 0
Number(undefined) // NaN

Note that null and undefined behave differently. So, null becomes zero, while undefined is cast to NaN.

Boolean conversion

The logical transformation is the simplest. Occurs in logical operations, but can also be performed explicitly with the function⚙️ Boolean (value).

Boolean conversion rules:

Values that are intuitively "empty" such as 0, an empty string, null, undefined, and NaN become false. All other values become true.

Boolean(1) // true
Boolean(0) // false
Boolean('Привет!') // true
Boolean('') // false

The shorter way of the Boolean function, the double NOT (!!) is used to convert values to a boolean type:

!!'non-empty string' // true
!!null // false

Note that the line with zero "0" is true

Some languages (for example PHP) interpret the string " 0 " as false. But in JavaScript, if a string is not empty, then it is always true

Boolean('0') // true
Boolean(' ') // space is also true (any non-empty string is true)

Problems?

Write to Discord chat.

Questions:

Which function should you use for string conversion?

1. String (value)
2. Boolean (value)
3. Number (value)

What is typecasting?

1. Transferring data from one type to another
2. Converting values ​​from one data type to another
3. Representation of something as a string

What is the key difference between typecasting and typecasting?

1. Type casting is explicit, and type conversion is implicit
2. Type casting is implicit, and type conversion is explicit
3. Type conversion is implicit, and type conversion can be both explicit and implicit

When would the conversion result be NaN?

1. When a string cannot be explicitly cast to a number
2. When a number cannot be explicitly cast to a string
3. When there is an error in the code

What do “empty” values ​​become when converted?

1. null
2. true
3. false

In order to understand how much you learned this lesson, take the test in the mobile application of our school on this topic or in our telegram bot.

Links

1. MDN web docs - Typecasting
2. Code for Teens: The Perfect Beginner's Guide to Programming, Volume 1: Javascript - Jeremy Moritz
3. JavaScript.ru
4. Integer arithmetic

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Dmitriy Vasilev 💵

Resoner2005 🐛 🎨 🖋