js Flashcards
JavaScript
JavaScript is a scripting language which enables you to create dynamically updating content.
A scripting language or script language is a programming language for a runtime system that automates the execution of tasks that would otherwise be performed individually by a human operator. Scripting languages are usually interpreted
JavaScript List of Primitive Types (6)
Number
String
Boolean
Null
Undefined
Symbol
Why functions are considered first-class objects?
In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object. What distinguishes them from other objects is that functions can be called. In brief, they are Function objects.
Closure
A closure is the combination of a function enclosed with references to its surrounding state (the lexical environment).
A closure is the combination of a function and the lexical environment within which that funciton was declared.
The environment consists of any local variables that were in-scope at the time the closure was created.
lexical scoping
describes how a parser resolves variable names when functions are nested. The word lexical refers to the fact that lexical scoping uses the location where a variable is declared within the source code to determine where that variable is available. Nested functions have access to variables declared in their outer scope
let vs var
The main difference is scoping rules. Variables declared by var keyword are scoped to the immediate function body (hence the function scope) while let variables are scoped to the immediate enclosing block denoted by { } (hence the block scope)
var a = 10;
function myFn() {
var b = a;
console.log(b);
c = 100;
}
myFn();
In what scope is ‘c’ declared?
‘c’ has been declared within the global scope since we did not declare it properly, therefore by defaults creates the variable within the global scope.
Hoisting
Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of code
DOM
The DOM (Document Object Model) API is a Common browser API, which allows you to manipulate HTML and CSS updating the HTML, dynamically. The DOM is represented with a logical tree.
This is a “Tree Structure” representation created by the browser that enables the HTML structure to be easily accessed by programming languages
event
Events are actions or occurrences that happen in the system you’re programming, which the system tells you about so your code can react to them.
To use events, we attach EVENT HANDLERS to an object. and these event handlers contain how they are triggerd and the response to that trigger (event listener)
example:
const btn = document.querySelector(‘button’);
btn.addEventListener(‘click’, ( ) => {//function body});
What is an Object?
An Object is a collection of related data and/or functionality. These usually consist of several variables and functions (which are calle properties and methods when they’re inside objects.
What is an Object Literal?
We refer to objects literals to objects that weren’t instantiated from classes, but written out as we’ve come to create it
What are Object Prototypes?
Prototypes are the mechanism by which JavaScript objects inherit features. Every object in JavaScript has a built-in property, which is called the prototype
What does “strict mode” do?
- Eliminates some JavaScript silent errors by changing them to throw errors
- Fixes mistakes that make it difficult for JavaScript engines to perform optimizations: strict mode code can sometimes be made to run faster than identical code that’s not strict mode
- Strict mode also prevents us from accidentally creating global variables (usually happens due to typos).
- functions parameters are required to be unique in strict mode
- prevents from attempting to delete undeletable properties
- lastly, strict mode in ECMAScript 2015 forbids setting properties on primitive values. Without strict mode, setting properties is ignored (no-op), with strict mode, however, a TypeError is thrown.
Strict mode is already set on modules
What does “this” refer to?
The keyword “this” refers to an object which depends on the context that is being used in. For example, if used within a constructor, it refers to the object that is being created.
if an instantiated object calls one of its methods, “this” will refer to the calling object (The keyword “this” refers to the object that called the function)
What does it mean to be a scripting language?
Scripting languages are programming languages that execute within a special run-time environment by an interpreter rather than a compiler.
What does it mean for the code to be interpreted?
It means that instructions are executed without a previous compilation process (transforming code into machine code).
Is java an interpreted language?
What is the process for the code to be executed?
Well… Partially. JavaScript uses a JIT (just-in-time) compiler, which monitors (by the profiler) the interpreted code as it’s being executed in order to optimize the code .
At first, the monitor just runs everything trough the interpreter. Then looks for statements that can be optimized and sends them off to be compiled.
file.js —–> parser ——> AST
|
|
v
interpreter —-> byte code
|
|
v
Profiler ——> compiler
|
|
v
Optimized
code
v8 - JavaScript is interpreted by an interpreter named IGNITION as well as compiled by a JIT optimizing compiler named TURBOFAN
- The generated ASTs are given to the interpreter which generates a non-optimized machine code quickly and the execution can start with no delay
- The PROFILER watches the code as it runs and identifies areas where optimization can be performed. For example a ‘for’ loop running 100 times but producing the same result in each iteration.
- Using this profiler, any unoptimized code is passed to the compiler to perform optimizations and ggenerate machine code which eventually replaces its couterpart in the perviously generated non-optimized code by the interpreter
- As the profiler and compiler constantly make changes to the bytecode, the HavaScript execution performance gradually improves
What is the difference between async and refer?
[this]
Async and refer are two different strategies to load a script.
A common problem is that all the HTML on a page is loaded in order in which it appears. If you’re using JS to manipulate elements on the page (the DOM), you code won’t work if the JavaScript is loaded and parsed before the HTML you are trying to do something to. (read my notes…)
Defer:
- loads files in the order they appear on the page
- THey won’t run until the page content has all loaded, which is useful if your scripts depend on the DOM being in place.
defer tells the browser to continue downloading the HTML content once the tag element has been reached. —- defer is a solution to and old-fashioned alternative which was putting your script element right at the bottom of the body, so that it would load after all the HTML has been parsed. The problem with this solution is that loading/parsing of the script is completely blocked until the HTML DOM has been loaded. On larger sites with lots of JavaScript, this can cause a major performance issue, slowing down your site.
Async:
- downloads the script without blocking the page while the scipt is being fetched
- Once the download is complete, the script will execute, which blocks the page from rendering
- You get no guarantee that scripts will run in any specific order (bad for dependencies)
- Best to use when the scripts in the page run independently from each other.
For example, maybe you have some game data files to load, which will be needed when the game actually begins, but for now you just want to get on with showing the game intro, title, and lobby, without them being blocked by a script loading.
check image for a better understanding:
https://user-images.githubusercontent.com/1437027/49294708-06ca1e00-f4b4-11e8-86b5-3f843ab98d0b.png
What is the difference between framework and library?
Both are code written by someone else that is used to help solve common problems.
The technical difference lies in inversion control, when using a framework, the framework is in charge of the flow. It provides some places for you to plug in your code, but it calls the code you plugged in as needed, whereas a library is used only when needed.
Analogy:
A library is like going to Ikea. You already have a home, but you need a bit of help with furniture. You don’t feel like making your own table from scratch. Ikea allows you to pick and choose different things to go in your home. You are in control.
A framework, on the other hand, is like building a model home. You have a set of blueprints and a few limited choices when it comes to architecture and design. Ultimately, the contractor and blueprint are in control. And they will let you know when and where you can provide your input.
What is JSON?
[this] The JavaScript Object Notation is a standard text-based format used to represent structured data, commonly used for transmitting data.
What is a Primitive Wrapper Type?
Primitive data types do not have any methods, however, when we call a method on a variable that holds primitive data, javascript performs the following steps:
- Create an object of the corresponding type
- Call a specific method on the instance
- Delete the instance immediately
When do we say that an object has mutated?
When somebody changes its property to point to a different value.
For example, if we declare let iceCream = {flavor: “vanilla”}, we can later mutate it with iceCream.flavor = “chocolate”. Note that even if we used const to declare iceCream, we could still mutate iceCream.flavor. This is because const would only prevent assignments to the iceCream variable itself, but we mutated a property (flavor) of the object it pointed to. Some people swore off using const altogether because they find this too misleading.
Eval()
The eval() function evaluates JavaScript code represented as string. Using eval is a security risk.
console.log(eval(‘2+2’));
We should use window.Function() as an alternative
What is the difference between calling a function like ‘foo(arg1, arg2)’ and foo.call(this, arg1, arg2)?
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.
Promise
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)
Asynchronous programming
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()
How asynchronous operations occur if JavaScript is single-threaded?
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
Do the exercise located on Onenote (JavaScript > Asynchronous programming > call stack > how js callback queue works.
…
What is a callback function?
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.
What is The Event Loop?
runtime model based which is responsible for executing the code, collecting and processing events, and executing queue sub-tasks
What is the incumbent settings object?
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.
Promises and Web Workers address different needs, which are they?
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)
Browser APIs
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
How does var f = a || b || c || d || e; work?
JavaScript uses short-circtuit evaluation, therefore when one of those values is true, that value will be the assigned value.
What is the difference between Node.textContent and Node.innerText
The difference is that Node.textContent will give us ALL the content inside the node. Example:
<div>
<span>Hello</span>
</div>
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’.
What does a const declaration do?
A const declaration is used to declare constant values. Const allows to mutate the value, but prevents re-assignment
What is the call stack?
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
What is an IIFE?
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
Why jQuery isn’t used anymore?
jQuery was used for DOM manipulation, however, much of its API is now incorporated directly into the browser.
Why AJAX isn’t used anymore?
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
Rewrite the following in ES6 Syntax:
const getUserCredentials = (user) => {
const name = user.name;
const surname = user.surname;
const password = user.password;
const email = user.email;
}
const getUserCredentials = (user) => {
const { name, surname, password, email } = user;
}
What is AJAX?
Asynchronous JavaScript And XML refers to a technique which can load server data from a client-side script.
What is CORS?
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.
What is an API?
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
What is CommonJS
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.
Currying
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)
What is the output of the following?
const alphabet = [‘A’, ‘B’, ‘C’, ‘D’, ‘E’, ‘F’];
const numbers = [‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’];
// This is known as Object/array desctructuring
// useful to unpack variables from array
const [foo, bar,, foobar, …rest] = alphabet
console.log(foo);
console.log(bar);
console.log(foobar);
console.log(rest);
const personTwo = {
name: ‘Sally’,
age: 32,
address: {
city: ‘Somewhere else’,
state: ‘Another one of them’
}
}
// Based on name of the key
const { name, age } = personTwo;
console.log(name); // sally
console.log(age); // 32
// Same as above, but choosing a different name for
// the newly created variable instead of the name of
// the property
const { name: firstName, age } = personTwo;
console.log(firstName); // sally
console.log(age); // 32
// we can also use default values on objects
const { name = ‘John’, age } = personTwo;
// we can also get values from objects within
const {name, address: {city} } = personTwo
// Merge (note: the personTwo overrides values from the personOne)
const personThree = {…personOne, …personTwo}
// Using destructuring in a function
function printUser({name, age, favoriteFood = ‘apple’}) {
console.log(Name is ${name}. Age is ${age});
}
printUser(personOne);
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
What is lazy loading?
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
Redux
Redux is an open-source JavaScript Library for managing and centralizing application state.
Postman
Postman is an API platform for developers to design, build, test and iterate their APIs.
Null and undefined
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
Are primitive types immutable?
Any time we perform any function on primitive types, the result is a re-assignment, not mutation.
What is a thenable object?
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.num2 after 1000ms
setTimeout(() => resolve(this.num * 2), 1000); // ()
}
}
What does it mean to be render-blocking?
When a resource is render blocking it means that the resource is preventing the web page from loading other resources
What does $_ does on the console?
What does ‘$[number]’ does on the console?
example:
> $1
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
what does console.dir() do?
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
console.time(‘For Loop’);
for (var i = 0; i < 2000; i++) {
console.log(i);
}
console.timeEnd(‘For Loop’);
Returns the time it took
What is the Execution Context?
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
console.time()
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.
What is a shallow copy of an object?
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.
When objects are equal to each other?
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
What is Optional chaining ( ?. )
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
Nullish coalescing operator ( ?? )
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.
What values are considered to be falsey in javaScript? 5
0, false, null, undefined, “”, ‘’, NaN
Event bubbling
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.
Event Capturing
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.
What is a control?
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
What is a layer?
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.
What is a Tier?
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.
What is Type Coercion in JavaScript
Type coercion is the automatic or implicit conversion of values from one data type to another.
example:
if (12 == ‘12’) {
// do this
}
What is the difference between Bind( ), Call( ), and Apply( ) ?
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
What the difference of using the keyword this in an arrow function and using it in a typical function?
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
What is webpack?
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.
What are source maps in javaScript?
A source map provides a way of mapping code within a compressed file back to it’s original position in a source file.
Stringifier
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.
Add the “How Good Are You At JavaScript? - JavaScript QUIZ!”
ADD
What is known as a ‘Tick’ in JavaScript?
Each iteration on the event loop is known as a tick
What is a higher-order function?
A higher-order function is a function that operates on functions, taking one or more functions as arguments and returning a new function.
Application state
The application state is the information necessary for your render process to display the proper elements with the proper attributes
Application state
Is the information necessary for your render process to display the proper elements with the proper attributes
Polyfill
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…
Closure definition
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
What is super() used for?
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’
