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.
How would you write default function arguments in es6?
function calculateBill(total, tax = 0.13, tip = 0.15){
}How would you run a default function argument without certain information?
You would fill the gap with undefined.
calculateBill(100, undefined, 0.25);
Name the top four scenarios you wouldn’t use an arrow function.
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)
What does a prototype allow?
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.
How would you select all elements on a page?
document.getElementsByTagName(‘li’);
How would you select all elements with a certain attribute?
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.
How do you select the text value of an element?
item.textContent
How do you check for existence of a word within a string?
string.includes(‘car’);
How do you get an elements data attribute value for ‘data-time’?
item.dataset.time
Remember you don’t need the data- prefix
If you have retrieved number in string format what method would you use to convert to a number?
parseFloat(string)
What would you use if you have a long array of numbers you need you add up?
Reduce
.reduce((runningTotal, seconds) => runningTotal + seconds, 0)
The 0 at the end is the starting point
