Skip to content

Instantly share code, notes, and snippets.

@Spazcool

Spazcool/JS_and_FrontEnd_phone_screen_questions.md

Last active March 30, 2021 14:41
Show Gist options
  • Save Spazcool/62b3afd97b23e85d3aa0b81a8f7554f8 to your computer and use it in GitHub Desktop.
Save Spazcool/62b3afd97b23e85d3aa0b81a8f7554f8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
JS_and_FrontEnd_phone_screen_questions.md

What Happens When Your Browser Requests a Web Page?

  • Highest level = Client sends request to server > Server sends page/data to client

  • Slightly more nuance:

    1. Client sends HTTP request
    2. ISP via TCP/IP
    3. DNS (change name to ip)
    4. server receives request
    5. authentication / route matching ensues
    6. server responds with status and data

  • Also, CDNs (content delivery network), a middleman server between client and server that caches the data sent from server to client so that other clients nearby can then hit just the CDN server; all to drop initial load time.

Data Structures:

  • Linked list
    • like an array but with pointers instead of indices
    • singly, doubly, circular
    • Insertion is quick, look up for value is slower
  • Trees, binary tree,
    • Root node
    • 0, 1 or 2 children
    • Sort, reverse
  • Stack
    • Push/pop
    • LIFO
  • Queue
    • Enqueue/dequeue
    • FIFO
  • Map/Hash Table/Dictionary/Object
    • Key to value
  • Graph
    • Directed
    • Undirected
    • Nodes & edges

Algorithm:

  • Merge Sort
    • Divide & conquer
  • Binary Search
    • Sorted array
    • Middle of array,
    • Check if middle value is > or < value
    • If > go left else go right
    • Repeat
  • Breadth vs Depth
    • Depth go the bottom left then move right
    • Breadth down one then go all the way to the right
  • Memoization
    • Save previously calculated values to reduce calc time
    • Good on recursive or loops with intensive calls
    • Ex: fibanaci sequence
  • Recursion:
    • A function that calls itself till it reaches some end condition

Describe Big O Notation

  • Big O notation is the language we use for talking about how long an algorithm takes to run. It's how we compare the efficiency of different approaches to a problem.

  • With big O notation we express the runtime in terms of—brace yourself—how quickly it grows relative to the input, as the input gets arbitrarily large.

    • o(1) = same runtime independent of input

    • o(n) = runtime is linearly connected to input (eg. One for loop)

    • o(n^2) = runtime is quadratic to input (e.g. 2 nested for loops over the same data)

    • Drop constants, drop the less significant term

    • Usually talking about worst case

Describe web development to grandma

  • High level: the work required to build a website
  • Websites range in complexity from simple static HTML pages, think a landing page, to complex suites of micro-services that come and go based on a user’s permissions or location or search history, think Facebook.
  • The work varies from building what it looks like to connecting the user interaction to a DB to running background applications independent of a user’s interactions (e.g. notifications, weather alerts, etc)

Es5 VS es6

  • classes
  • Import vs require
  • Promises
  • Array destructuring
  • Arrow functions (this keyword)
  • Var let const
  • Data structures
    • Set
    • Map
  • Array functions
    • Map
    • filter
  • Async/Await (ES8)
  • Finally (ES9)
  • Object destructuring (ES9)

What is the DOM?

  • In memory object oriented tree representation of an HTML document
    • Includes API for direct manipulation of DOM elements/nodes (e.g. document.getElementById())
    • The reason for it: allows programs and scripts to dynamically access and update the content, structure, and style of a document. 
    • Anything found in a HTML document can be accessed, changed, deleted, or added using the Document Object Model.

How does virtual DOM work?

  • React makes a local copy of the DOM, or most of it anyways
  • Any change of data/state in an element is saved elicits a copy of the virtual DOM
  • Changes are then made
  • Virtual DOM & Virtual DOM copy are then compared for differences, aka diffing
  • With the list of diffed items, React updates the real DOM hitting just the parts that need updating, rather than serving a whole new server side HTML page

React leans toward SPA, allowing most of the resources to load just once in the lifespan of the app This is runtime not build time

Difference between react class & react hooks?

  • Battle between OOP & FP
  • Classes:
    • This keyword is required in classes to scope the state to the instance of the class
    • Life-cycle methods that are not present in hooks, but can be mimicked with various flavors of useEffect()
  • Benefits you get by using functional components in React: 1.Functional component are much easier to read and test because they are plain JavaScript functions without state or lifecycle-hooks 2.It has less code which makes it more readable

Why use promise vs Async/Await?

  • Await blocks the continued operations within the async function it has been called in
  • Async/await is syntactic sugar for promises
  • Scope is increased with async functions
    • Sequential/non-interacting code will need to be lifted out of the async function whereas with a normal promise the code can remain
  • Promise.all() is nice non-blocking solution when multiple async calls need to be made
  • Async/await is nice when you’re dealing with long .then() waterfalls, allowing you to wrap them all in one async function

What/how does an API work?

  • APIs are middlemen between other services, allowing shared resources.
  • Frontend needs to access DB, backend has some endpoints built in to facilitate this
    • If an app is large/complex enough the endpoints might be broken off into a separate file and/or further modularized to be shared with other applications

Restful?

  • Architectural style while SOAP is a protocol
  • It is a set of standards (not rules) that developers follow when they create their API.
    • Client - server
    • Stateless - one call doesn’t know about the other
    • Layered
    • cachable
  • Allows for the sharing of data between disparate systems (e.g. backend & front)
  • Made of 4 parts:
    • The endpoint (e.g. www.bob.com)
    • The method (e.g. POST, PUT, DELETE, GET)
    • The headers (e.g. metadata such as authentication & cookies)
    • The data (e.g. forms, JSON, text)
  • SOAP
    • Enterprise level apps
    • Tighter security through ssl & acid compliance

What is a closure?

  • A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.
  • To use a closure, define a function inside another function and expose it. To expose a function, return it or pass it to another function.
  • The inner function will have access to the variables in the outer function scope, even after the outer function has returned.
  • Similar to having private methods in a class
  • Dependent on JS’s ability to have first class functions
  • Closures are frequently used in JavaScript for object data privacy, in event handlers and callback functions, and in partial applications, currying, and other functional programming patterns.

What is a Promise?

  • A promise is an object that may produce a single value some time in the future… resolved or an error
  • uses 3 states : resolved, pending, rejected.
  • Can attach callbacks for dealing with resolved states

What is a first class function?

  • Function that can be taken by another function as an argument
  • Eg a callback function

What is a higher order function?

  • A function that can take another function as an argument

What is a pure function?

  • Function that returns the same output every time if the same input is put in
  • It does not mutate the state of the input value
  • Coffee grinder: beans in => grounds out, every time

Can you name two programming paradigms important for JavaScript app developers?

  • JavaScript is a multi-paradigm language, supporting imperative/procedural programming along with OOP (Object-Oriented Programming) and functional programming.
  • JavaScript supports OOP with prototypal inheritance.
  • JavaScript supports Functional programming (also: closures, first class functions, lambdas).

What is functional Programming?

  • the essence of FP is really very simple; programs are built mostly with a handful of very small, very reusable, very predictable pure functions:
    • Idempotence: same inputs … same outputs
    • Free from side effects: do not mutate any shared state or mutable arguments, and other than their return value, they don’t produce any observable output, including thrown exceptions, triggered events, I/O devices, network, console, display, logs, etc...
    • Because of the lack of shared state and side-effects, pure functions are much less likely to conflict with each other or cause bugs in unrelated parts of the program.
    • Lisp was the first one

What is the difference between classical inheritance and prototypal inheritance?

  • Classes: create tight coupling or hierarchies/taxonomies.
  • Prototypal inheritance: using object composition (ie.concatenative inheritance / add up a bunch of discrete objects to create a class-like obj) instances inherit directly from other objects. Instances are typically instantiated via factory functions or Object.create(). Instances may be composed from many different objects, allowing for easy selective inheritance.
    • Prototypes: mentions of concatenative inheritance, prototype delegation, functional inheritance, object composition.
    • Class taxonomies are not a given seeing as one can use selective inheritance
      • Class robot > Class vacuum
      • Class Animal > Class dog
      • Robot Dog

Functional Programming VS OOP:

  • FP:
    • Doesn’t rely on shared state to the same extent
    • Doesn’t carry the OOP baggage,
      • allowing for point-free functions (aka functions without parameters) and simplifying the functions
      • More terse/abstract functions can lower readability
    • Leans toward declarative styling
  • OOP:
    • Basic concepts, like inheritance are easy understand
      • More people are familiar/experienced with OOP vs FP
    • Leans toward imperative styling
    • Tends to rely upon shared state, which can lead to race conditions, (e.g. a car, bike, truck classes will have shared methods and if called in the same context may call upon shared state)

Declarative VS Imperative:

  • Declarative = tell it what to do (eg. array.filter)
  • Imperative = tell it how to do it (e.g. for loop with an if element[I] === x then push it into a new array)
  • Declarative is easier to read, less time wasted figuring out someone else’s code but is likely slower behind the scenes and may not be the ‘right’ choice for large data sets

MVC:

  • Software design pattern that breaks an application up into 3 distinct components:
    • View — Client : Displays visualization of the data to the user. Only connected to the controller.
    • Controller — Server : Processes server-side logic and acts as a middleware between View and Model, i.e. controlling the flow of data.
    • Model — Database : Processing data from or to the database. Only connected to the controller.

What are two-way data binding and one-way data flow, and how are they different?

  • 2-way = UI & Data can change each other,
  • 1-way = model is the single source of truth
  • React uses 1-way while Angular favors 2-way

What are the pros and cons of monolithic vs microservice architectures?

  • Mono:
    • The major advantage of the monolithic architecture is that most apps typically have a large number of cross-cutting concerns, such as logging, rate limiting, and security features such audit trails and DOS protection.
    • Monolithic architectures are also much harder to understand, because there may be dependencies, side-effects, and magic which are not obvious when you’re looking at a particular service or controller.
  • Micro:
    • Microservice architectures are typically better organized, since each microservice has a very specific job, and is not concerned with the jobs of other components. Decoupled services are also easier to recompose and reconfigure to serve the purposes of different apps (for example, serving both the web clients and public API).
    • As you’re building a new microservice architecture, you’re likely to discover lots of cross-cutting concerns that you did not anticipate at design time. A monolithic app could establish shared magic helpers or middleware to handle such cross-cutting concerns without much effort.

What is asynchronous programming, and why is it important in JavaScript?

  • Sync: Synchronous programming means that, barring conditionals and function calls, code is executed sequentially from top-to-bottom, blocking on long-running tasks such as network requests and disk I/O.
  • Async: Asynchronous programming means that the engine runs in an event loop. When a blocking operation is needed, the request is started, and the code keeps running without blocking for the result. When the response is ready, an interrupt is fired, which causes an event handler to be run, where the control flow continues. In this way, a single program thread can handle many concurrent operations.
    • Stack is sync
    • Async queue is separate
    • Every stack cycle there’s a check on Async calls being finished or not
      • If finished it is brought back in to the top of the stack
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment