Flashcards
Untitled
Cards in this deck (32)
- 1QuestionAnswer
- 2What happens when I type “google.com” into a browser?1. browser checks cache; if requested object is in cache and is fresh, skip to #9
2. browser asks OS for server's IP address
3. OS makes a DNS lookup and replies the IP address to the browser
4. browser opens a TCP connection to server (this step is much more complex with HTTPS)
5. browser sends the HTTP request through TCP connection
6. browser receives HTTP response and may close the TCP connection, or reuse it for another request
7. browser checks if the response is a redirect or a conditional response (3xx result status codes), authorization request (401), error (4xx and 5xx), etc.; these are handled differently from normal responses (2xx)
8. if cacheable, response is stored in cache
9. browser decodes response (e.g. if it's gzipped)
10. browser determines what to do with response (e.g. is it a HTML page, is it an image, is it a sound clip?)
11. browser renders response, or offers a download dialog for unrecognized types - 3What is the difference between classical inheritance and prototypal inheritance?Class Inheritance: instances inherit from classes (like a blueprint — a description of the class), and create sub-class relationships: hierarchical class taxonomies. Instances are typically instantiated via constructor functions with the `new` keyword. Class inheritance may or may not use the `class` keyword from ES6.
Prototypal Inheritance: 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.
Good to hear:
- Classes: create tight coupling or hierarchies/taxonomies.
- Prototypes: mentions of concatenative inheritance, prototype delegation, functional inheritance, object composition.
Red Flags:
- No preference for prototypal inheritance & composition over class inheritance. - 4Explain the difference between a Promise and “async - await”test
- 5When is JavaScript run?test
- 6What are two-way data binding and one-way data flow, and how are they different?Two way data binding means that UI fields are bound to model data dynamically such that when a UI field changes, the model data changes with it and vice-versa.
One way data flow means that the model is the single source of truth. Changes in the UI trigger messages that signal user intent to the model (or “store” in React). Only the model has the access to change the app’s state. The effect is that data always flows in a single direction, which makes it easier to understand.
One way data flows are deterministic, whereas two-way binding can cause side-effects which are harder to follow and understand.
Good to hear:
- React is the new canonical example of one-way data flow, so mentions of React are a good signal. Cycle.js is another popular implementation of uni-directional data flow.
- (Old) Angular is a popular framework which uses two-way binding.
Red flags:
- No understanding of what either one means. Unable to articulate the difference. - 7What are the pros and cons of monolithic vs microservice architectures?test
- 8What is asynchronous programming, and why is it important in JavaScript?test
- 9What is a “closure” in JavaScript? Provide an example.A closure is an inner function that has access to the variables in the outer (enclosing) function’s scope chain. The closure has access to variables in three scopes; specifically:
(1) variable in its own scope,
(2) variables in the enclosing function’s scope, and
(3) global variables.
-------------------------------------------
-------------------------------------------
var globalVar = "xyz";
(function outerFunc(outerArg) {
var outerVar = 'a';
(function innerFunc(innerArg) {
var innerVar = 'b';
console.log(
"outerArg = " + outerArg + "\n" +
"innerArg = " + innerArg + "\n" +
"outerVar = " + outerVar + "\n" +
"innerVar = " + innerVar + "\n" +
"globalVar = " + globalVar);
})(456);
})(123); - 10What is the significance of, and reason for, wrapping the entire content of a JavaScript source file in a function block?This is an increasingly common practice, employed by many popular JavaScript libraries (jQuery, Node.js, etc.). This technique creates a closure around the entire contents of the file which, perhaps most importantly, creates a private namespace and thereby helps avoid potential name clashes between different JavaScript modules and libraries.
Another feature of this technique is to allow for an easily referenceable (presumably shorter) alias for a global variable. This is often used, for example, in jQuery plugins. jQuery allows you to disable the $ reference to the jQuery namespace, using jQuery.noConflict(). - 11What will the following code output and why: var hero = { _name: 'John Doe', getSecretIdentity: function (){ return this._name; } }; var stoleSecretIdentity = hero.getSecretIdentity; console.log(stoleSecretIdentity()); console.log(hero.getSecretIdentity());The code will output:
undefined
John Doe
The first console.log prints undefined because we are extracting the method from the hero object, so stoleSecretIdentity() is being invoked in the global context (i.e., the window object) where the _name property does not exist.
One way to fix the stoleSecretIdentity() function is as follows:
var stoleSecretIdentity = hero.getSecretIdentity.bind(hero); - 12What do the following lines output, and why? console.log(1 < 2 < 3); console.log(3 > 2 > 1);The first statement returns true which is as expected.
The second returns false because of how the engine works regarding operator associativity for < and >. It compares left to right, so 3 > 2 > 1 JavaScript translates to true > 1. true has value 1, so it then compares 1 > 1, which is false. - 13How can you find the type of an Array?test
- 14What are JavaScript Data Types?- Boolean – Represents true and false values.
- Null – Represents empty, nothing, and unknown type of values
- Number – Represents both integer and floating-point values.
- Object – Used for storing collections of data or more complex entities
- String – Represents single-character, multi-character, and alphanumeric values.
- Symbol – Used for creating unique identifiers for objects
- Undefined – Represents value not assigned. If a variable is only declared and not assigned in JS, it represents the undefined data type. - 15What would be the result of 3+2+"7"?Since 3 and 2 are integers, they will be added numerically. And since 7 is a string, its concatenation will be done. So the result would be 57.
- 16Define event bubbling?test
- 17What is a "fat arrow" function, and what are the benefits of it?test
- 18Explain the difference between an JavaScript Object and a Map.test
- 19What is a Weakset?test
- 20What are the states of promises in ES6?- Pending: It is the initial state of every promise. It represents that the result has not been computed yet.
- Fulfilled: It represents the completion of an operation.
- Rejected: It represents the failure that occurs during computation. - 21Name two common uses for closures?testtest
- 22Explain CORS.test
- 23Explain a Singleton with an example.test
- 24What is Event Delegation?Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.
- 25Explain HTTP.HTTP (HyperText Transfer Protocol)
- HTTP is connectionless: after making the request, the client disconnects from the server, then when the response is ready the server re-establishes the connection again toe deliver the response.
- HTTP can deliver any sort of data, as long as the two computers are able to read it
- The HTTP is stateless: the client and server know about each other only during the current request, if it closes, and the two computers want to connect again, they need to provide info to each other anew, and the connection is handles as is the very first time - 26Status Codes: 1xxInformational
No 1xx status codes are defined, and they are reserved for experimental purposes only. - 27Status Codes: 2xxSuccessful
- Means that the request was processed successfully.
- 200 OK
- Means that the server did whatever the client wanted it to, and all is well.
- The rest of the 2xx status codes are mainly meant for script processing and are not often used. - 28Status Codes: 3xxRedirection
- Means that the resource is somewhere else and that the client should try again at a new address.
- 301 Moved permanently
----- The resource the client requested is somewhere else, and the client should go there to get it. Any links or other references to this resource should be updated.
- 302 Moved temporarily
----- This means the same as the 301 response, but links should now not be updated, since the resource may be moved again in the future.
- 304 Not modified
----- This response can be returned if the client used the if-modified-since header field and the resource has not been modified since the given time. Simply means that the cached version should be displayed for the user. - 29Status Codes: 4xxClient error
- Means that the client screwed up somehow, usually by asking for something it should not have asked for.
- 400: Bad request
----- The request sent by the client didn't have the correct syntax.
- 401: Unauthorized
----- Means that the client is not allowed to access the resource. This may change if the client retries with an authorization header.
- 403: Forbidden
----- The client is not allowed to access the resource and authorization will not help.
- 404: Not found
----- Seen this one before? :) It means that the server has not heard of the resource and has no further clues as to what the client should do about it. In other words: dead link. - 30Status Codes: 5xxServer error
- This means that the server screwed up or that it couldn't do as the client requested.
- 500: Internal server error
----- Something went wrong inside the server.
- 501: Not implemented
----- The request method is not supported by the server.
- 503: Service unavailable
----- This sometimes happens if the server is too heavily loaded and cannot service the request. Usually, the solution is for the client to wait a while and try again. - 31CSS: Name some "block" level elements.- - - -
- - - - - -
- - - -
- through - - -
- - - - -
- - - - -
- - - 32CSS: Name some "inline" elements.- - - - -
- -
- - -
- - - - -
- - - - -
- - - <select> - <small>
- <span> - <strong> - <sub> - <sup>
- <textarea> - <time> - <tt> - <var>
Information
- Description
- Flashcards on Untitled, created by Tom Galpin on 30/03/2021.
- Created by
- Tom Galpin
- Views
- 0
- Rating