Frontend and Javascript Trivia Flashcards
How does prototypal inheritance work in JS?
All JS objects have a prototype property
Objects Linked To Other Objects (OLOO): If an object doesn’t have the property you’re trying to access, JS engine will traverse the prototype chain until it finds the property
How do you write testable components?
Creating single purpose DRY components
Writing semantic HTML/CSS
- Using the appropriate tags to accurately reflect what the component contains
Object Oriented Programming
Description
- Examples: Prototypes, OLOOs (objects linked to other objects)
- Imperative (inheritance) programming: set of instructions for the computer operations
- Let’s say we already have a class that defines an Animal, and now we want to make a Duck. It is an animal, but it needs to be able to fly and quack.
- In inheritance world, Duck extends Animal and adds the ability to fly/quack. Now those behaviors are tightly coupled with each other.
Pros
- As code evolves, easily extend new functionality by creating new classes which extends existing classes
- Existing classes can be left alone
Cons
- Shared state may lead to side effects: different variables/things competing for the same resources
- Highly OOP codebase can be extremely resistant to change: and very brittle compared to an equivalent FP codebase.
Functional Programming
Description
- Examples: closures, first class functions, lambdas (anon functions)
- Declarative (compositional) programming: concentrate on what to do, letting underlying functions take care of how (i.e. makeSorted() is declarative)
- In composition world, you isolate behaviors, and can give a class superpowers by adding it in like so canQuack(canFly(Animal))
- This reduced the amount of coupling that occurs and makes it easier to reuse behaviors. You can make a Pilot with canFly(Person) (see image for React version).
Pros
- Avoids shared state, mutable data and side effects
- Encourage function purity: self contained and stateless
- Easier to test b/c can be tested in isolation with typical
Cons
- Can be harder to read
DNS (Domain name system)
The way to map URL string (www.google.com) to IP Addresses
Compile time vs. Run time
Compile time:
- Interprets higher level language and converts it to machine language (binary language) executable code
- Things like:
- syntax parser
- fixed expression evaluation
Run time:
- Executes compiled code
- Whatever the compiler cannot do (due to lack of information) will be done at run-time
- values depending on variables / user input
- accessing current time
Breadth First Search
Fail Fast Principle
You want to catch bugs earlier leading to fewer defects in production code because…
-
compile/build time errors still compile
- syntax errors
- data type errors
-
run time errors will crash the consumer
- logical errors
- cannot import file
What do you expect to happen here?
Classical Inheritance vs. Prototypal Inheritance
JavaScript is a class-free, object-oriented language, and as such, it uses prototypal inheritance instead of classical inheritance
Classical Inheritance:
- instances inherit from classes (Java / C++)
- create tight coupling or hierarchies/taxonomies
- class Student { constructor(name) }
-
cannot invoke instance methods on class definition:
- class Student { constructor(name) this.name=name;}
- let student = new Student(‘Sally’)
- right: student.name // Sally
- wrong: Student.name
Prototypal Inheritance:
- instances inherit directly from other objects
- Object.create() / Object.assign()
- Objects Linking to Other Objects (OLOO): All JS objects have a private prototype property which holds a link to another object (recursive).
- When trying to access a property of an object, the property will not only be sought on the object but on the prototype chain until either a property with a matching name is found or the end of the prototype chain is reached
Depth First Search
What is rendering?
Parse HTML & CSS (construct DOM tree):
- Parse HTML => DOM Tree
- Parse CSS => Styling rules
Render Tree (RT): Combine both into a data structure called Render Tree aka a Frame Tree
Layout of Render Tree: position the elements (i.e. when floating to the left, it’ll put the element on the left)
Paint the Render Tree: Actual operation of drawing the graphics and painting it onto the screen (visual output)
How does the DOM traverse its nodes?
Depth First Search
What is a ReSTful API?
- REpresentational State Transfer.
- Uses standard HTTP (Hyper Text Transfer Protocol) commands to perform commands (get, post, put, delete) or exchange data with a service over a network
- Supports multiple technologies for data transfer such as text, xml, json, image etc.
- No contract defined between server and client, so loosely coupled implementation.
- Principles
- Client-server: Separate UI concerns from data storage concerns to improve portability of UI across multiple platforms
- Stateless: Request form client to server must contain all information necessary to understand request. Cannot store any context on server and session state is kept on client
Rendering
Reduce render-blocking requests
- load 3rd party styles with link tag in HTML instead of with @import in JS
-
load “above the fold” critical CSS first
- load critical CSS in the head tag above HTML
- load non-critical CSS in the script tag below HTML
Server-side render non-interactive content
- Good for Blog posts: server sends HTML (additional JS will needed to be “painted”) and blog posts don’t usually have interaction logic (JS) so it can render right away especially if the response is already cached.
Requests
More CDNs: if you want to increase speed, then decrease the space between your servers and the user
Reuse server connections to speed up requests
Have the backend resize images before sending over the requested size to the frontend
- prevents unnecessarily transmitting large files
- prevents frontend from resizing images first before rendering
Have service worker check for cached request and skip the network
- if cache has request, respond with cachedResponse otherwise, make request
Javascript:
Shorter prototype chains: JS uses prototypal inheritance model and lookup time for properties that are high up on the prototype chain (or non-existent properties) will traverse the entire prototype chain
Reuse already loaded data: If you’re going from “all jobs page” to “edit jobs page”, persist the state between page transitions so you don’t have to fetch for data again
- if “jobs” are edited often, only show the read-only data while fetching the updated data
What do you expect?
Function Assignment/Expression: var myFunction = function () {}; (hoisted to top last)
overrides
Variable Assignment: var myName = ‘Sally’; (hoisted to top third)
which overrides
Function Declaration: function myName () {}; (hoisted to top second)
which overrides
Variable Declaration: var myName; (hoisted to top first)
“By Value” data types
Primitives
- String
- Number
- Boolean
- null
- undefined
“By Reference” data type
Objects:
- Objects
- Array
- Function
What is Webpack?
Open source JS module bundler
Transforms frontend assets like HTML, CSS and images (if loaders are configured)
Input: modules/dependencies
Output: static assets representing these modules
What do you expect to happen?
1 is logged (explanation)
What is coersion?
What are meta tags?
metadata stuff (see picture)
What is Scope in JavaScript?
- Where a variable is available in your code
- Each function gets its own scope
- Reference to outer environment: If scope is nested within another scope, code in the innermost scope can access variables from either scope
What is SQL injection?
Why and when should I use Webpack?
What is Cross-Site Scripting (XSS)?
When to use the different function instantiation types:
- function() {}
- class
- () => {}
Explain Function.prototoype.bind
Classical Function Expressions vs. ES6 Arrow Function
Classical Function Expressions/Declarations
- this: is bound to different values based on the context in which it is called/invoked (CURRENT this)
- if you add a function/method to a native prototype, it will receive the _this_ from the context it was invoked
- constructuable and callable
ES6 Arrow Function
- this: is lexically bound which means it uses the this from the env the arrow func is defined i.e. where it’s contained (ORIGINAL this)
- if you add a function/method to a native prototype (i.e. String.prototype), this = window NOT the context it was invoked
- only callable
-
do not use for: Object methods, Prototype methods, Callbacks with dynamic context
- do not use for: anything involving this, arguments, or new
What do you expect?
When func is called/invoked, the context is now the Window object and loses reference to the count property
Async Await: What do you expect to happen?
Add1:
const a timer is created and immediately awaited (2s)
when that’s done…
const b timer is created and immediately awaited (2s)
only when both are done (4s) will it log the sum // 60
Add2:
const _p_a_ timer is created (0s)
const p_b timer is created (0s)
then…
p_a and p_b are both awaited at the same time (2s)
both are done at the same time which will then log // 60
Sequence of Ops:
- a is created and awaited (time = 0)
- a_p and a_b are created (time = 0)
- a_p and a_b are awaited concurrently (time = 0)
- a is finished so now b can be created and awaited (time = 2)
- a_p and a_b finishes at same time and add2 logs // 60 (time = 2)
- b is finished so add1 can now log // 60 (time = 4)
Javascript Event Loop
Browser includes:
- JS runtime (v8 engine): callstack
- native webApis: items pushed to queue like setTimeout
- rendering engine
Event (callback) loop: routinely checks if call/execution stack is empty, if TRUE: process events in event queue by pushing it into the callstack
Execution (Call) Context
Creation phase: when hoisting happens
- hoisting: set aside memory space for vars and functions and sets to undefined
- includes: var declarations, func decs, var assignments, func assignments
Execution phase: runs code line by line and assigns variable values
Do not confuse setting to undefined (first pass) with setting to actual value (second pass)
With every function call, a new execution context and closure (variable environment) are created with specific variable values (state) that are stored in-memory to be referenced later.
Uncaught ReferenceError vs. undefined
ReferenceError: variable is not in memory and not defined
undefined: variable is in memery and not defined
var vs. let vs. const — What do you expect?
var vs. let — What do you expect to happen?
The let statement declares a block scope local variable
What happens when you type “google.com” in your browser?
- Computer => DNS
- checks cache, localhost, then DNS
- gives URL, gets IP Address
- DNS => Server (at IP Address)
- Server => Computer
Internet Protocol Suite
The Internet protocol suite provides end-to-end data communication specifying how data should be packetized, addressed, transmitted, routed, and received. This functionality is organized into four abstraction layers, which classify all related protocols according to the scope of networking involved. From lowest to highest, the layers are…
- link layer - containing communication methods for data that remains within a single network segment (link);
- internet layer - providing internetworking between independent networks
- transport layer - handling host-to-host communication
- application layer - providing process-to-process data exchange for applications.
https://en.wikipedia.org/wiki/Internet_protocol_suite
Compiler vs. Interpreter
HTTP
Hypertext Transfer Protocol (HTTP) is an application-layer protocol for transmitting hypermedia documents, such as HTML. It was designed for communication between web browsers and web servers.
