js Flashcards

Question

What is the difference between calling a function like ‘foo(arg1, arg2)’ and foo.call(this, arg1, arg2)?

Answer 1

function.prototype.call() calls a function with a given ‘this’, which allows for a function/method belonging to one object to be assigned and called for a different object.

Answer 2

A promise is an object returned by an asynchronous function, which represents the current state of the operation. (At the time the promise is returned to the caller, the operation often isn’t finished, but the promise object provides methods to handle the eventual success or failure of the operation)

Answer 3

Asynchronous programming is a technique that enables your program to start a potentially long-running task and still be able to be responsive to other events while that task runs. Many functions provided by browsers, can potentially take a long time, and therefore, are asynchronous. Example: - Making HTTP requests using fetch() - Accessing a user’s camera or microphone using getUserMedia() - Asking a user to select files using showOpenFilePicker()

Answer 4

Due to the implementation of engines such as v8 or spiderMonkey, we are provided with different web APIs that take charge of the operation while the rest of the code keeps executing

Answer 5

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

Answer 6

runtime model based which is responsible for executing the code, collecting and processing events, and executing queue sub-tasks

Answer 7

A settings object is an environment that provides addtional information when JavaScript is running. This includes: - the realm and module map - HTML specific information. The incumber settings object is tracked to ensure that the browser knows which one to use for a given piece of user code. A realm can be roughly thought of as the global object. What is unique about realms is that they hold all of the necessary information to run JavaScript code. This includes objects like Array and error.

Answer 8

Promises are constructs to assign a reference to a result not yet available, and to organize code that runs once the result becomes available or a failure is returned. - Web Workers perform actual work asynchronosuly (using operating system threads not processes - so they are relatively light weight)

Answer 9

Browser APIs are APIs build into the browser that allow us to get access to get data from the browser and sorrounding computer environment. For example, the web audio API provides JavaScript constructs for manipulating audio in the browser

Answer 10

JavaScript uses short-circtuit evaluation, therefore when one of those values is true, that value will be the assigned value.

Answer 11

The difference is that Node.textContent will give us ALL the content inside the node. Example:

Hello

If whe use: const div = document.querySelector('div'); console.log(div.textContent); result: Hello As a result, we get hello with spacing since textContent will take the spacing within div, whereas innerText will take the text only and will look at the styling. For example if the 'h' in hello is within a span that has display of none, the result from innerText would be 'ello'.

Answer 12

A const declaration is used to declare constant values. Const allows to mutate the value, but prevents re-assignment

Answer 13

The call stack is used to remember the location of the last executed command in a function. Single threaded programming languages only have one stack

Answer 14

An Immediately Invoked Function is a JS function that runs as soon as it is defined. Use cases: - Avoid polluting the global namespace - Execute an async function

Answer 15

jQuery was used for DOM manipulation, however, much of its API is now incorporated directly into the browser.

Answer 16

It has been replaced with the fetch API which uses promises to fulfill its requests. However, AJAX is still used due to compatibility with IE. The term "ajax" is still often used to describe the technique of making HTTP request through the fetch API

Answer 17

const getUserCredentials = (user) => { const { name, surname, password, email } = user; }

Answer 18

Asynchronous JavaScript And XML refers to a technique which can load server data from a client-side script.

Answer 19

Cross-Origin Resource Sharing is a system that determines whether browsers block (verb) frontend JavaScript code from accessing responses for cross-origin requests. Cross-Origin Resource Sharing (CORS) is a protocol that enables scripts running on a browser client to interact with resources from a different origin.

Answer 20

An Application Programming Interface is a way for computer programs to access the features or data of an operating system, application or other services. They are used to integrate functionality and transmit data between software

Answer 21

CommonJS is a module formatting system. It is a standard for structuring and organizing JavaScript code outside the browser (backend). CJS assists in the server-side development of apps and it’s format has heavily influenced NodeJS’s module management.

Answer 22

Technique of converting a function that takes multiple arguments into a sequence of functions that each takes an argument. x = f(a, b, c) becomes h = g(a) i = h(b) x = i(c) or called in sequence x = g(a)(b)(c)

Answer 23

A B D [E, F] // example const [firstElement, secondElement] = list; // is equivalent to: // const firstElement = list[0]; // const secondElement = list[1]; // example function sumAndMultiply(a,b) { return [a+b, a*b]; } // We can also set default values (division), however if there was a division we would get the result const [sum, multiply, division = 'n/a'] = sumAndMultiply(2, 3); console.log(sum); // 5 console.log(multiply); // 6

Answer 24

Lazy loading refers to the technique of loading a resource until it is needed instead of loading them up front. These techniques help in improving performance, better utilization of the device's resources and reducing associated costs. - Performance Gains - Cost Reduction

Answer 25

Redux is an open-source JavaScript Library for managing and centralizing application state.

Answer 26

Postman is an API platform for developers to design, build, test and iterate their APIs.

Answer 27

Usually null represents that some value is missing intentionally, and undefined represents that a value is missing unintentionally. null means nothing, void, emptiness, and is intentionally set. undefined means the container exists but hasn't been given a value yet. functions with no return statement will return undefined by default

Answer 28

Any time we perform any function on primitive types, the result is a re-assignment, not mutation.

Answer 29

A thenable objects are objects with a callable then method. class Thenable { constructor(num) { this.num = num; } then(resolve, reject) { alert(resolve); // resolve with this.num*2 after 1000ms setTimeout(() => resolve(this.num * 2), 1000); // (*) } }

Answer 30

When a resource is render blocking it means that the resource is preventing the web page from loading other resources

Answer 31

It will give us the result from the last expression it will give us the element that we selected on the inspector depending the number given

Answer 32

The method console.dir() displays an interactive list of the properties of the specified JavaScript object. The output is presented as a hierarchical listing with disclosure triangles that let your see the contents of child objects

Answer 33

Returns the time it took

Answer 34

When you run any JavaScript, a special environment is created to handle transformation & execution of code. This is called the EXECUTION CONTEXT. It contains the currently running code and everything that aids its execution. It has two phases: - Memory creation phase - Create the global object (browser = window, node.js = global) - Create the 'this' object and bind it to the global object - Set up memory heap for storing variables and function references - store functions and variables in global execution context and set to 'undefined' - Execution phase - Execute code line by line - Create a new execution context for each function call

Answer 35

The console.time() method starts a timer you can use to track how long an operation takes. You give each timer a unique name, and may have up to 10,000 timers running on a given page. When you call console.timeEnd() with the same name, the browser will output the time, in milliseconds, that elapsed since the timer was started.

Answer 36

A shallow copy of an object is a copy whose properties share the same references as those of the source object from which the copy was made. As a result, when you change either the source or the copy, you may also cause the other object to change too. That behavior contrasts with the behavior of a deep copy, in which the source and copy are completely independent.

Answer 37

Objects are equal to each other when they hold the same references, so even if they have the same data, comparing the objects with equality operators we will get false let obj1 = {"test2":"test2"}; let obj2 = {"test2":"test2"}; obj1 == obj2 // false obj1 === obj2 // false obj2 = obj1; obj2 == obj1 //true obj2 === obj1 //true

Answer 38

The optional chaining operator ( ?. ) enables you to read the value of a property located deep within a chain of connected objects without having to check each reference in the chain is valid. const adventurer = { name: 'Alice', cat: { name: 'Dinah' } }; const dogName = adventurer.dog?.name; console.log(dogName); // expected output: undefined console.log(adventurer.someNonExistentMethod?.()); // expected output: undefined console.log(adventurer?.name); // output: Alice

Answer 39

The nullish coalescing operator ( ?? ) is a logical operator that return its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand const foo = null ?? 'default string'; console.log(foo); // expected output: "default string" const baz = 0 ?? 42; console.log(baz); // expected output: 0 This can be seen as a special case of the logical OR (||) operator, which returns the right-hand side operand if the left operand is any falsy value, not only null or undefined. In other words, if you use || to provide some default value to another variable foo, you may encounter unexpected behaviors if you consider some falsy values as usable (e.g., '' or 0). See below for more examples.

Answer 40

0, false, null, undefined, "", '', NaN

Answer 41

Event bubbling is a type of event propagation where the event first triggers on the innermost target element, and then successively triggers on the ancestors (parents) of the target element in the same nesting hierarchy till it reaches the outermost DOM element or document object.

Answer 42

Contrary to event bubbling, event capturing starts from the outermost element of the DOM structure and goes all the way to the target element, executing the target element handler lat in order.

Answer 43

A control is a reusable GUI input that enables user interaction with your application. For example, combo boxes, calendar inputs, sliders, buttons, switches and knobs are all controls

Answer 44

Layers are logical groupings of functionality. For example a data layer might encapsulate functionality related to data and state, while a presentations layer handles display concerns such as rendering the DOM and binding UI behaviors.

Answer 45

Tiers are the runtime environment that layers get deployed to. A runtime environment usually consists of at least one physical computer, an operating system, the runtime engine (e.g., Node, Java or Ruby) and any configuration needed to express how the application should interact with its environment.

Answer 46

Type coercion is the automatic or implicit conversion of values from one data type to another. example: if (12 == '12') { // do this }

Answer 47

All three help change the context of the `this` keyword. The bind method creates a new function that, when called, has its `this` keyword set to the provided value. The apply method calls the specified function with a given `this` value, and arguments provided as an array apply(thisArg, argsArray) The call method calls the function with a given this value and arguments provided individually. The 3 can be used for the same purpose, however, bind only accepts the `thisArg` and apply and call accept arguments to pass to the function. Call accepts arguments provided individually and apply accepts arguments provided as an array

Answer 48

The difference when the keyword `this` is used in arrow function, the value of `this` will depend on where the arrow function was defined. Whereas using the keyword `this` with typical functions the value of `this` depends on who calls the function. One cares how it is called, the other cares about how it is defined

Answer 49

Webpack is a module bundler. Basically, webpack builds a dependency graph from one or more entry points and then combines every module into one or more bundles, which are static assets to serve your content from.

Answer 50

A source map provides a way of mapping code within a compressed file back to it's original position in a source file.

Answer 51

An object's stringifier is any attribute or method that is defined to provide a textual representation of the object for use in situations where a string is expected.

Answer 52

Each iteration on the event loop is known as a tick

Answer 53

A higher-order function is a function that operates on functions, taking one or more functions as arguments and returning a new function.

Answer 54

The application state is the information necessary for your render process to display the proper elements with the proper attributes

Answer 55

Is the information necessary for your render process to display the proper elements with the proper attributes

Answer 56

A polyfill is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it. Most often, it refers to a JavaScript library that implements an HTML5 or CSS web standard, either an established standard on older browsers, or a proposed standard on existing browsers. For example babel...

Answer 57

A closure is the combination of a function and the lexical environment within which that function was declared. THIS ENVIRONMENT CONSISTS OF ANY LOCAL VARIABLES THAT WERE IN SCOPE AT THE TIME THE CLOSURE WAS CREATED

Answer 58

It calls the parent class's constructor and binds the parent class's public fields, after which the derived class's constructor can further acess and modify 'this'