w5d5/w6d1 - javascript Flashcards
What are the falsy values in JS?
-1 0 "" undefined NaN false
Does JS have implicit return?
no
What are the 5 JS primitives?
integer string boolean undefined null
How does var scoping/reassignment work?
available within the function it is defined in
can be reassigned
How does let scoping/reassignment work?
block scoped
can be reassigned
How does const scoping/reassignment work?
block scoped
cannot be reassigned
Can you use a variable before it is defined?
Yes.
It must be defined in the same scope.
This only works for var/let. Does not work for const.
What’s the story with constructor functions?
ProudCamelCased
sort of like declaring a class
What are the different types of function invocation?
method-style: the current ‘this’ will be the enclosing scope.
constructor-style: ‘this’ will be enclosed by the constructor method
What does ‘this’ refer to?
The current context.
Roughly equivalent to ruby’s self.
How do you get a function in JS to implicitly return?
Make it a one-line fat-arrow function.
How does string interpolation work
backticks for quotes
${ … } to interpolate …
Fat arrow functions are like lambdas in which way?
They return execution to the context in which they are defined.
What happens if you send extra params to a method?
They are unused.
How do you access all arguments passed to a function?
They can be accessed via the ‘arguments’ array-like object available within the method
How do you treat arguments like an array?
arguments_as_an_actual_array = Array.prototype.slice.call(arguments)
OR (ES6)
Array.from(arguments)
With function-style invocation, what is ‘this’ set to?
window
With method-style invocation, what is ‘this’ set to?
the object that we call the method on
With constructor-style invocation, what happens behind the scenes? What is ‘this’ set to?
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.
Where is apply defined, what does it take as parameters and what does it do?
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
What’s the difference between apply and call?
Where would you use each?
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.
How do you set up a class using ES2015 sugar?
class MyClass {
constructor(arg1, arg2, ...) {
this.arg1=arg1
..
}
method1( ) { … }
}
Why do we assign a variable to the return value of require using node?
In JS, we don’t import a module’s global scope, so we have to store it into a variable.
How do we export a Class from a .js file in node?
// ./cat.js module.exports = ClassName
// ./main.js
require("./cat.js")
How do we import many js files from the same directory?
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")
What’s a callback
a function passed to another function
What’s the JS equivalent of Ruby’s splat operator?
… (the spread operator)
What are three ways to change the context of a function?
apply, call, bind
What happens when you rebind a function?
Nothing. The first bind is the only bind.
How do you use a closure to call a function (which is defined in a class) via method-style invocation?
- Within the closure, store that = this.
- 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
How do you call a function asynchronously?
use a built-in method like:
setTimeout, setInterval, …
What is the top-level class in JS? Why do we call it this?
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.
What are 3 ways to cause a a Dog object to inherit from an Animal object?
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
How do we set up a Dog’s constructor to call an Animal’s constructor (in the case that Dog inherits from Animal) ?
Within function Dog(name, breed), call:
Animal.call(this, name)
Note that we only pass in arguments that are taken by Animal’s constructor.
How do you set up inheritance between a Dog and Animal via a surrogate?
function Surrogate( ) { }
Surrogate.prototype = Animal.prototype
Dog.prototype = new Surrogate( );
How does inheritance in ES2015 work?
class Dog extends Animal {
constructor(a, b, c) { ... }
action( ) { ... }
}Why would you ever run code with setTimeout(…, 0) ?
To run something AFTER the current call stack is cleared, but not before.
Does setTimeout(…, 1000) guarantee that the event will be triggered in 1 second?
No. 1000 is the minimum delay.
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)
var Surrogate = function( ) { };
Surrogate.prototype = parent.prototype;
child.prototype = Surrogate.prototype;
child.prototype.constructor = child;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;
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.
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)
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( );
How would you explain .bind( ) in terms of closures?
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.
Name the one variable that does not get captured
this
What’s the difference between a statement and an expression?
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.
How do you make a single-expression fat arrow return an empty object rather than an empty block?
myFunc = ( ) => ( { } );
What will this return?
myFunc = ( ) => ( { } );
An empty object.
What will this return?
myFunc = ( ) => { };
An empty block.
Explain why the result of this function call is undefined:
let returnName = ( ) => this.name;
returnName.call( {name: 'Dale Cooper'} ) // undefined;
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.
How do you access the arguments object within a fat-arrow function?
You don’t.
What does .bind return?
A function that calls the original function from a specified context.
What does .push return? What doesn’t .push return?
It returns the length of the elongated array.
It doesn’t return the elongated array.
How do you import everything from a file and access it via dot syntax?
import * as AwesomeStuff from ‘someFile’;
AwesomeStuff.someFunction( );
