JS Fundamentals

Question 1

What is ‘scope’ in javascript?

Answer 1

In JavaScript, each function gets its own scope.

There are two scopes in js - global and local. Variables declared outside of a function have a global scope. Variables declared within a function have a scope local to that function.

Scope is a collection of variables and the rules for how those variables are accessed by name.

Only code inside that function can access that function’s scoped variables.

A variable name has to be unique within the same scope.

A scope can be nested inside another scope.

If one scope is nested inside another, code inside the innermost scope can access variables from either scope.

Question 2

What is ‘equality’ in javascript?

Answer 2

JavaScript has both strict and type–converting comparisons:

Strict comparison (e.g., ===) checks for value equality without allowing coercion. It is looking for absolute equality. Both values must be the same type to return true equality.
Abstract comparison (e.g. ==) checks for value equality with coercion allowed. The equality operator converts the operands to a similar type if they are not of the same type, then applies strict comparison.

Question 3

What is ‘typeof’ operator?

Answer 3

Examines a value and tells you what type it is. E.g.:

undefined
string
number
boolean
object

Question 4

What are arrays in javascript?

Answer 4

An object that holds numerically indexed values of any type.

Question 5

Explain values and types in javascript.

Answer 5

Javascript has types values, not types variables. The values are as follows:

string
number
boolean
null and undefined
object
symbol (new to ES6)

Question 6

Explain null and undefined in javascript.

Answer 6

Undefined: A variable type where something has been declared but assigned no value - something hasn’t been initialized. Indicates variable points to no object (everything in javascript is an object).

Null: An object value that signifies nonexistence of any value - something is currently unavailable.

Question 7

What is ‘strict’ mode?

Answer 7

Feature introduced in ES5.

Allows you to place a program, or function, in operating context that prevents certain actions from being taken and throws more exceptions. E.g. does not allow for undeclared variables.

Declared as string ‘use strict’ in the beginning of script. Has global scope. If declared inside function, has local scope to function.

Question 8

Explain the ‘this’ keyword in javascript.

Answer 8

Always returns a reference to the current object.

If called on a standalone function outside of an object, returns a reference to the global object (which in browsers is the window object). If strict mode is enabled, returns undefined.

The above problem is fixed by binding. Using the bind method binds a function to an object.

Question 9

What are arrow functions in javascript? When should we use them?

Answer 9

=>

Introduced in ES6

Saves time, cleaner more compact syntax by removing ‘function’ and ‘return’ from function declarations.

**They also do not rebind ‘this’, they INHERIT the this keyword, therefore no need to use .bind and super method in react

Question 10

What is .map?

Answer 10

A function introduced in ES6 that returns a new array based on instructions applied to values inside an array.

In react it is used to render lists.

Question 11

What is object destructuring?

Answer 11

Extracts properties from objects and stores them in variables. E.g.

const { street, city, country } = address;

The properties street, city, and country in the address object are now stored as their own respective variables and can be called on an object to return that value.

Question 12

What is an object in javascript?

Answer 12

A collection of key/value pairs.

Functions inside objects are referred to as methods.

Question 13

Explain let vs var vs const

Answer 13

Represent values through binding

Var: global variable scopes to the function. Available outside of the block it is declared in within the function.

Let: only available within block declared in. Scoped to block. Value can be reassigned.

Const: scoped to block. Variable that cannot be reassigned.

Question 14

What is the spread operator in javascript?

Answer 14

Represented by syntax ‘…’

Contains all values within an object. Used to combine arrays.

E.g.
const first = [1, 2, 3]
const second = [4, 5, 6]
const combined = [...first, ...second]

Question 15

What are classes in javascript?

Answer 15

An object that provides a blueprint for an object of that type.

Use the constructor method (special keyword with name reserved) which accepts parameters that make up the properties for that class.

Syntax is class Object (uses capitalization)

Question 16

What is inheritance in javascript?

Answer 16

Classes can inherit properties and methods from other classes by writing ‘extends’ and the name of the class they are inheriting from.

The class being inherited is the parent class, and that class that is inheriting from the parent class is the child class.

If child class requires more parameters, we can use the super method to initialize them.

Question 17

How would you empty an array in javascript?

Answer 17

array. length = 0
array. splice(0, array.length)

array = [];

Question 18

What is a callback function?

Answer 18

A function that is passed to another function as one if its arguments/parameters.

Question 19

What language constructions can we use for iterating over objects and arrays?

Answer 19

For objects:

• for loops (also iterates over inherited properties)
• object.keys() (static method that lists all enumerable properties of the object you pass to it)
• object.getOwnPropertyNames() (static method that lists all enumerable and non-enumerable properties of the object passed to it)

For arrays:

• for loops (allows for more flexibility, like prematurely terminating loop with ‘break’)
• forEach()

Question 20

What is the ‘load’ event? Why would you use it (advantages, disadvantages)

Answer 20

Fires at the end of the document loading process. All objects in document are now in the DOM, images, scripts, links, and sub-frames have finished loaded.

DOMContentLoaded fires after the DOM has been constructed, but does not wait for other resources to finish loading. Preferred in cases where you do not need the full page to be loaded before initializing.

Question 21

What is AJAX?

Answer 21

Asynchronous JavaScript XML

What is XML? Stands for Extensible Markup Language. Markup languages are coding languages used to annotate parts of a web document that are intended to give web browsers instructions about how to understand, process, and display a web page, versus the actual text intended to be displayed on the page. XML is used to transfer data stored on the page to the browsers that view it. Individual computer systems are often incompatible with one another and can’t understand or interact with data formatted by a different system. XML allows developers to bypass this obstacle by storing data in plain text format between XML tags.

Read data from a web server - after a web page has loaded
Update a web page without reloading the page
Send data to a web server - in the background

AJAX’s core function is to update web content asynchronously (the “A” of AJAX), meaning a user’s web browser doesn’t need to reload an entire web page when only a small portion of content on the page needs to change.

AJAX functions by creating a XMLHttpRequest Object. When a user visits a webpage that makes use of javascript, javascript creates this object and then XML transfers the data from the browser to the server. The XMLHttpRequest object sends a request for updated page data to the web server, the server process the request, a response is created server-side and sent back to the browser, which then uses JavaScript to process the response and display it on the screen as updated content.

Used often to integrate third-party APIs into app functionality or fetching JSON data.

Also used to update forms and perform other interactive javascript functions, like buttons, scrolling, animations, etc.

Question 22

What is JavaScript?

Answer 22

JavaScript is the Programming Language for the Web
A language read by the browser

JavaScript can update and change both HTML and CSS

JavaScript can calculate, manipulate and validate data

Is asynchronous, which is critical to the functionality of javascript
after markup languages like HTML and CSS are used to build and display static web features (headers, fonts, paragraphs, etc.), JavaScript is then used to control features that require real time updates while a visitor is viewing a page (think interactive maps, animated graphics, scrolling video, jukeboxes, etc).

Question 23

What is ES6?

Answer 23

ECMASCRIPT are the specifications that define JS
ES6 AKA ES2015

Created to standardize JA

Scripting-language specification

Commonly used for client-side

Scripting for WWW and for server applications such as node.js

Popular changes introduced through ES6:
let & const
.map

Question 24

Explain the difference between == and ===

Answer 24

== looks for equivalence (equality via coercion)
=== looks for exact equality (no coercion of value types_

Question 25

What is hoisting in javascript?

Answer 25

Hoisting is the javascript interpreter's action of movin all variable and fx declarations to the top of the current scope. **ONLY the actual declarations are hoisted, assignments are left where they are **Function declarations are also hoisted, BUT functions assigned to variables are not (as in this case they are assignments and assignments are left where they are) Solution to hoisting bugs: Always declare variables at TOP of scope

Question 26

What is the DOM?

Answer 26

Document Object Model An API that is the browser's way of interpreting HTML. Defines a logical structure (tends to be a tree-like structure with parent and child elements) and the way a document can be accessed and manipulated It is an OBJECT model because documents are modelled using objects. When a webpage is loaded, everything is stored as a javascript object The tree structure can be manipulated using javascript by looking up different nodes. At the very top level of the tree is the document, which is the webpage We can use query selectors to access nodes in the DOM eg. document.querySelector('any css selector')

Question 27

What is Big O Notation?

Answer 27

AKA Algorithmic efficiency An equation that describes how the runtime scales with respect to some input variables. Describes performance or complexity of an algorithm. O(1) - algorithm that will always execute in the same time (or space) regardless of the size of the input data set O(N) - algorithm whose performance will grow linearly and in direct proportion to the size of the input data set O(N^2) - algorithm whose performance is directly proportional to the square of the size of the input data set. Common with algorithms that involve nested iterations over the data set. Deeper nested iterations will result in O(N^3), O(N^4), etc. 4 important rules: 1. If you have two or more steps in your algorithm, you must add up the runtime of those steps. Different steps get added. 2. Drop constants 3. Different inputs return different variables 4. Drop non-dominate terms