Trivia

Question 1

What does it mean to be RESTful?

Answer 1

Representational State Transfer, design principles for making network communication scalable & flexible.

Fielding Constraints:

• Client-Server: network must be made of C’s & S’s
• Stateless: C’s & S’s don’t track each other’s state. Each request is treated as a standalone
• Uniform interface: there is a common language between S and C that allows each part to be swapped out or modified without breaking the entire system
  
  • A: identification of resources: URI’s, communication standard: HTTP
  • B: manipulation of resources through representations: sending usually JSON objects
  • C: self-descriptive messages: contains all the information that the recipient needs to understand it
  • D: hypermedia: data sent from the server to the client that contains information about what the client can do next. HTML is a type of hypermedia
• Caching: server responses should be labelled as either cacheable or non-cacheable
• Layered system: can be more components than just servers and clients, e.g. proxies
• Code on demand: ability for a server to send executable code to the client, e.g.

Question 2

Explain prototypes in JavaScript

Answer 2

JavaScript is often described as a prototype-based language — each object has a prototype object that acts as a template from which it inherits methods and properties. An object’s prototype object may also have a prototype object, which it inherits methods and properties from, and so on. This is often referred to as a prototype chain, and explains why different objects have properties and methods defined on other objects available to them.

To be exact, the properties and methods are defined on the prototype property on the Objects’ constructor functions, not the object instances themselves.

In classic OOP, classes are defined, then when object instances are created all the properties and methods defined on the class are copied over to the instance. In JavaScript, they are not copied over — instead, a link is made between the object instance and its prototype (its __proto__ property, which is derived from the prototype property on the constructor), and the properties and methods are found by walking up the chain of prototypes.

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes

Question 3

Key differences between HTML4 and HTML5

Answer 3

1. Simplified and Clear Syntax
2. Multimedia Elements
3. Accessing User Geographical location
4. Client Side storage
5. Client Server Communication (websockets)
6. JavaScript Threading Mechanism
7. Browser Compatibility

https://www.webcodegeeks.com/html5/top-10-major-advantages-html5/

Question 4

List the key benefits that HTML5 introduced.

Answer 4

1. Mutuality
2. Cleaner markup / Improved Code
3. Improved Semantics
4. Elegant forms
5. Consistency
6. Improved Accessibility
7. Fulfill the need of Web application
8. Offline Application cache
9. Client-side database
10. Geolocation support

https://www.webcodegeeks.com/html5/top-10-major-advantages-html5/

Question 5

How do media queries work?

Answer 5

Works by checking the width of the screen accessing the site.

https://www.htmlgoodies.com/beyond/css/introduction-to-css-media-queries.html

Question 6

What is a JS closure?

Answer 6

A closure is an inner function that has access to the outer (enclosing) function’s variables—scope chain. The closure has three scope chains: it has access to its own scope (variables defined between its curly brackets), it has access to the outer function’s variables, and it has access to the global variables.

The inner function has access not only to the outer function’s variables, but also to the outer function’s parameters. Note that the inner function cannot call the outer function’s arguments object, however, even though it can call the outer function’s parameters directly.

You create a closure by adding a function inside another function.

http://javascriptissexy.com/understand-javascript-closures-with-ease/

Question 7

Describe variable scope. (JS)

Answer 7

A variable’s scope is the context in which the variable exists. The scope specifies from where you can access a variable and whether you have access to the variable in that context.

Unlike most programming languages, JavaScript does not have block-level scope (variables scoped to surrounding curly brackets); instead, JavaScript has function-level scope. Variables declared within a function are local variables and are only accessible within that function or by functions inside that function. Global scope functions are available to the entire application.

http://javascriptissexy.com/javascript-variable-scope-and-hoisting-explained/

Question 8

Describe variable hoisting. (JS)

Answer 8

Hoisting describes what happens when the JavaScript engine encounters an identifier, such as a variable or function declaration; when it does this, it acts as if it literally lifts (hoists) that declaration (but not the assignment) up to the top of the current scope.

All variable declarations are hoisted (lifted and declared) to the top of the function, if defined in a function, or the top of the global context, if outside a function.

It is important to know that only variable declarations are hoisted to the top, not variable initialization or assignments (when the variable is assigned a value).

Function declaration overrides variable declaration when hoisted. Both function declaration and variable declarations are hoisted to the top of the containing scope, and function declaration takes precedence over variable declarations, but not over variable assignment.

http://javascriptissexy.com/javascript-variable-scope-and-hoisting-explained/

Question 9

Describe scope chain. (JS)

Answer 9

When trying to access an identifier in JavaScript, the browser will first look for the variable inside the current scope. If it is not found, the browser will then look in the parent scope of the current scope, and will keep moving up through the parent scopes until it either finds the variable, or reaches the global scope. If the variable still isn’t found in the global scope, the browser will generate a ReferenceError. The nested scopes are known as a scope chain, and this process of checking the current scope and then the parent scopes is known as a variable look-up. This look-up is only able to go up the scope chain, it will never look inside child scopes of the current scope.

http://javascriptissexy.com/understanding-es2015-in-depth-part-1-block-scope-with-let-and-const/

Question 10

Describe block scope in JS.

Answer 10

Block scope, introduced in ES2015, can be created by using let or const statements inside a block (one or more statements within curly brackets).

Conditional expressions, such as if, for, and while statements, all use blocks to execute statements based on certain conditions.

Block scope means that a block is able to create its own scope, rather than simply existing within the scope created by its nearest parent function, or the global scope. Block scopes work the same as function scopes work, but they are created for blocks, rather than functions.

Question 11

Describe the two JS phases.

Answer 11

Parsing phase: code is read by the JavaScript engine, which allocates memory for variables and scope creation (hoisting happens here).

Execution phase: code that has been parsed is executed.

Question 12

Differences between let, const, and var. (JS)

Answer 12

let and var are used to declare mutable (changeable) variables.
const is used to declare an immutable variable; the value cannot be reassigned or redeclared, and it must be initialized with a value. It’s similar to let, regarding the TDZ

let and const have two broad differences from var:

1) they are block scoped
2) accessing a var before it is declared has the result undefined; accessing a let or const before it is declared throws ReferenceError (TDZ). (hoisting)

Question 13

What is the temporal dead zone (TDZ)? (JS)

Answer 13

Due to hoisting, accessing a var before it is declared has the result ‘undefined’; accessing a let or const before it is declared throws ReferenceError.

The TDZ exists from the moment the scope is initialized to the moment the variable is declared. To fix the ReferenceError, we need to declare the variable before trying to access it.

The TDZ helps to highlight bugs—accessing a value before it has been declared is rarely intentional.

Question 14

Give a high level overview of how CSS grids work.

Answer 14

CSS grids are used to create a layout/template of a website so that it can still look nice when resized to different viewpoints. Removes superfluous html markups, keeps code cleaner.
Grid stuff:
- container: element containing a grid (display: grid)
- item: any direct descendant of container
- line: row/column lines separating grid into sections
- cell: any cell inside grid
- area: rectangular area (multiple cells)
- track: space between 2 or more lines, row tracks horizontal, column tracks vertical
- gap: empty space between tracks

https://www.sitepoint.com/understanding-css-grid-systems/

Question 15

What are the steps for DFS vs BFS on a graph?

Answer 15

The depth-first algorithm sticks with one path, following that path down a graph structure until it ends.

The breadth-first search approach, however, evaluates all the possible paths from a given node equally, checking all potential vertices from one node together, and comparing them simultaneously.

Question 16

What happens when you type “maps.google.com” into the address bar and hit enter?

Answer 16

1. The browser checks the cache(s) for a DNS record to find the corresponding IP address of maps.google.com. (4 checks in order: browser cache, OS cache, router cache, then ISP cache).
2. If the requested URL is not in the cache, ISP’s DNS server initiates a (recursive) DNS query to find the IP address of the server that hosts maps.google.com.
3. Browser initiates a TCP connection with the server. (TCP/IP three-way handshake, sync/acknowledge)
4. The browser sends an HTTP request to the web server. (GET request, etc)
5. The server handles the request and sends back a response.
6. The server sends out an HTTP response.
7. The browser displays the HTML content (for HTML responses which is the most common).

in depth: https://github.com/alex/what-happens-when

Question 17

Explain the different ways that graphs can be represented. What are the pros and cons of various ways of representing graphs.

Answer 17

1. Adjacency Matrix -

Pros: Efficient for time. Representation is easier to implement and follow. Finding if two nodes are connected, removing an edge, takes O(1) time. Queries like whether there is an edge from vertex ‘u’ to vertex ‘v’ are efficient and can be done O(1).

Cons: Inefficient for space (V^2). Consumes more space O(V^2). Even if the graph is sparse, it consumes the same space. Adding a vertex is O(V^2) time.

2. Adjacency List -

Pros: Saves space O(|V|+|E|). In the worst case, there can be C(V, 2) number of edges in a graph thus consuming O(V^2) space. Adding a vertex is easier.

Cons: Queries like whether there is an edge from vertex u to vertex v are not efficient and can be done O(V).

https://www.geeksforgeeks.org/graph-and-its-representations/

Question 18

What is the event loop? How does it work?

Answer 18

The Event Loop is a queue of callback functions. When an async function executes, the callback function is pushed into the queue. The JavaScript engine doesn’t start processing the event loop until the code after an async function has executed.

Question 19

What lifecycle methods get called in the mounting phase? What are the use cases for each of those methods?

Answer 19

willMount - anything that might need to be done just before the component mounts and appears in the DOM

didMount - anything with DOM manipulation specifically including the component that just mounted

Question 20

Explain the steps of topological sort.

Answer 20

Steps involved in finding the topological ordering of a DAG (directed acyclic graph):

Step-1: Compute in-degree (# of incoming edges) for each vertex and initialize the count of visited nodes as 0.

Step-2: Pick all the vertices with in-degree as 0 and add them into a queue (Enqueue operation)

Step-3: Remove a vertex from the queue (Dequeue operation) and then.Increment count of visited nodes by 1.Decrease in-degree by 1 for all its neighboring nodes.If in-degree of a neighboring nodes is reduced to zero, then add it to the queue.

Step-4: Repeat Step 3 until the queue is empty.

Step-5: If count of visited nodes is not equal to the number of nodes in the graph then the topological sort is not possible for the given graph.

Question 21

What is TCP? When is it used? How does it work?

Answer 21

TCP/IP - Transmission Control Protocol / Internet Protocol

When used - To direct data to specific addresses

How it works - chops up data into smaller packets sent individually through the quickest path. Each packet has a header so that it can be put back together again.

Question 22

What’s an IFFE? When would you use it?

Answer 22

Immediate Invoked Function Expression - a function expression that is called immediately after you define it. It is usually used when you want to create a new variable scope.

Why use it? - Enables you to attach private data to a function.
Creates fresh environments.
Avoids polluting the global namespace.

Question 23

What lifecycle methods get called in the update phase? What are the use cases for each of those methods? What method gets called in the unmounting phase?

Answer 23

shouldUpdate
willUpdate
didUpdate

Question 24

What does asymptotic runtime mean?

Answer 24

The term asymptotic means approaching a value or curve arbitrarily closely… So in laymen’s terms, “Worst case”.

Question 25

What is ‘this’ in JS?

Answer 25

We use the this keyword as a shortcut, a reference to an object that the function (where this is used) is bound to; that is, the subject in context, or the subject of the executing code.

Question 26

What is a promise? (JS)

Answer 26

A promise is an object that may produce a single value some time in the future: either a resolved value, or a reason that it’s not resolved (e.g., a network error occurred). A promise may be in one of 3 possible states: fulfilled, rejected, or pending. Promise users can attach callbacks to handle the fulfilled value or the reason for rejection.

Promises are eager, meaning that a promise will start doing whatever task you give it as soon as the promise constructor is invoked.

Question 27

How do you test for NaN?

Answer 27

isNaN(value)

NaN values are generated when arithmetic operations result in undefined or unrepresentable values.

Unlike all other possible values in JavaScript, it is not possible to rely on the equality operators (== and ===) to determine whether a value is NaN or not, because both NaN == NaN and NaN === NaN evaluate to false.

Question 28

== vs === (JS)

Answer 28

The identity (===) operator behaves identically to the equality (==) operator except no type conversion is done, and the types must be the same to be considered equal.

The == operator will compare for equality after doing any necessary type conversions. The === operator will not do the conversion, so if two values are not the same type === will simply return false. Both are equally quick.

Question 29

Functional vs Class components (RN)

Answer 29

Functional:

• used for presenting static data
• can’t handle fetching of data
• easy to write

const Header = () => {
  return Hi!
}

Class:

• used for dynamic sources of data
• handles any data that might change (fetching data, user events, etc)
• knows when it gets rendered to the device (useful for data fetching)
• more code to write

class Header extends Component {
  render () {
    return Hi!
  }
}

Question 30

Rules of State (react)

Answer 30

• State is a plain javascript object used to record and respond to user-triggered events.
• Only used for class-based components
• When we need to update what a component shows, call ‘this.setState’.
• Only change state with ‘setState’, never ‘this.state = 123’

Question 31

props vs state (react)

Answer 31

props is for parent to child communications.

state is for a components internal record keeping. used for updating data over time.

Question 32

Properties of graphs

Answer 32

• Directed: one way edges, max # edges: n(n-1)
• Undirected: bidirectional, two-way edges, max # edges: (n(n-1) / 2) (no self loop or multi-edges)
• Dense: approaches max (adjacency matrix)
• Sparse: kinda not dense (adjacency list)
• Walk: sequence of V’s where each adjacent pair is connected by an E.
• Simple Path: no Vs or Es are repeated
• Trail: a walk in which no Es are repeated
• Closed walk starts & ends at same V (AKA cycle)
• Simple cycle: closed walk, no repetition (V or E) other than start and end
• Acyclic graph: graph w/no cycles
• Connected: path from any V to any other V (‘strongly connected’ in directed graph)

Question 33

name all the JS types

Answer 33

There are 7 built-in types: null, undefined , boolean, number, string, object and symbol (ES6).

All of these are types are called primitives, except for object.

Question 34

Null vs Undefined

Answer 34

Undefined is the absence of a definition. It is used as the default value for uninitialized variables, function arguments that were not provided and missing properties of objects. Functions return undefined when nothing has been explicitly returned.

Null is the absence of a value. It is an assignment value that can be assigned to a variable as a representation of ‘no-value’.

Question 35

JS coercions. name all falsey coercions

Answer 35

Falsy values are values that will be coerced to false when forced a boolean coercion on it.

Falsy values: “”, 0, null, undefined, NaN, false.

Boolean(null)         // false
Boolean('hello')      // true 
Boolean(null)         // false
Boolean('hello')      // true 
Boolean('0')          // true 
Boolean(' ')          // true 
Boolean([])           // true 
Boolean(function(){}) // true

Question 36

explain == vs. === (js)

Answer 36

It is widely spread that == checks for equality and === checks for equality and type. Well, that is a misconception.
== checks for equality with coercion and === checks for equality without coercion — strict equality.

Question 37

Explain use cases for React lifecycle methods.

Answer 37

• componentWillMount: App configuration in your root component
• componentDidMount: Starting AJAX calls to load in data for your component.
• componentWillReceiveProps: Acting on particular prop changes to trigger state transitions.
• shouldComponentUpdate: Controlling exactly when your component will re-render, should always return boolean.
• componentWillUpdate: Used instead of componentWillReceiveProps on a component that also has shouldComponentUpdate (but no access to previous props).
• componentDidUpdate: Updating the DOM in response to prop or state changes.
• componentWillUnmount: Cleaning up any leftover debris from your component.

Question 38

what are applications of graph searches?

Answer 38

• web crawling (google goes bfs)
• social networking
• network broadcast
• garbage collection (bfs)
• model checking
• checking math conjectures
• puzzles and games

Question 39

URL, TCP/IP, SSL, TLS

Answer 39

• Uniform Resource Locator
• Transmission Control Protocol, Internet Protocol
• Secure Sockets Layer
• Transport Layer Security

Question 40

IIFE

Answer 40

Immediate Invoked Function Expression

• Used when you want to create a new variable scope.
• Enables you to attach private data to a function.
• Creates fresh environments.
• Avoids polluting the global namespace.