The React Handbook

Question 1

Are variables in JavaScript typed?

Answer 1

No, once you assign a specific literal type to a variable, you can later reassign the variable to house another type without any type errors or issues.

Question 2

What is the scope?

Answer 2

The scope is the portion of code where a variable is visible.

Question 3

How is a variable initialized with ‘var’ outside of a function assigned?

Answer 3

It is assigned to the global object and has a global scope and is visible anywhere.

Question 4

How is a variable initialized inside a function assigned?

Answer 4

It is assigned to that function. It’s local and is visible only inside the function, just as it it were a function parameter.

Question 5

Does a block (Identified by a pair of curly braces) define a new scope for a variable defined by ‘var’?

Answer 5

Nah, dawg. A new scope is only created when a function is created, because var does not have block scope but function scope.

Question 6

What is hoisting?

Answer 6

JS actually moves all variable declarations to the top before executing the code. This is why variables defined anywhere in the function are available, even in lines of code above them. To avoid “what the heck is that variable?” types of confusion, however, we should always declare our variables at the beginning of a function.

Question 7

What is let?

Answer 7

It’s a block-scoped version of var - that is, its scope is limited to teh block, statement or expression where it’s defined, and all the contained inner blocks

Question 8

What happens if you define let outside of any function?

Answer 8

Unlike var, it does not create a global variable.

Question 9

What’s unique about a const, once it is initialized?

Answer 9

Its value can’ tbe changed again and it can’t be reassigned to a different value.

Question 10

What’s the catch about reassigning consts?

Answer 10

We can’t reassign a const, but we can mutate it, if it is an object that provides methods to mutate the object’s contents.

Question 11

What sort of scope does Const have?

Answer 11

Block scope, same as let.

Question 12

Why would a developer choose to only use const and let?

Answer 12

Because we should always use the simplest construct available to avoid errors down the road.

Question 13

Convert the following to an arrow function:

const myFunction = function() {
  //...
}

Answer 13

const myFunction = () => {
  //...
}

Question 14

When can you omit the curly braces and write everything on a single line, like this:
const myFunction = () => doSomething();

Answer 14

Whenever the function body is just a single statement.

Question 15

When can you omit the parentheses completely? Like this:
const myFunction = param => doSomething(param)

Answer 15

When you have one (and only one) param.

Question 16

What sort of returns are you allowed with arrow functions?

Answer 16

Implicit returns - that is, within an arrow function, values are returned without using the return keyword.

Question 17

When can you use implicit returns within an arrow function?

Answer 17

When there is a one-line statement for the function body. So,
const myFunction - () => ‘test’

will return ‘test’, even though we don’t use the keyword.

Question 18

What happens if we return an object from a one-liner arrow function, and don’t wrap it in parentheses?

Answer 18

Those braces are considered the wrapping function body brackets, instead of denoting an object.

So it should instead look like:
const myFunction = () => ({ value: 'test' })

Question 19

In a regular function, what does ‘this’ refer to?

Answer 19

the object - so if you call ‘this.manufacturer’ within a car object, you’ll get the car object your in’s manufacturer.

Question 20

What is ‘this’ within an arrow function?

Answer 20

It inherits the ‘this’ scope from the execution context. Arrow functions don’t bind ‘this’ at all, so its value will be whatever is looked up in the call back.

Question 21

When should we NOT use Arrow Functions (due to needing this to be bound to the calling object)

Answer 21

Within object methods, constructors, or when handling events - because DOM event listeners set ‘this’ to be the target element.

Question 22

What can be expanded using a spread operator?

Answer 22

An array, an object, or a string.

Question 23

What does the spread operator (…) do?

Answer 23

It takes every single item from an iterable (arrays, strings, DOM nodes, objects, maps, sets) and applies it to the containing array.

Question 24

How should you combine two arrays like so:
const featured = [‘Deep Dish’, ‘Pepperoni’, ‘Hawaiian’];
const specialty = [‘Metzza’, ‘Spicy Mama’, ‘Margherita’]’

Answer 24

const pizzas = […featured, …specialty]

Question 25

How can you make an array from
const featured = [‘Deep Dish’, ‘Pepperoni’, ‘Hawaiian’];
const specialty = [‘Metzza’, ‘Spicy Mama’, ‘Margherita’]’
and add a ‘veg’ pizza in the middle?

Answer 25

const pizzas = […featured, ‘veg’, …specialty]

Question 26

What’s wrong with copying an array like so:
let pizzas = [‘pep’, ‘cheese’]
let fridayPizzas = pizzas

Answer 26

Any changes you make to fridayPizzas will also change pizzas, because you haven’t actually copied the array, you’ve only named a reference to it.

Question 27

What’s the correct way to copy an array to a new array?

Answer 27

Use spread:
const fridayPizzas = [...pizzas]

This is a new array - changes to fridayPizzas will not affect the pizzas array.

Question 28

If I have:
const inventors = [‘Einstein’, ‘Newton’, ‘Galileo’];
const newInventors = [‘Musk’, ‘Jobs’];

will inventors.push(newInventors) combine the two?

Answer 28

Not exactly. It will add an array as a fourth element to inventors, which contains the two newInventors, but it won’t add them as just strings.

Question 29

How should you combine two arrays, now that we have the spread operator?

Answer 29

inventors.push(…newInventors)

This will spread the array into the push function, and successively push each string onto the array.

Question 30

In addition to a spread operator, what can the … symbol denote?

Answer 30

A rest param..which strangely does the opposite of a spread operator.

Question 31

What two places will you use a rest param?

Answer 31

1. ) In a function

2. ) In a destructuring situation

Question 32

Create a convertCurrency function which assumes the first param passed is the rate, and then takes N number of amounts to be modified according to the currency rate.

Answer 32

function convertCurrency(rate, …amounts) {
	return amounts.map(amount => amount * rate);
}

convertCurrency(1.54, 10, 23, 52, 1, 56);

This passes the amounts in a rest param, which bundles them all up into an array that we can then loop over

Question 33

What happens in the following code?

const runner = [‘Robb Schuneman’, 123, 5.5, 5, 3, 6, 35];
const [name, id, runs] = runner;

Answer 33

the first value passed is assigned to name, the second is assigned as the ID, and then the third value will be assigned to runs. (We should have used a rest param)

Question 34

What happens in the following code?

const runner = [‘Robb Schuneman’, 123, 5.5, 5, 3, 6, 35];
const [name, id, ...runs] = runner;

Answer 34

Because we used a rest param, all the runs left in the array will be bundled up into an array And then you can loop over that and use the data.

Question 35

What happens when we use the spread operator on a string?

Answer 35

Each letter of the string is put into an array - this can be useful if we need to transform each letter of a span or something.

Question 36

Explain the following code:

const f = (foo, bar) => {}
const a = [1, 2]
f(…a)

Answer 36

Because we spread the array into the function, foo will be assigned 1, and bar will be assigned 2.

Question 37

Explain the following code:

const  numbers = [1, 2, 3, 4, 5]
[first, second, …others] = numbers

Answer 37

Because we use a rest param, first will be assigned ‘1’, second will be assigned ‘2’, and 3, 4, and 5 will be bundled up into an array called “others”

Question 38

What does destructuring let us do?

Answer 38

Extract some values from an object or an array and put them into named variables.

Like so:
const person = {
  firstName: 'Tom',
  lastName: 'Cruise',
  actor: true,
  age: 54 //made up
}
const { firstName: name, age } = person //name: Tom, age: 54

Question 39

How can you skip values in an array when destructuring?

Answer 39

Just by using commas and blank spaces to skip over the unneeded values:

const [first, second, , , fifth] = a

Question 40

Rewrite the following code using destructuring instead:

const person = {
  first: 'Robb',
  last: 'Schuneman'
};

const first = person.first;
const second = person.second;

Answer 40

const person = {
  first: 'Robb',
  last: 'Schuneman'
};

const { first, last } = person;

Question 41

In the following code, what is going on?

const settings = { width: 300, color: 'black' }
const { width = 100, height = 100, color = 'blue', fontSize = 25} = settings;

Answer 41

Default values are being set - if those named properties don’t exist on settings, they will instead revert to the default.

So, we end up with a width of 300, a height of 100, a color of black and a fontSize of 25.

Question 42

If you receive some data in a form like:

const data = ‘Basketball, Sports, 90210, 23’;

What is the easiest way to get those all into named variables?

Answer 42

You can destructure these, after splitting them into an array (so long as they’re perfectly separated by the same delimiter):

const [itemName, category, sku, inventory] = data.split(‘,’);

That will put them into an array, and then immediately put them into the variables.

Question 43

If you have two variables that need to swap, the kind of thing you used to do by setting a temp variable..how can you use destructuring to make your life better?

Answer 43

[inRing, onSide] = [onSide, inRing]

By placing them in an array and destructuring that array, you’ve simply swapped them, nothing else to be done. Bloody brilliant!

Question 44

How does destructuring sort of let us return multiple values from a function?

Answer 44

We can return an object, and destructure it immediately.

function convertCurrency(amount) {
  const converted = {
    USD: amount * 0.76,
    GBP: amount * 0.53,
    AUD: amount * 1.01
};
return converted;
}

const { USD, AUD } = convertCurrency(100);