8. Type Coercion and Short-Circuit Evaluation
JavaScript
3 minutes read (About 485 words)

8. Type Coercion and Short-Circuit Evaluation

What is Type coercion?

  • Explicit coercion / Type casting: developer intentionally converting value types

    1
    2
    3
    var x = 10;

    var str = x.toString();

  • Implicit coercion / Type coercion: Type automatically converted by the JavaScript engine regardless of developer intent.

    1
    2
    3
    4
    5
    var x = 10;

    var str = x + '';

    // x = Number 10, str = Sring 10

    Does reassignment occur when type coercion occur?

    No. It only takes a moment to type when evaluating expressions.

The developer can use implicit type conversion intentionally.

Implicit type coercion

The JavaScript engine performs implicit type coercion when evaluating expressions, taking into account the context of the code.

1
2
3
4
'10' + 2  // '102'
5 * '10'  // 50
!0         // true
if(1) {}   // if(true)

When an implicit type coercion occurs, it automatically converts the type to one of the primitive types such as string, number, or boolean.

Coercion to String type

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// Number type
0 + ''              // "0"
-0 + ''             // "0"
1 + ''              // "1"
-1 + ''             // "-1"
NaN + ''            // "NaN"
Infinity + ''       // "Infinity"
-Infinity + ''      // "-Infinity"

// Boolean type
true + ''           // "true"
false + ''          // "false"

// null type
null + ''           // "null"

// undefined type
undefined + ''      // "undefined"

// Symbol type
(Symbol()) + ''     // TypeError: Cannot convert a Symbol value to a string

// onject type
({}) + ''           // "[object Object]"
Math + ''           // "[object Math]"
[] + ''             // ""
[10, 20] + ''       // "10,20"
(function(){}) + '' // "function(){}"
Array + ''          // "function Array() { [native code] }"

Coercion to Number type

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// String type
+''             // 0
+'0'            // 0
+'1'            // 1
+'string'       // NaN

// Boolean type
+true           // 1
+false          // 0

// null type
+null           // 0

// undefined type
+undefined      // NaN

// Symbol type
+Symbol()       // TypeError: Cannot convert a Symbol value to a number

// object type
+{}             // NaN
+[]             // 0
+[10, 20]       // NaN
+(function(){}) // NaN

Coercion to Boolean type

When evaluating a non-boolean value with a boolean, there are only 6 values that evaluate to false.

  • Falsy value
    • false
    • undefined
    • null
    • 0, -0
    • NaN
    • ‘’ (empty string)
  • Truthy value
    • non-falsy values
1
2
3
4
5
6
7
// The following conditional statements all execute code blocks.
if (!false)     console.log(false + ' is falsy value');
if (!undefined) console.log(undefined + ' is falsy value');
if (!null)      console.log(null + ' is falsy value');
if (!0)         console.log(0 + ' is falsy value');
if (!NaN)       console.log(NaN + ' is falsy value');
if (!'')        console.log('' + ' is falsy value');

Explicit type coercion

  • Call the wrapper object constructor used to create the Wrapper object without new

    1
    2
    String(1);		// '1'
    Number('1');	// 1

  • Using the built-in method provided by JavaScript

    1
    2
    (1).toString();	// '1'
    parseInt('-1');	// -1

  • Using implicit type coercion

    1
    2
    3
    1 + '';			// '1'
    + '-1';			// -1
    '-1' * 1;		// -1

Short-Circuit Evaluation

The logical AND operator && and the logical OR operator || return the operand that determined the logical evaluation. This is called short-circuit evaluation.

  • Logical OR operator ||

    1
    'Cat' || 'Dog'	// 'Cat'
    • The logical OR operator || returns true even if only one of the two operands evaluates to true.
    • The OR operator || returns the first operand that determines the result of the logical operation, that is, the string ‘Cat’.

  • Logical AND operator &&

    1
    'Cat' && 'Dog'	// 'Dog'
    • The AND operator && returns true when both operands evaluate to true.
    • The logical AND operator && returns the second operand that determined the result of the logical operation, the string ‘Dog’.

  • Short evaluation means that && and || return the operand that determined the logical evaluation.

  • Used to reduce TypeErrors

    1
    2
    3
    4
    5
    6
    var elem = null;

    console.log(elem.value);              // TypeError: Cannot read property 'value' of null
    console.log(elem && elem.value); // null

    if (elem) console.log(elem.value);
# 자바스크립트
9. Object Literal
7. Control Flow Statement
Follow

Links

Tag Cloud

ADT Abstraction Access Modifier Ajax Algorithm Angluar Angular Array Babel C C# Call by Object Reference Call by Reference Call by Value Class Computational Thinking DOM Data Type Dependency Injection Destructuring ECMA ES6 Encapsulation Event Expression FDS12 First-class object Fisrt-class Function Function HTML, CSS Hackaton Higher Order Function Hoisting Inheritance Math Modlue Node.js Number OOP Object Observable Operater Pipe Polymorphisim Programming Promise Prototype Python Quick sort REST API React Reactive Programming Recursion RegExp Routing SPA Scope Service Single Page Application Statement String Subsequence Substring TIL TypeScript Unity Variable Web Browser Webpack Wrapper global variable immutable javaScript local variavble mutable npm object pass by reference pass by value primitive this window 실행 컨텍스트 일급 객체 자바스크립트

Categories

Recent

Archives

Tags

ADT 1
Abstraction 2
Access Modifier 1
Ajax 1
Algorithm 18
Angluar 1
Angular 10
Array 1
Babel 1
C 1
C# 1
Call by Object Reference 1
Call by Reference 1
Call by Value 1
Class 2
Computational Thinking 1
DOM 1
Data Type 1
Dependency Injection 1
Destructuring 1
ECMA 1
ES6 1
Encapsulation 2
Event 1
Expression 1
FDS12 2
First-class object 1
Fisrt-class Function 1
Function 1
HTML, CSS 5
Hackaton 2
Higher Order Function 1
Hoisting 1
Inheritance 1
Math 1
Modlue 1
Node.js 2
Number 1
OOP 3
Object 1
Observable 1
Operater 1
Pipe 1
Polymorphisim 1
Programming 1
Promise 1
Prototype 1
Python 5
Quick sort 1
REST API 1
React 1
Reactive Programming 1
Recursion 1
RegExp 1
Routing 2
SPA 1
Scope 1
Service 1
Single Page Application 1
Statement 1
String 1
Subsequence 1
Substring 1
TIL 85
TypeScript 2
Unity 1
Variable 1
Web Browser 1
Webpack 1
Wrapper 1
global variable 1
immutable 1
javaScript 2
local variavble 1
mutable 1
npm 1
object 1
pass by reference 1
pass by value 1
primitive 1
this 1
window 1
실행 컨텍스트 1
일급 객체 1
자바스크립트 39

Categories

Recent

Archives

Tags

ADT 1
Abstraction 2
Access Modifier 1
Ajax 1
Algorithm 18
Angluar 1
Angular 10
Array 1
Babel 1
C 1
C# 1
Call by Object Reference 1
Call by Reference 1
Call by Value 1
Class 2
Computational Thinking 1
DOM 1
Data Type 1
Dependency Injection 1
Destructuring 1
ECMA 1
ES6 1
Encapsulation 2
Event 1
Expression 1
FDS12 2
First-class object 1
Fisrt-class Function 1
Function 1
HTML, CSS 5
Hackaton 2
Higher Order Function 1
Hoisting 1
Inheritance 1
Math 1
Modlue 1
Node.js 2
Number 1
OOP 3
Object 1
Observable 1
Operater 1
Pipe 1
Polymorphisim 1
Programming 1
Promise 1
Prototype 1
Python 5
Quick sort 1
REST API 1
React 1
Reactive Programming 1
Recursion 1
RegExp 1
Routing 2
SPA 1
Scope 1
Service 1
Single Page Application 1
Statement 1
String 1
Subsequence 1
Substring 1
TIL 85
TypeScript 2
Unity 1
Variable 1
Web Browser 1
Webpack 1
Wrapper 1
global variable 1
immutable 1
javaScript 2
local variavble 1
mutable 1
npm 1
object 1
pass by reference 1
pass by value 1
primitive 1
this 1
window 1
실행 컨텍스트 1
일급 객체 1
자바스크립트 39
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×