YDKJS. Types Grammar

YDKJS. Roadmap

• Get Started
• Scope & Closures
• Objects & Classes
• Types & Grammar
• Sync & Async
• ES.Next & Beyond

Tasks

Why types❓

Static vs. Dynamic typing

• • Assigned to a variable
  • Works at compiletime
    (& while data fetching)
• • Assigned to a value
  • Works at runtime

Strong vs. Weak typing

👮 🚔

JS has❓

JS has is –

Data types in JS

Data types in JS

Values & Operations

• Primitives
• Complexes (References or Objects)

Primitives

• string – "kottan"
• number – 0, 1337, NaN, Infinity
• boolean – true, false
• null – null
• undefined – undefined
• symbol – Symbol("foo")
• bigint – 1n, 9007199254740991n

Everything else – Object

typeof

• typeof 'Kottans 🐈‍⬛' // "string"
• typeof false // "boolean"
• typeof 1422 // "number"

• typeof {} // "object"
• typeof [] // "object"

• typeof null // "object"
• typeof function() {} // "function"

Magic (Primitive) Methods 🔮

        14.22.toString() // "14.22"
      

        // JS Under The Hood
        new Number(14.22).toString() // "14.22"
      

Boxing Wrapper 📦

        const str = new String('Kottans 🐈‍⬛')
        const n = new Number(1422)
        const hasSomething = new Boolean(false)
        

           
          if (hasSomething) {
            console.log('Bo!👻')
          }
        
        

           
          String(1422) // "1422"
          Number('1422') // 1422
          Boolean(0) // false
        
      

References data types

• Object
• Array
• Function
• RegExp
• Error
• Date
• And more...

Object – always reference

Literals for References

        new Object()
        new Array(1, 2, 3)
        new Function('a, b', 'return a + b')
        new RegExp('\w', 'g')
      

        {}
        [1, 2, 3]
        function(a, b) { return a + b }
        /\w/g
      

Most have a protected constructor: new Array(1, 2, 3) OR Array(1, 2, 3) // [1, 2, 3]

[[Class]]

        const obj = {}
        const arr = []
        

           
          Object.prototype.toString.call(obj) // "[object Object]"
          Object.prototype.toString.call(arr) // "[object Array]"
        
      

Symbol.toStringTag

        const kottan = {
          [Symbol.toStringTag]: '🐈‍⬛'
        } 
        

           
          Object.prototype.toString.call(kottan) // "[object 🐈‍⬛]"
        
      

What to Read ✍️

• JavaScript.info – Data types
• You Don't Know JS – Types & Grammar
• TC39. Data Types and Values

Questions❓

Type Conversions 🧶

WTFJS

Kinds 🦄

• ToNumber
• ToString
• ToBoolean
• ToPrimitive

ToBoolean / Boolean(something)

• Any object – always true
• Everything else – also true, except for 7 values
  • false
  • null
  • undefined
  • ''
  • 0, -0
  • NaN

ToString / String(something)

• For primitives – add quotes
• For references – call ToPrimitive

ToNumber / Number(something)

• For strings – try to convert to number
• For booleans – true/false to 1/0
• For references – call ToPrimitive

String To Number

• Empty string – 0
• Remove spaces and try to convert
• At least one not a number – NaN

        Number(' 14 ') // 14
        Number('14px') // NaN
        

           
          pastInt('14px') // 14
          pastFloat('14px') // 14
        
      

ToPrimitive

1. Symbol.toPrimitive
2. valueOf and/or toString
   • If method returned a non-primitive – call another
   • If methods returned a non-primitive – error

Symbol.toPrimitive

        const kottan = {
          

              [Symbol.toPrimitive](hint) {
              

                    switch (hint) {
                        cast 'string': return '🐈‍⬛'
                        cast 'number': return '🐈‍'
                        cast 'default': return 'cat'
                      }
              
                }
          
        }
      

Without Symbol.toPrimitive

        const kottan = {
          valueOf() { return '🐈‍⬛' },
          toString() { return {} }
        }
        

           
          'Cat: ' + kottan // "Cat: 🐈‍⬛"
        
        

           
          String(kottan) // "🐈‍⬛" 
        
      

Implicit and Explicit 🪡

ToBoolean

• Boolean()
• !!
• if, for, do/while
• ? :
• Left part of || and &&
  • Lazy evaluation

ToString

• String()/`${kottan}`
• object[key]

ToNumber

• Number()
• Math & Bitwise operations
  • Except – binary plus (value + value)
    • Except – for objects, first valueOf, then toString

Comparisons 🤼

• ===, !== – without conversions
• ===, == – compare objects by reference
• ==, !=, >, <, >=, <= – prefer numbers
  • special case: undefined == null 🤯

NaN

        const tricky = NaN
        tricky === NaN // false
        

           
          isNaN(NaN) // true
          isNaN('wat') // true
        
        

           
          Number.isNaN(NaN) // true
          Number.isNaN('wat') // false
        
        

           
          Object.is(NaN, NaN) // true
        
      

Symbol

• ToString – only String(symbol)
• ToNumber – Error
• ToBoolean – true

☠️

How to Avoid 🪦

• TypeScript
• Eslint – eqeqeq rule

What to Read ✍️

• JavaScript.info – Type Conversions
• JavaScript.info – Comparisons
• You Don't Know JS – Types & Grammar
• TC39. Type Conversion

Questions❓

Practice 🧠

Practice 🧠

• sum()
• the God Check
• typeof WAT
• if falsy

Thanks 🍉