js

Question 1

JavaScript

Answer 1

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

Question 2

JavaScript List of Primitive Types (6)

Answer 2

Number
String
Boolean
Null
Undefined
Symbol

Question 3

Why functions are considered first-class objects?

Answer 3

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.

Question 4

Closure

Answer 4

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.

Question 5

lexical scoping

Answer 5

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

Question 6

let vs var

Answer 6

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)

Question 7

var a = 10;

function myFn() {
var b = a;
console.log(b);
c = 100;
}

myFn();

In what scope is ‘c’ declared?

Answer 7

‘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.

Question 8

Hoisting

Answer 8

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

Question 9

DOM

Answer 9

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

Question 10

event

Answer 10

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});

Question 11

What is an Object?

Answer 11

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.

Question 12

What is an Object Literal?

Answer 12

We refer to objects literals to objects that weren’t instantiated from classes, but written out as we’ve come to create it

Question 13

What are Object Prototypes?

Answer 13

Prototypes are the mechanism by which JavaScript objects inherit features. Every object in JavaScript has a built-in property, which is called the prototype

Question 14

What does “strict mode” do?

Answer 14

• 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

Question 15

What does “this” refer to?

Answer 15

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)

Question 16

What does it mean to be a scripting language?

Answer 16

Scripting languages are programming languages that execute within a special run-time environment by an interpreter rather than a compiler.

Question 17

What does it mean for the code to be interpreted?

Answer 17

It means that instructions are executed without a previous compilation process (transforming code into machine code).

Question 18

Is java an interpreted language?
What is the process for the code to be executed?

Answer 18

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

Question 19

What is the difference between async and refer?

Answer 19

[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

Question 20

What is the difference between framework and library?

Answer 20

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.

Question 21

What is JSON?

Answer 21

[this] The JavaScript Object Notation is a standard text-based format used to represent structured data, commonly used for transmitting data.

Question 22

What is a Primitive Wrapper Type?

Answer 22

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:

1. Create an object of the corresponding type
2. Call a specific method on the instance
3. Delete the instance immediately

Question 23

When do we say that an object has mutated?

Answer 23

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.

Question 24

Eval()

Answer 24

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

Question 25

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

Answer 25

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.

Question 26

Promise

Answer 26

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)

Question 27

Asynchronous programming

Answer 27

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()

Question 28

How asynchronous operations occur if JavaScript is single-threaded?

Answer 28

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

Question 29

Do the exercise located on Onenote (JavaScript > Asynchronous programming > call stack > how js callback queue works.

Answer 29

…

Question 30

What is a callback function?

Answer 30

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.

Question 31

What is The Event Loop?

Answer 31

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

Question 32

What is the incumbent settings object?

Answer 32

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.

Question 33

Promises and Web Workers address different needs, which are they?

Answer 33

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)

Question 34

Browser APIs

Answer 34

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

Question 35

How does var f = a || b || c || d || e; work?

Answer 35

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

Question 36

What is the difference between Node.textContent and Node.innerText

Answer 36

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’.

Question 37

What does a const declaration do?

Answer 37

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

Question 38

What is the call stack?

Answer 38

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

Question 39

What is an IIFE?

Answer 39

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

Question 40

Why jQuery isn’t used anymore?

Answer 40

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

Question 41

Why AJAX isn’t used anymore?

Answer 41

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

Question 42

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;
}

Answer 42

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

Question 43

What is AJAX?

Answer 43

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

Question 44

What is CORS?

Answer 44

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.

Question 45

What is an API?

Answer 45

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

Question 46

What is CommonJS

Answer 46

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.

Question 47

Currying

Answer 47

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)

Question 48

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);

Answer 48

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

Question 49

What is lazy loading?

Answer 49

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

Question 50

Redux

Answer 50

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

Question 51

Postman

Answer 51

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

Question 52

Null and undefined

Answer 52

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

Question 53

Are primitive types immutable?

Answer 53

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

Question 54

What is a thenable object?

Answer 54

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); // ()
}
}

Question 55

What does it mean to be render-blocking?

Answer 55

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

Question 56

What does $_ does on the console?

What does ‘$[number]’ does on the console?

example:
> $1

Answer 56

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

Question 57

what does console.dir() do?

Answer 57

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

Question 58

console.time(‘For Loop’);
for (var i = 0; i < 2000; i++) {
console.log(i);
}
console.timeEnd(‘For Loop’);

Answer 58

Returns the time it took

Question 59

What is the Execution Context?

Answer 59

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

Question 60

console.time()

Answer 60

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.

Question 61

What is a shallow copy of an object?

Answer 61

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.

Question 62

When objects are equal to each other?

Answer 62

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

Question 63

What is Optional chaining ( ?. )

Answer 63

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

Question 64

Nullish coalescing operator ( ?? )

Answer 64

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.

Question 65

What values are considered to be falsey in javaScript? 5

Answer 65

0, false, null, undefined, “”, ‘’, NaN

Question 66

Event bubbling

Answer 66

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.

Question 67

Event Capturing

Answer 67

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.

Question 68

What is a control?

Answer 68

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

Question 69

What is a layer?

Answer 69

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.

Question 70

What is a Tier?

Answer 70

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.

Question 71

What is Type Coercion in JavaScript

Answer 71

Type coercion is the automatic or implicit conversion of values from one data type to another.

example:

if (12 == ‘12’) {
// do this
}

Question 72

What is the difference between Bind( ), Call( ), and Apply( ) ?

Answer 72

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

Question 73

What the difference of using the keyword this in an arrow function and using it in a typical function?

Answer 73

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

Question 74

What is webpack?

Answer 74

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.

Question 75

What are source maps in javaScript?

Answer 75

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

Question 76

Stringifier

Answer 76

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.

Question 77

Add the “How Good Are You At JavaScript? - JavaScript QUIZ!”

Answer 77

ADD

Question 78

What is known as a ‘Tick’ in JavaScript?

Answer 78

Each iteration on the event loop is known as a tick

Question 79

What is a higher-order function?

Answer 79

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

Question 80

Application state

Answer 80

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

Question 81

Application state

Answer 81

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

Question 82

Polyfill

Answer 82

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…

Question 83

Closure definition

Answer 83

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

Question 84

What is super() used for?

Answer 84

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’