Function Improvements: Arrows and Default Arguments

Question 1

Name three benefits of arrow functions over normal functions.

Answer 1

Much more concise.

Implicit returns allow one liners.

Doesn’t rebind the value of this when you use an arrow function inside another function. (useful for click handlers etc)

Question 2

What would you do to make this an arrow function?

var sayMyName = function(name){
};

Answer 2

1. Remove the word ‘function’.
2. Add a fat arrow =>
3. Change var to use const

To make:

const sayMyName = (name) => {
}

Question 3

If an arrow function only has one parameter what can you do to simplify the code?

Answer 3

Remove the parenthesis around the parameter.

Question 4

How could you simplify this function?

const fullNames2 = names.map((name) => {
    return `${name} bos`;
  });

Answer 4

Remove the parenthesis.

const fullNames2 = names.map(name => {
    return `${name} bos`;
  });

Question 5

What is an explicit return?

Answer 5

When you explicitly write the word ‘return’ for what you’re returning.

Question 6

What is an implicit return?

Answer 6

An implicit return allows one liner functions without having to specify the word ‘return’

Question 7

How do you turn an explicit return arrow function into an implicit return?

Answer 7

Remove the word ‘return’

Put it all on one line.

Then delete the curly brackets.

Question 8

If you have no arguments in an arrow function, what must you do?

Answer 8

Pass an empty parenthesis:

const sayMyName = () => { 
}

Question 9

Arrow functions are always what type of function?

Answer 9

Anonymous functions.

Question 10

What is an named function?

Answer 10

A function that is actually named.

A named function looks like this;

function sayMyName() {

Question 11

What is an anonymous function?

Answer 11

Functions that don’t have names.

Question 12

Name a disadvantage of using an arrow function over a named function?

Answer 12

Arrow functions are Anonymous functions so as they aren’t named they may not be as easy to stack trace.

Question 13

If you wanted log a table of data, what would you use?

Answer 13

console.table(object);

Question 14

If you wanted to implicitly return an object literal. What steps would you have to take to make it work?

const win = winners.map((winner, i) => {name: winner, race, place: i + 1});

Answer 14

to prevent having to remove the curly brackets as you usually would with an implicit return you need to add parenthesis around it.

const win = winners.map((winner, i) => ({name: winner, race, place: i + 1}));

Question 15

How could you shorten this function?

const win = winners.map((winner, i) => ({name: winner, race: race, place: i + 1}));

Answer 15

If variable name and the property is the same you can just list ‘race’ once.

const win = winners.map((winner, i) => ({name: winner, race, place: i + 1}));

Question 16

How would you filter an array or integers called ‘ages’ with an arrow function implicitly returning ages of 60+

Answer 16

const old = ages.filter(age => age >= 60);

• Only one parameter so no need for ( ) around params.
• No parenthesis because it is an implicit return on one line.

Question 17

How would you select an element called .box?

Answer 17

Use the querySelector.

const box = document.querySeletor(‘.box’);

FYI ie9+

Question 18

if using this in an event listener should you use an arrow function or a regular function and why?

Answer 18

Use a regular function because arrow functions block scope means this will reference the parent scope instead of the desired element.

Question 19

How would you toggle a class in an event handler?

Answer 19

this.classList.toggle(classname);

Question 20

Why doesn’t this work inside a function nested inside an another function and what is the solution?

Answer 20

Because we’ve entered a new function it’s going to attached to the window.

to avoid var that / var this

we can use an arrow function because it does not change the value of this, is inherits it from the parent.

Question 21

How would you detect if a clicked element has a class?

Answer 21

this.classList.contains(‘classname’);

Question 22

If you want to switch two variables with es6, how would you do it?

Answer 22

[first, second] = [second, first]

Question 23

The big takeaway of this and arrow functions?

Answer 23

We can use an arrow function inside another function to inherit the value of this.

Question 24

What are default function arguments?

Answer 24

They allow you to define default for parameters is nothing is passed in.

Question 25

How would you write default function arguments in es6?

Answer 25

function calculateBill(total, tax = 0.13, tip = 0.15){ 
}

Question 26

How would you run a default function argument without certain information?

Answer 26

You would fill the gap with undefined.

calculateBill(100, undefined, 0.25);

Question 27

Name the top four scenarios you wouldn’t use an arrow function.

Answer 27

When you need ‘this’

When you need a method to bind to an object

When you do not need the arguments object (only available in normal functions)

When you need to add a prototype method. (explicitly need the keyword this)

Question 28

What does a prototype allow?

Answer 28

Even after a class has been created, you can add a new method that makes itself available to every in every object that has been created from there.

Question 29

How would you select all elements on a page?

Answer 29

document.getElementsByTagName(‘li’);

Question 30

How would you select all elements with a certain attribute?

Answer 30

Array.from(document.querySelectorAll(‘[data-time]’))

without Array.from we receive nodelist which doesn’t have all the methods we’ll need unless your on a new browser.

The square brackets are data attribute selectors

Array.from converts to a proper array.

Question 31

How do you select the text value of an element?

Answer 31

item.textContent

Question 32

How do you check for existence of a word within a string?

Answer 32

string.includes(‘car’);

Question 33

How do you get an elements data attribute value for ‘data-time’?

Answer 33

item.dataset.time

Remember you don’t need the data- prefix

Question 34

If you have retrieved number in string format what method would you use to convert to a number?

Answer 34

parseFloat(string)

Question 35

What would you use if you have a long array of numbers you need you add up?

Answer 35

Reduce

.reduce((runningTotal, seconds) => runningTotal + seconds, 0)

The 0 at the end is the starting point