ES6/7 and TypeScript

Question 1

What kind of return is this arrow function using?

const mappedPizzas = pizzas.map( pizza => pizza.name.toUppercase() )

Answer 1

Implicit return

Question 2

What is unique about arrow functions and the this keyword?

Answer 2

Arrow functions don’t have a ‘this’ keyword. Before arrow functions, each function defined its own ‘this’ value.

Which was problematic when, for example, trying to reference a class instance from a function within that class - ‘this’ would refer to the function, not the instance.

Question 3

How do you pass in default function parameters in es6?

Answer 3

function multiply(a, b = 25) {
    return a * b;
}

Question 4

What is the es6 shorthand for initialising properties in object literals?

Answer 4

In es6 object literals check if a property key matches any variables of the same name. If there is a match, the variable value is automatically assigned to that key.

const brand = 'Apple';
const model = 'Macbook Pro';
const year = 2012;

const laptop = {
    brand,
    model,
    year
}

Question 5

Explain the shorthand for defining methods in objects with es6?

Answer 5

You don’t need to define methods with a function keyword or arrow function. Just use parenthesis instead of the colon and then include the function body.

const pizza = {
    name: "Pepperoni"
    getName() {
        return this.name;
    } 
}

Question 6

What do es6 rest parameters do?

Answer 6

Represent an indefinite number of arguments as an array. This is similar in functionality to the native Javascript arguments object, though allows you to achieve the same results with less boilerplate.

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a); 
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs); 
}

myFun(“one”, “two”, “three”, “four”, “five”, “six”);

// Console Output:
// a, one
// b, two
// manyMoreArgs, [three, four, five, six]

Question 7

Give an example of using the array spread operator

Answer 7

const combinedArray = […arrayOne, …arrayTwo];

Question 8

In what ways are es6 de-structuring of arrays and objects commonly used?

Answer 8

• For arrays:*
• accessing an arrays items individually
• For objects:*
• renaming parameters
• accessing an objects properties individually
• this finer control is commonly used to reduce function parameters; you input only those properties you need, as opposed to a whole object

Question 9

Give an example of de-structuring (an object) to input reduced parameters in es6.

Answer 9

const pizza = {
    name: 'Pepperoni',
    toppings: ['pepperoni'],
    base: 'traditional'
}

function order({ name, toppings }) {
    console.log(name, topppings)
}

order(pizza)

Question 10

Give an example of using de-structuring (an object) to rename parameters in es6.

Answer 10

const pizza = {
    name: 'Pepperoni',
    toppings: ['pepperoni']
}

function order({ name: pizzaType, toppings: pizzaToppings }) {
    console.log(pizzaType, pizzaToppings)
}

const pizzaName = order(pizza)

Question 11

Give an example of using de-structuring (an array) in es6.

Answer 11

const toppings = [ 'pepperoni', 'bacon', 'chilli' ];
const [ varOne, varTwo, varThree ] = toppings;

// varOne = 'pepperoni'
// varTwo = 'bacon'
// varThree = 'chilli'

Question 12

What is the difference between implicit and explicit types and when would you use either approach?

Answer 12

Typescript has the ability to infer types rather than have you explicitly set them.

It’s not necessary to be explicit with your types at all times. For example, you can regularly see the type of simple variables - declaring types here is just boilerplate.

However, for complex types, or if you are declaring an empty variable which is later assigned a value, you will want to assign a type to avoid an ‘any’ typecasting.

Question 13

Explain the void type.

Answer 13

It means there is no type at all. You can actually set a variable to the void type but then you can never change it - nulls and undefined are what is generally used here. Voids are normally used to tell typescript you aren’t returning anything from a function.

Question 14

Explain the never type.

Answer 14

The never type tells the typescript compiler that a value will never occur. For example, set a function to never if it should never return anything - like an error handler that throws a new error mid function body.

Question 15

What does typescripts strict null check do?

Answer 15

The typescript compiler has an option to set strictNullChecks, which forces you to be explicit about undefined and null types. For example, it will error if you try to set null on a string type, unless you explicitly create a union type where the type is string | null.

This prevents unexpected null or undefined errors.

Question 16

Explain union types.

Answer 16

Union types are a way to combine types and are commonly used to be more explicit about a type. For example, setting a string type for a size var would accept any string when you may only have four strings you want to accept. In this case, explicitly setting those four strings is much safer:

string

vs

“extraLarge” | “large” | “medium” | “small”