giveaway.rvkjs.com

Undefined is not a function

Types in javascript

function countdownToChristmas(date) {
  const daysLeft = 24 - date

  if (daysLeft > 0) {
    return `${daysLeft} days till Christmas!`
  }
}

const date = new Date().getDate()
countdownToChristmas(date)

Vanilla javascript

function countdownToChristmas(date) {
  const daysLeft = 24 - date

  if (daysLeft > 0) {
    return `${daysLeft} days till Christmas!`
  }
}

const date = new Date('December 24, 2016').getDate()
countdownToChristmas(date).toUpperCase()

Vanilla javascript - And a bug

Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

function countdownToChristmas(date) {
  const daysLeft = 24 - date

  if (daysLeft > 0) {
    return `${daysLeft} days till Christmas!`
  }
}

const date = new Date().getDate()
countdownToChristmas(date).toUpperCase()

10: countdownToChristmas(date).toUpperCase()    
    ^ call of method `toUpperCase`. Method cannot be called on possibly undefined value
10: countdownToChristmas(date).toUpperCase()
    ^ undefined

Flow - Detects the issue

function countdownToChristmas(date: number): ?string {
  const daysLeft = 24 - date

  if (daysLeft > 0) {
    return `${daysLeft} days till Christmas!`
  }
}

const date = new Date().getDate()
countdownToChristmas(date).toUpperCase()

10: countdownToChristmas(date).toUpperCase()    
    ^ call of method `toUpperCase`. Method cannot be called on possibly undefined value
10: countdownToChristmas(date).toUpperCase()
    ^ undefined

Flow - Adding type definitions

function countdownToChristmas(date: number): string {
  const daysLeft = 24 - date

  if (daysLeft > 0) {
    return `${daysLeft} days till Christmas!`
  }
  return `Merry Christmas! 🎅🏼`
}

const date = new Date().getDate()
countdownToChristmas(date).toUpperCase()

No errors!

Flow - bug fixed

function countdownToChristmas(date: Date): string {
  const daysLeft = 24 - date

  if (daysLeft > 0) {
    return `${daysLeft} days till Christmas!`
  }
}

const date = new Date().getDate()
countdownToChristmas(date).toUpperCase()

2: "The right-hand side of an arithmetic operation must be of type 
   'any', 'number' or an enum type."
10: "Argument of type 'number' is not assignable to parameter of type 'Date'."

Typescript - Annotating types

function countdownToChristmas(date: number): string | undefined {
  const daysLeft = 24 - date

  if (daysLeft > 0) {
    return `${daysLeft} days till Christmas!`
  }
}

const date = new Date().getDate()
countdownToChristmas(date).toUpperCase()

10: "Object is possibly undefined"

Typescript - strictNullChecks

countdownToChristmas : Int -> String
countdownToChristmas date =
    let
        daysLeft =
            24 - date
    in
        if daysLeft > 0 then
            toString daysLeft ++ " days till Christmas"

Elm

-- SYNTAX PROBLEM --------------------------------------------------------------



9|             toString daysLeft ++ " days till Christmas"
                                                         ^
I am looking for one of the following things:

    an 'else' branch
    an expression
    an infix operator like (+)
    whitespace

countdownToChristmas : Int -> String
countdownToChristmas date =
    let
        daysLeft =
            24 - date
    in
        if daysLeft > 0 then
            toString daysLeft ++ " days till Christmas"
        else
            null

Elm

-- NAMING ERROR ----------------------------------------------------------------

Cannot find variable `null`

10|             else null
                     ^^^^
Maybe you want one of the following?

    List.all
    String.all

countdownToChristmas : Int -> String
countdownToChristmas date =
    let
        daysLeft =
            24 - date
    in
        if daysLeft > 0 then
            toString daysLeft ++ " days till Christmas"
        else
           ""

Elm

function capitalize(str) {
  return str[0].toUpperCase() + str.slice(1)
}

capitalize('')

No errors!

Another example - Flow

function capitalize(str: string): {
  return str[0].toUpperCase() + str.slice(1)
}

capitalize('')

No errors!

Flow / TypeScript

capitalize : String -> String
capitalize str =
    String.toUpper (String.left 1 str) ++ (String.dropLeft 1 str)

Elm

elm-lang.org/try

flowtype.org/try

typescriptlang.org/play