Function Improvements: Arrows and Default Arguments Flashcards
Name three benefits of arrow functions over normal functions.
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)
What would you do to make this an arrow function?
var sayMyName = function(name){ };
- Remove the word ‘function’.
- Add a fat arrow =>
- Change var to use const
To make:
const sayMyName = (name) => { }
If an arrow function only has one parameter what can you do to simplify the code?
Remove the parenthesis around the parameter.
How could you simplify this function?
const fullNames2 = names.map((name) => { return `${name} bos`; });
Remove the parenthesis.
const fullNames2 = names.map(name => { return `${name} bos`; });
What is an explicit return?
When you explicitly write the word ‘return’ for what you’re returning.
What is an implicit return?
An implicit return allows one liner functions without having to specify the word ‘return’
How do you turn an explicit return arrow function into an implicit return?
Remove the word ‘return’
Put it all on one line.
Then delete the curly brackets.
If you have no arguments in an arrow function, what must you do?
Pass an empty parenthesis:
const sayMyName = () => { }
Arrow functions are always what type of function?
Anonymous functions.
What is an named function?
A function that is actually named.
A named function looks like this;
function sayMyName() {
What is an anonymous function?
Functions that don’t have names.
Name a disadvantage of using an arrow function over a named function?
Arrow functions are Anonymous functions so as they aren’t named they may not be as easy to stack trace.
If you wanted log a table of data, what would you use?
console.table(object);
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});
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}));
How could you shorten this function?
const win = winners.map((winner, i) => ({name: winner, race: race, place: i + 1}));
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}));
How would you filter an array or integers called ‘ages’ with an arrow function implicitly returning ages of 60+
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.
How would you select an element called .box?
Use the querySelector.
const box = document.querySeletor(‘.box’);
FYI ie9+
if using this in an event listener should you use an arrow function or a regular function and why?
Use a regular function because arrow functions block scope means this will reference the parent scope instead of the desired element.
How would you toggle a class in an event handler?
this.classList.toggle(classname);
Why doesn’t this work inside a function nested inside an another function and what is the solution?
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.
How would you detect if a clicked element has a class?
this.classList.contains(‘classname’);
If you want to switch two variables with es6, how would you do it?
[first, second] = [second, first]
The big takeaway of this and arrow functions?
We can use an arrow function inside another function to inherit the value of this.
What are default function arguments?
They allow you to define default for parameters is nothing is passed in.