Table of Contents

• Chapter 48. Module Introduction
• Chapter 49. “let” and “const”
• Chapter 50. Arrow Functions
• Chapter 51. Default Function Parameters
• Chapter 52. The Spread Operator (…)
• Chapter 53. Rest Parameters
• Chapter 54. Array & Object Destructuring
• Chapter 55. How Code Gets Compiled & Wrap Up
• Chapter 56. Useful Resources & Links

Chapter Details

Chapter 48. Module Introduction

How TS handles some relatively newer JS features: let, const, ES6, etc.

Important link to page that has giant colored grid of features and browser compatibility. use if a specific feature is supported by TS and different browsers.

Chapter 49. “let” and “const”

Variables defined by “const” keyword cannot be changed.

Scope in which a variable is available and can be accessed is the main difference between “let” and “var”

“var” has both global and function scopes depending on where it is defined, inside or outside of a function. If it is defined outside of the function it can only be accessed anywhere. If it is defined inside of the function it can only be accessed in that function. When a variable is defined in an “if statement” block it is a global variable and can be access outside of the block. This is because “var” only has global and function scope.

“let” has both global and block scopes depending on where it is defined, inside or outside of a block. If it is defined inside of the block it cannot still be accessed outside of the block. It can be access in lower (nested) blocks. This forces you to write cleaner code.

Note: blocks are any snippets surrounded by curly braces and not just related to functions, (could also be a “for loop,” “if statement,” or by itself).

Chapter 50. Arrow Functions

const add = function() {}

// can become

const add = (a: number, b:number ) => {}

If you only one expression there is an implicit return and don’t need curly braces.

Function with one parameter can skip the parenthesis.

Chapter 51. Default Function Parameters

Can set default arguments for function parameters. Need to be last in the list so start from the right.

const add = (a: number, b:number = 2, c:number = 3) => {a + b + c}

Chapter 52. The Spread Operator (…)

Extract all values from an arrays:

const hobbies = ["Sports", "Cooking"]
const activeHobbies = ["Hiking"] 

activeHobbies.push(...hobbies)

// tells JS to pull out elements from array and use as a list of values instead of a nested array

// can also do on when creating in the first place

const activeHobbies = ["Hiking", ...hobbies]

Note: we can “.push()” to an array defined in a constant variable because an array is technically an object, and objects are reference values, when we push we change the memory but not the address.

Spread operators work on objects and not just arrays:

const person = {
  name: "max",
  age: 30
}

const copiedPerson = {...person}

// pulls key/value pairs out
// now we get a perfect copy and not just a pointer

Note: Creating a copy of an object an not just a pointer is an important concept.

Chapter 53. Rest Parameters

Similar to spread operator. Used for when you want to add as many arguments as you want, without defining the parameters. Where you want to accept the parameters put “…numbers.”

const add = (...numbers: number[]) => {
  return numbers.reduce((curResult, curValue) => {
    return curResult + curValue   
  }, 0)
}

const addedNumbers = add(5, 10, 6, 8, 4)

Can be combined with tuples. Good for when you want to support multiple arguments but you know how many it will be.

const add = (...numbers: [number, number, number]) => {
  return numbers.reduce((curResult, curValue) => {
    return curResult + curValue   
  }, 0)
}

const addedNumbers = add(5, 10, 6)

Chapter 54. Array & Object Destructuring

Easy way to extract and store values in variables. Works with both “const” and “let.” Brackets or curly braces on the left side of the equal sign. Pull elements out of an array. Doesn’t change the original array.

Without destructuring:

const hobby1 = hobbies[0]
const hobby2 = hobbies[1]

With destructuring:

const [hobby1, hobby2, ..remainingHobbies] = hobbies

Note: de-structuring works with let and not just with constants.

De-structuring works with arrays and objects:

const person = {
  firstName: "Max",
  age: 30
}

const {firstName, age} = person

For array de-structuring, elements are pulled out in order. With objects the order is not always guaranteed so we pull elements out, not by order, but by “key” name, (so we must use the same name as the “key” name). You can change the key name with the following JS syntax:

const {firstName: userName, age} = person

Chapter 55. How Code Gets Compiled & Wrap Up

These specific features are newer but TS compiles down to “es5,” (if that is the “target” value set in the “tsconfig.json” file). If you check out the compiled result you will see much longer code that uses “var” and other older syntax.

Chapter 56. Useful Resources & Links