w5d5/w6d1 - javascript

Question 1

What are the falsy values in JS?

Answer 1

-1
0
""
undefined
NaN
false

Question 2

Does JS have implicit return?

Answer 2

no

Question 3

What are the 5 JS primitives?

Answer 3

integer
string
boolean
undefined
null

Question 4

How does var scoping/reassignment work?

Answer 4

available within the function it is defined in

can be reassigned

Question 5

How does let scoping/reassignment work?

Answer 5

block scoped

can be reassigned

Question 6

How does const scoping/reassignment work?

Answer 6

block scoped

cannot be reassigned

Question 7

Can you use a variable before it is defined?

Answer 7

Yes.

It must be defined in the same scope.

This only works for var/let. Does not work for const.

Question 8

What’s the story with constructor functions?

Answer 8

ProudCamelCased

sort of like declaring a class

Question 9

What are the different types of function invocation?

Answer 9

method-style: the current ‘this’ will be the enclosing scope.

constructor-style: ‘this’ will be enclosed by the constructor method

Question 10

What does ‘this’ refer to?

Answer 10

The current context.

Roughly equivalent to ruby’s self.

Question 11

How do you get a function in JS to implicitly return?

Answer 11

Make it a one-line fat-arrow function.

Question 12

How does string interpolation work

Answer 12

backticks for quotes

${ … } to interpolate …

Question 13

Fat arrow functions are like lambdas in which way?

Answer 13

They return execution to the context in which they are defined.

Question 14

What happens if you send extra params to a method?

Answer 14

They are unused.

Question 15

How do you access all arguments passed to a function?

Answer 15

They can be accessed via the ‘arguments’ array-like object available within the method

Question 16

How do you treat arguments like an array?

Answer 16

arguments_as_an_actual_array = Array.prototype.slice.call(arguments)

OR (ES6)

Array.from(arguments)

Question 17

With function-style invocation, what is ‘this’ set to?

Answer 17

window

Question 18

With method-style invocation, what is ‘this’ set to?

Answer 18

the object that we call the method on

Question 19

With constructor-style invocation, what happens behind the scenes? What is ‘this’ set to?

Answer 19

a new, empty object is created.

the object’s __proto__ property is set to Classname.prototype

the Classname function is set with ‘this’ set to the blank object.

Question 20

Where is apply defined, what does it take as parameters and what does it do?

Answer 20

Function.prototype.apply

it takes an object to bind ‘this’ to, and it takes an array of arguments to be passed to the method it is being called on

Question 21

What’s the difference between apply and call?

Where would you use each?

Answer 21

call takes a list of parameters, while apply takes an array.

use call when you know specifically which parameters you will be passing.

use apply when someone will give you an array of arguments to apply.

Question 22

How do you set up a class using ES2015 sugar?

Answer 22

class MyClass {
constructor(arg1, arg2, ...) {
  this.arg1=arg1
..
}

method1( ) { … }
}

Question 23

Why do we assign a variable to the return value of require using node?

Answer 23

In JS, we don’t import a module’s global scope, so we have to store it into a variable.

Question 24

How do we export a Class from a .js file in node?

Answer 24

// ./cat.js
module.exports = ClassName

// ./main.js
require("./cat.js")

Question 25

How do we import many js files from the same directory?

Answer 25

Put a bunch of .js files in the same dir, add them to an index.js file, and require the dir

// ./things/index.js
module.exports = {
Thing1: require("./thing1"),
Thing2: require("./thing2"),
...
}

// ./main.js
const Things = require("./things")

Question 26

What’s a callback

Answer 26

a function passed to another function

Question 27

What’s the JS equivalent of Ruby’s splat operator?

Answer 27

… (the spread operator)

Question 28

What are three ways to change the context of a function?

Answer 28

apply, call, bind

Question 29

What happens when you rebind a function?

Answer 29

Nothing. The first bind is the only bind.

Question 30

How do you use a closure to call a function (which is defined in a class) via method-style invocation?

Answer 30

1. Within the closure, store that = this.
2. Invoke the function via that.theMethod()

OR

use a fat-arrow function because it automatically binds ‘this’ to the defining scope as it is defined

Question 31

How do you call a function asynchronously?

Answer 31

use a built-in method like:

setTimeout, setInterval, …

Question 32

What is the top-level class in JS? Why do we call it this?

Answer 32

Object

When a property is called on a JS object, the interpreter looks first for that property in the object itself, then the object’s prototype, then recursively, all the way up to Object.

Question 33

What are 3 ways to cause a a Dog object to inherit from an Animal object?

Answer 33

Dog.prototype.__proto__ = Animal.prototype (bad because slow)

OR

Object.setPrototypeOf(Dog.prototype, Animal.prototype) – bad because altering an object’s prototype reduces its performance

OR

Dog.prototype = Object.create(Animal.prototype)

best, fastest, recommended

Question 34

How do we set up a Dog’s constructor to call an Animal’s constructor (in the case that Dog inherits from Animal) ?

Answer 34

Within function Dog(name, breed), call:

Animal.call(this, name)

Note that we only pass in arguments that are taken by Animal’s constructor.

Question 35

How do you set up inheritance between a Dog and Animal via a surrogate?

Answer 35

function Surrogate( ) { }

Surrogate.prototype = Animal.prototype

Dog.prototype = new Surrogate( );

Question 36

How does inheritance in ES2015 work?

Answer 36

class Dog extends Animal {
  constructor(a, b, c) { ... }
  action( ) { ... }
}

Question 37

Why would you ever run code with setTimeout(…, 0) ?

Answer 37

To run something AFTER the current call stack is cleared, but not before.

Question 38

Does setTimeout(…, 1000) guarantee that the event will be triggered in 1 second?

Answer 38

No. 1000 is the minimum delay.

Question 39

How do you set up a function to set up inheritance between a parent and a child?

var inherit = function(parent, child) { … }

(implement the three dots)

Answer 39

var Surrogate = function( ) { };
Surrogate.prototype = parent.prototype;
child.prototype = Surrogate.prototype;
child.prototype.constructor = child;

Question 40

What is the effect of running this code? Why is the last line necessary?

var Surrogate = function( ) { };
Surrogate.prototype = parent.prototype;
child.prototype = Surrogate.prototype;
child.prototype.constructor = child;

Answer 40

Inheritance is set up between parent and child.

Prior to running the last line, the child’s constructor is set to the parent’s constructor. The last line changes it so the child constructor is called when we create a new instance of child.

Question 41

How would you draw a rectangle using an existing canvas, WITHOUT using the .rect( ) method?

specs:

• Black outline 2px
• red insides
• 50x50
• top-left corner of (50,50)

Answer 41

ctx = canvas.getContext(‘2d’);

ctx. strokeStyle = ‘black’;
ctx. lineWidth = 2;
ctx. fillStyle = ‘red’;

ctx. beginPath( );
ctx. moveTo(50, 50);
ctx. lineTo(50, 100);
ctx. lineTo(100, 100);
ctx. lineTo(100, 50);
ctx. closePath( );

ctx. stroke( );
ctx. fill( );

Question 42

How would you explain .bind( ) in terms of closures?

Answer 42

bind creates a closure that contains its parameter.

when invoked, the bound method will be called via call with ‘this’ set to the bind parameter.

Question 43

Name the one variable that does not get captured

Answer 43

this

Question 44

What’s the difference between a statement and an expression?

Answer 44

An expression is a line of code that returns a value.

A statement is any line of code.

So, an expression is a statement, but a statement is not necessarily an expression.

Question 45

How do you make a single-expression fat arrow return an empty object rather than an empty block?

Answer 45

myFunc = ( ) => ( { } );

Question 46

What will this return?

myFunc = ( ) => ( { } );

Answer 46

An empty object.

Question 47

What will this return?

myFunc = ( ) => { };

Answer 47

An empty block.

Question 48

Explain why the result of this function call is undefined:

let returnName = ( ) => this.name;
returnName.call( {name: 'Dale Cooper'} ) // undefined;

Answer 48

Fat arrow functions pre-bind ‘this’ to the scope in which they are defined.

With this example, we’re trying to rebind ‘this’ to an object with a ‘name’ variable, which we can’t do because .bind has already been performed via the fat-arrow function.

Question 49

How do you access the arguments object within a fat-arrow function?

Answer 49

You don’t.

Question 50

What does .bind return?

Answer 50

A function that calls the original function from a specified context.

Question 51

What does .push return? What doesn’t .push return?

Answer 51

It returns the length of the elongated array.

It doesn’t return the elongated array.

Question 52

How do you import everything from a file and access it via dot syntax?

Answer 52

import * as AwesomeStuff from ‘someFile’;

AwesomeStuff.someFunction( );