Advanced Javascript Flashcards

1
Q

What is a closure?

A

A function bundled with its lexical environment. (Variables in scope.)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

When are closures created?

A

Function creation time.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What is a promise?

A

An object which represents a potential future value or error (reason that it can’t resolve).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What is the purpose of a promise?

A

Solves the callback function pyramid of doom.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What is functional programming?

A

Programming using pure functions as the atomic unit of composition, avoiding shared mutable state, and side-effects. Higher order functions for abstractions, favoring declarative style over imperative.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What is a pure function?

A

Given same arguments => same output, no side effects. A.k.a deterministic.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Is Math.max() a pure function?

A

Yes, no side effect.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Is localStorage.setItem() a pure function?

A

No, has the side effect of storing information to browser.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Is Math.random() a pure function?

A

No, not deterministic (different output with same input).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Is console.log() a pure function?

A

No, changes the state of the console, which is observable outside the function

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Is throw new Error(‘Foo’) a pure function?

A

No, has the side effect of throwing an error (unless you’re inside a promise, then it will just reject)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What is the issue with 2-way data binding?

A

There’s more than one place responsible for changes, making it harder to understand how things changed and how the application state got into the state it’s in.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Why would someone choose React?

A
  • Deterministic view rendering.
  • 1-way data flow. Props and component state are immutable. While the component is rendering, props and state CAN’T change.
  • React components are just functions. If you know JavaScript and HTML, congrats! You’re 90% done learning React.
  • React does not use templates. JSX is a syntax extension to JavaScript - just use JavaScript map, filter, for, if, etc…
  • Synthetic events - event pools, automatic event delegation
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What is the purpose of React Hooks?

A

Provides high-level access to React’s low-level component lifecycle capabilities. (useState, useReducer, useEffect, useRef) - great for making code more modular, separating concerns, etc.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What is point-free style?

A

Writing functions without mention of the arguments.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What is a curried function?

A

A function that takes multiple arguments by taking one argument per invocation. Takes an argument and returns a function until no arguments are left, then returns the result.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What is a partial application?

A

A function which has already been applied to some, but not yet all of its arguments.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

What is function composition?

A

Function composition is the process of applying a function to the return value of another function.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

What is encapsulation?

A

The bundling of data and the methods that act on that data such that access to that data is restricted from outside the bundle. In OOP, that means that an object stores its state privately, and only the object’s methods have access to change it.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

What is the problem with shared mutable state?

A

If your input state depends on some other instruction’s output state, and any sort of concurrency arises, it creates race conditions. If you change the order in which instructions are called, it can alter the results. Mix in any sort of non-determinism in sequencing, and the result is chaos: unpredictable, unprovable, seemingly random application state. Sometimes it works. Sometimes it doesn’t.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

What is the purpose of encapsulation?

A

It helps you obey at least three key principles of software design:
1. Avoid shared mutable state. “Nondeterminism = parallel processing + mutable state” — Martin Odersky, designer of the Scala programming language

  1. “Program to an interface, not an implementation.” — Gang of Four, “Design Patterns: Elements of Reusable Object Oriented Software”
  2. “A small change in requirements should necessitate a correspondingly small change in the software.” — N. D. Birrell, M. A. Ould, “A Practical Handbook for Software Development”

Limit the attack surface for hackers.

22
Q

What is a higher order function?

A

A function that takes a function as an argument, or returns a function.

23
Q

What does it mean for JavaScript to have first class functions?

A

Just like numbers, strings, or objects, functions can be:

  • Assigned as an identifier (variable) value
  • Assigned to object property values
  • Passed as arguments
  • Returned from functions
24
Q

What is a priviledged method?

A

A method which has access to the private data inside the containing function’s scope (also known as the lexical environment).

25
Q

How is encapsulation achieved?

A

By using structures that communicate only through message passing. This accomplishes the Hiding, Retention and Protection of state processes (the algorithms and structures used to manipulate state).

26
Q

What do higher-order functions provide?

A
  • Abstraction
  • Locality
  • Parametric Polymorphism
27
Q

How does John Maeda define simplicity?

A

“Simplicity is removing the obvious, and adding the meaningful.”

28
Q

What are the 2 principles of great abstractions?

A
  • Generalization: Remove the stuff that is repeated (the obvious)
  • Specialization: Add only what’s different (the meaningful)
29
Q

What is locality?

A

The ability to understand the effects of a module without understanding the full scope of everything else in the system.

30
Q

What is parametric polymorphism?

A

When there is only one implementation of a function, and it works generically (as in generic programming) over any type of data that support the requirements of the function.

Does not require type detection or multiple implementations like ad-hoc polymorphism or dynamic dispatch.

31
Q

What is a factory function?

A

A factory function is any function which is not a class or constructor that returns a (presumably new) object. In JavaScript, any function can return an object. When it does so without the new keyword, it’s a factory function.

32
Q

Why use a factory function?

A

They offer the ability to easily produce object instances without diving into the complexities of classes and the new keyword.

33
Q

What are the features of class inheritance?

A
  • A class is like a blueprint — a description of the object to be created.
  • Classes inherit from classes and create subclass relationships: hierarchical class taxonomies.
  • Instances are typically instantiated via constructor functions with the new keyword.
  • JavaScript’s class inheritance uses the prototype chain to wire the child Constructor.prototype to the parent Constructor.prototype for delegation. Usually, the super() constructor is also called. Those steps form single-ancestor parent/child hierarchies and create the tightest coupling available in OO design.
34
Q

What are the features of prototypal inheritance?

A
  • A prototype is a working object instance.
  • Objects inherit directly from other objects.
  • Instances may be composed from many different source objects, allowing for easy selective inheritance and a flat [[Prototype]] delegation hierarchy. In other words, class taxonomies are not an automatic side-effect of prototypal OO: a critical distinction.
  • Instances are typically instantiated via factory functions, object literals, or Object.create().
35
Q

What problems does class inheritance create?

A
  • The tight coupling problem (class inheritance is the tightest coupling available in oo design), which leads to the next one…
  • The fragile base class problem (updating a base class will eventually break a subclass)
  • Inflexible hierarchy problem (eventually, all evolving hierarchies are wrong for new uses)
  • The duplication by necessity problem (due to inflexible hierarchies, new use cases are often shoe-horned in by duplicating, rather than adapting existing code)
  • The Gorilla/banana problem (What you wanted was a banana, but what you got was a gorilla holding the banana, and the entire jungle)
36
Q

What are the 3 kinds of prototypal inheritance?

A
  • Concatenative inheritance: The process of inheriting features directly from one object to another by copying the source objects properties. (Object.assign)
  • Prototype delegation: In JavaScript, an object may have a link to a prototype for delegation. If a property is not found on the object, the lookup is delegated to the delegate prototype, which may have a link to its own delegate prototype, and so on up the chain until you arrive at Object.prototype, which is the root delegate.
  • Functional inheritance: In JavaScript, any function can create an object. When that function is not a constructor (or class), it’s called a factory function. Functional inheritance works by producing an object from a factory, and extending the produced object by assigning properties to it directly (using concatenative inheritance).
37
Q

What are two important use cases for encapsulation in JavaScript?

A
  1. Curry/partial application (encapsulated state fixed in the closure scope)
  2. Object data privacy (state process encapsulated in closure scope of a factory or constructor)
38
Q

How do you write tests the RITE way?

A
  • Readable
  • Isolated OR Integrated
  • Thorough (Tests unexpected/malicious behavior)
  • Explicit (Avoid “magic” and shared mutable state)
39
Q

What are the 5 questions that every unit test must answer?

A
  1. What component is being tested?
  2. What behavior of the component is being tested (test setup/givens)?
  3. What are the actual results?
  4. What are the expected results?
  5. How can the actual results be reproduced?
40
Q

What is the main difference between a factory function and a constructor?

A

Factories create new instances without new, while constructors almost always require it.

41
Q

What does “new” do?

A
  1. Creates a new instance and binds “this” to it in the constructor
  2. Binds instance.__proto__ => Contructor.prototype
  3. Binds instance.__proto__.constructor => Constructor
  4. Implicitly returns “this” (the instance)
42
Q

What are 2 examples of how factory functions are more flexible than constructors?

A
  1. Objects pools - Since constructors immediately create a new instance, it’s not possible to avoid the garbage collector
  2. Abstract factories - When “new” is used, it is usually assumed that “instance.__proto__” is bound to Constructor.prototype, and that instanceof will work as expected. That will not be the case in an abstract factory.
43
Q

How does “instanceof” work?

A

Instead of telling you whether a constructor created something, it does a === equality check to see if the Constructor.prototype exists in the instance.__proto__ chain.

44
Q

How does “instanceof” lie?

A
  1. Fails across memory realms (e.g. iframe, workers, electron webview, child process) because the equality check happens within individual memory realm.
  2. If instance.__proto__ or Constructor.prototype get reassigned, instanceof can deliver either false positives or false negatives.
45
Q

Why might you use a constructor?

A
  1. Performance - Constructor instance property lookups can be 10x faster, but the difference is usually not relevant.
  2. When in Rome (working with a team that relies on familiarty with constructors)
46
Q

What is object composition?

A

Assembling or composing objects to get more complex behavior. The output is a composite object, which can be constructed from primitive data types or other composite types.

47
Q

What is composition by aggregation?

A

Forming an object from an enumerable collection of sub-objects. Each sub-object retains its own reference identity, such that it could be destructured from the aggregation.

48
Q

What is composition by concatenation?

A

Forming an object by adding new properties to an existing object.

49
Q

How can you use classes safely?

A
  1. Resist making classes your public API (Wrap in factories)
  2. Don’t inherit more than once
  3. Don’t make super calls from methods (override completely)
  4. Don’t expect people to use your classes (use duck typing instead of instanceof)
  5. Learn functional programming (Don’t think in classes)
  6. Trust your framework (React)
50
Q

When is mocking required?

A

When our supposed atomic units of composition are not really atomic and our decomposition strategy has failed to decompose the larger problem into smaller, independent problems.

51
Q

How can tight coupling be fixed?

A
  1. Use pure functions to compose (instead of classes, imperative procedures, or mutating functions)
  2. Isolate side-effects from the rest of your program logic (e.g. network I/O, rendering UI, logging)
  3. Remove dependent logic from imperative compositions so that they become declarative compositions that don’t require their own unit tests.
52
Q

Why write tests?

A
  • Makes change less scary
  • Fewer bugs in production
  • Simplifies debugging by providing a bug report