How To Use Conditionals

TypeScript is the programming language used in the Code Editors of DynaMaker.

Logic & Syntax

Conditionals work like if condition is true, do something:

if (condition) {
  // do something
}

Optionally you can use multiple else-if to stack conditions, and a final else as fallback.

if (condition1) {
  // do A
} else if (condition2) {
  // do B
} else if (condition3) {
  // do C
} else {
  // do D
}

Conditions can be written like the following (most common ones):

• number conditions:

  • === → equal to (e.g. orcCount === 50)
  • !== → not equal to (e.g. orcCount !== 0)
  • > → larger than (e.g. orcCount > 10)
  • < → smaller than (e.g. orcCount < 100)
  • >= → larger than or equal to (e.g. orcCount >= 50)
  • <= → smaller than or equal to (e.g. orcCount <= 50)

• string conditions:

  • === → text is exactly the same (e.g. hero === "Gimli")
  • !== → text is different (e.g. hero !== "Legolas")
  • .includes() → text contains something (e.g. hero.includes("im"))

• boolean conditions:

  • === true → check if value is true (e.g. hasRing === true)
  • === false → check if value is false (e.g. hasRing === false)
  • if (condition) → directly check if value is true (e.g. if (hasRing))
  • if (!condition) → directly check if value is false (e.g. if (!hasRing))

• list ([]) conditions:

  • .includes() → list contains an item (e.g. party.includes("Gimli"))
  • .length → check the number of items (e.g. party.length > 3)
  • [index] → access an item by its position (e.g. items[0] === "Sword")
  • === → check if it is the exact same list (e.g. party === anotherParty)

• object ({}) conditions:

  • === → check a property value (e.g. hero.name === "Aragorn")
  • !== → property is different (e.g. hero.name !== "Gimli")
  • > → property value is larger (e.g. hero.level > 5)
  • < → property value is smaller (e.g. hero.level < 5)
  • in → check if a property exists (e.g. "name" in hero)
  • JSON.stringify() → convert object into text so it can be compared (e.g. JSON.stringify(hero) === JSON.stringify(otherHero))

• undefined or missing values:

  • === undefined → check if something has no value (e.g. weapon === undefined)
  • !== undefined → check if something has a value (e.g. weapon !== undefined)
  • if (value) → check if a value exists (i.e. not undefined) and is true (e.g. if (weapon))
  • if (!value) → check if a value is missing (i.e. undefined) or true (e.g. if (!weapon))

• combining conditions:

  • && → AND: both conditions must be true (e.g. orcCount > 10 && hasSword)
  • || → OR: at least one condition must be true (e.g. hasSword || hasBow)
  • ! → NOT: reverses true and false (e.g. !hasRing)

Examples

Usually conditions are used to modify a variable or do some logic (e.g. add more extrusions to a model).

note

Note that the variables used below can change its value due to being defined as let, instead of the usual const, whose value cannot change by definition.

Some examples of use:

• single if:

  let beaconCount = 7
  let message = 'The beacons are silent.'
  
  if (beaconCount === 7) {
    message = 'The beacons are lit! Gondor will answer!'
  }

  Example of use in function:

  function getMessage(beaconCount: number) {
    let message = 'The beacons are silent.'
    if (beaconCount === 7) {
      message = 'The beacons are lit! Gondor will answer!'
    }
    return message
  }

• if+else:

  let orcCount = 1
  let report: string
  
  if (orcCount >= 2) {
    report = 'That still only counts as one!'
  } else {
    report = 'One orc, a fine start!'
  }

  Example of use in function:

  function getOrcReport(orcCount: number) {
    let report: string
  
    if (orcCount >= 2) {
      report = 'That still only counts as one!'
    } else {
      report = 'One orc, a fine start!'
    }
  
    return report
  }

• if+else-if+else:

  let hasRing = true
  let courage = 100
  let questStatus: string
  
  if (hasRing && courage >= 100) {
    questStatus = 'The Ring-bearer begins the journey to Mount Doom'
  } else if (hasRing) {
    questStatus = 'The Ring is heavy. More courage is needed'
  } else {
    questStatus = 'Find the Ring before starting the quest'
  }

  Example of use in function:

  function getQuestStatus(hasRing: boolean, courage: number) {
    let questStatus: string
  
    if (hasRing && courage >= 100) {
      questStatus = 'The Ring-bearer begins the journey to Mount Doom'
    } else if (hasRing) {
      questStatus = 'The Ring is heavy. More courage is needed'
    } else {
      questStatus = 'Find the Ring before starting the quest'
    }
  
    return questStatus
  }

• multiple else-if without questStatus but returning directly the output in a function:

  function getQuestStatus(fellowshipMembers: number, hasRing: boolean) {
    if (hasRing && fellowshipMembers === 9) {
      return 'The Fellowship is formed. The journey begins! 💍'
    } else if (hasRing && fellowshipMembers >= 5) {
      return 'A brave company carries the Ring, but the Fellowship is incomplete.'
    } else if (hasRing) {
      return 'The Ring-bearer travels with only a few companions.'
    } else if (fellowshipMembers >= 9) {
      return 'The Fellowship is ready, but the Ring is missing!'
    } else {
      return 'The Council is deciding the fate of Middle-earth.'
    }
  }

• in-line if (equivalent of if+else for simpler conditions):

  const isElf = true
  const hero = isElf ? 'Legolas' : 'Not Legolas'

  Example of use in function:

  function getHeroName(isElf: boolean) {
    const hero = isElf ? 'Legolas' : 'Not Legolas'
    return hero
  }