Function Improvements: Arrows and Default Arguments Flashcards Preview

Javascript ES6 > Function Improvements: Arrows and Default Arguments > Flashcards

Flashcards in Function Improvements: Arrows and Default Arguments Deck (35)
Loading flashcards...
1
Q

Name three benefits of arrow functions over normal functions.

A

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)

2
Q

What would you do to make this an arrow function?

var sayMyName = function(name){
};
A
  1. Remove the word ‘function’.
  2. Add a fat arrow =>
  3. Change var to use const

To make:

const sayMyName = (name) => {
}
3
Q

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

A

Remove the parenthesis around the parameter.

4
Q

How could you simplify this function?

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

Remove the parenthesis.

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

What is an explicit return?

A

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

6
Q

What is an implicit return?

A

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

7
Q

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

A

Remove the word ‘return’

Put it all on one line.

Then delete the curly brackets.

8
Q

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

A

Pass an empty parenthesis:

const sayMyName = () => { 
}
9
Q

Arrow functions are always what type of function?

A

Anonymous functions.

10
Q

What is an named function?

A

A function that is actually named.

A named function looks like this;

function sayMyName() {

11
Q

What is an anonymous function?

A

Functions that don’t have names.

12
Q

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

A

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

13
Q

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

A

console.table(object);

14
Q

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});

A

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}));

15
Q

How could you shorten this function?

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

A

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}));

16
Q

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

A

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.
17
Q

How would you select an element called .box?

A

Use the querySelector.

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

FYI ie9+

18
Q

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

A

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

19
Q

How would you toggle a class in an event handler?

A

this.classList.toggle(classname);

20
Q

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

A

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.

21
Q

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

A

this.classList.contains(‘classname’);

22
Q

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

A

[first, second] = [second, first]

23
Q

The big takeaway of this and arrow functions?

A

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

24
Q

What are default function arguments?

A

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

25
Q

How would you write default function arguments in es6?

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

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

A

You would fill the gap with undefined.

calculateBill(100, undefined, 0.25);

27
Q

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

A

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)

28
Q

What does a prototype allow?

A

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.

29
Q

How would you select all elements on a page?

A

document.getElementsByTagName(‘li’);

30
Q

How would you select all elements with a certain attribute?

A

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.

31
Q

How do you select the text value of an element?

A

item.textContent

32
Q

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

A

string.includes(‘car’);

33
Q

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

A

item.dataset.time

Remember you don’t need the data- prefix

34
Q

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

A

parseFloat(string)

35
Q

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

A

Reduce

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

The 0 at the end is the starting point