JS core questions

JavaScript (“JS” for short) is a lightweight interpreted or JIT-compiled programming language with first-class functions (that means the language supports passing functions as arguments to other functions, returning them as the values from other functions, and assigning them to variables or storing them in data structures). While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Adobe Acrobat and etc. JavaScript is a prototype-based, multi-paradigm, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles.

It was invented by Brendan Eich, co-founder of the Mozilla. It is supported by all modern web browsers.

Also JavaScript is a full-fledged dynamic programming language that, when applied to an HTML document, can provide dynamic interactivity on websites. JS is one of three pillars of modern web development along with HTML and CSS. JS contains a standard library of objects, such as Array, Date and Math, and a core set of language elements such as operators, control structures, and statements.

What is advantages and disadvantages of a strict mode?

JS is executed in strict mode by using the ‘use strict’ directive (usually at the top of js file of function). Strict mode tightens the rules for parsing and error handling on your code. Some of the key benefits are:

makes debugging easier;
if you created a global variable it will report an error;
eliminates this coercion: without ‘strict mode’, a reference to a this value of null or undefined is automatically coerced to the global. This can cause many headfakes and pull-out-your-hair kind of bugs. In ‘strict mode’, referencing a this value of null or undefined throws an error;
‘strict mode’ throws an error when it detects a duplicate named property in an object (e.g., var object = {foo: "bar", foo: "baz"} ) or a duplicate named argument for a function (e.g., function foo(val1, val2, val1){ } )
makes using eval (the function evaluates js code represented as a string) a little safer that it is normally.

Disadvantages:

no more with statement
no more arguments.caller, arguments.callee

What is API, browser API?

API (Application Programming Interface) is a set of rules and specifications that software programs can follow to communicate with each other.

Browser API (Browser Application Programming Interfaces) — APIs built into web browsers, providing functionality like dynamically creating HTML and setting CSS styles, collecting and manipulating a video stream from the user’s webcam, or generating 3D graphics and audio samples.

For example: getUserMedia API, Geolocation API (Google Maps APIs), Twitter APIs, Web Animations API

SVG and Canvas

Scalable Vector Graphics (SVG) is an XML-based markup language for describing two dimensional based vector graphics. SVG is essentially to graphics what HTML is to text.

Browser

What is data structure of DOM?

DOM (Document Object Model) is a programming interface for HTML and XML documents. The DOM connects web pages to scripts or programming languages.

It represents the document as nodes and objects so that programs can change the document structure, style, and content. That way, programming languages can connect to the page.

A Web page is a document. The DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript.

The DOM model represents a document with a logical tree (hierarchical data structure). DOM is a powerful object model for changing the content tree of documents. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them you can change the document’s structure, style or content. Nodes can have event handlers attached to them. Once an event is triggered, the event handlers get executed.

Many developers may think of HTML as something flat - a bunch of text with tags in the middle. However, it is something much more. Any HTML document is a tree structure.

What is the difference between window, screen, and document in js?

The window object (global object in a browser) represents a window containing a DOM document; the document property points to the DOM document loaded in that window. Can also can be treated as the root of the DOM.

window.screen is an object about physical screen dimensions, the user’s display.

The Document interface represents any web page loaded in the browser and serves as an entry point into the web page’s content, which is the DOM tree. So window.document is the main object of the visible (rendered) DOM.

What is a critical rendering path?

It is all that browser does to render the page:

reads HTML character by character turn them into tokens, then into nodes, then into DOM;
transforms CSS into a CSSOM tree;
creates a render tree from the visible DOM nodes;
applies CSSOM rules to the nodes of the render tree;
computes a layout to understand the size and position of each object on the page;
converts each node in the render tree to actual pixels on the screen.

Explain js event delegation.

Event delegation it is when parent receive an event. Event delegation allows you to avoid adding event listeners to specific nodes; instead, the event listener is added to one parent. That event listener analyzes bubbled events to find a match on child elements.

<ul id='parent-list'>
    <li id='post-1'>Item 1</li>
    ...
    <li id='post-4'>Item 4</li>
</ul>

Snippet which illustrates event delegation

// Get the element, add a click listener...
document.getElementById("parent-list").addEventListener("click", function(e) {
        // e.target is the clicked element!
        // If it was a list item
        if(e.target && e.target.nodeName == "LI") {
                // List item found!  Output the ID!
                console.log("List item ", e.target.id.replace("post-", ""), " was clicked!");
        }
});
// have a parent DIV with many children but all we care about is an A tag with the classA CSS class:
// Get the parent DIV, add click listener...
if (e.target && e.target.matches("a.classA")) {
    console.log("Anchor element clicked!");
   }
});

An event handler you can call stopPropagation to tell the event to cease (stop) bubbling up the DOM.

stopImmediatePropagation method stops the bubbling, and will also stop any other listeners for this event on this element from firing.

event.preventDefault function will prevent the default even from occurring; tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.

Google: avoid event been added to specific node, instead been added to parent node, and find the specific child node in event bubbling on that parent. Benefits: if append a new child node, no need to rebind another event. New DOM can be created dynamically on the fly; Less event binding, save memory, especially for web apps.

Async

What is XMLHttpRequest?

Use XMLHttpRequest (XHR) objects to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing. XMLHttpRequest is used heavily in Ajax programming.

Using the XMLHttpRequest API (is the core of Ajax):

analyzing and manipulating the response of the server
monitoring the progress of a request
submitting forms and upload binary files
creating synchronous or asynchronous requests
using Ajax within Web workers

Can you explain Ajax?

Ajax is not a technology in itself, that describes a “new” approach to using a number of existing technologies together, including HTML or XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, and most importantly the XMLHttpRequest object. When these technologies are combined in the Ajax model, web applications are able to make quick, incremental updates to the user interface without reloading the entire browser page. This makes the application faster and more responsive to user actions.

Ajax stands for Asynchronous JavaScript + XML, it is the use of the XMLHttpRequest object to communicate with servers. It can send and receive information in various formats, including JSON, XML, HTML, and text files. AJAX’s most appealing characteristic is its “asynchronous” nature, which means it can communicate with the server, exchange data, and update the page without having to refresh the page.

The two major features of AJAX allow you to do the following:

Make requests to the server without reloading the page
Receive and work with data from the server

Types

What is the difference between 2 and 3 equals?

It is widely spread that == checks for equality(value) and === checks for equality(value) and type. Well, that is a misconception.

In fact, == checks for equality with coercion and === checks for equality without coercion — strict equality.

What is the difference between null, undefined or undeclared?

undefined is type of an declared variable that has not yet been assign to a value and is typeof itself “undefined”.

null is the absence of a value, it is an assignment value that can be assigned to a variable as a representation of ‘no-value’ and is typeof(null) —> object.

undeclared variable means the variable doesn’t exist at all, which will cause error in ‘use strict’ mode (that has been declared without keyword “var”);

How would you go about checking for any of these states? Use console.log and typeof to check if variable undefined or null.

What is the difference between var, let and const?

new GEN-JS

var has a functional scope and can get hoisted.

let and const was introduced recently in ES2015/ES6. The let and const block bindings introduce lexical scoping to JS. These declarations are not hoisted and only exist within the block in which they are declared and cannot be accessed until after the declaration (The Temporal Dead Zone).

let has block scope (a variable will die at the end of the block).

const is assign once and never change; this is never going to receive a new value. If you want to reassign the value, you will get an error. A const declaration prevents modification of the binding and not of the value itself. That means const declarations for objects do not prevent modification of those objects. For example:

const person = {
    name: "Nicholas"
};

// works
person.name = "Greg";

// throws an error
person = {
    name: "Greg"
};

The current best practice for block bindings is to use const by default and only use let when you know a variable’s value needs to change. This ensures a basic level of immutability in code that can help prevent certain types of errors.

Explain hoisting.

The hoisting doesn’t make sense because in ECS6 because there are variables let and const which is block scope variable .

Declaration of the variable by keyword var and function declaration will moved invisiblly to the top of the containing scope. Function declarations are always moved (hoisted) to the top of their JS scope by the JS interpreter. You can use the function before you declared it.

Function expressions in JS are not hoisted. You can’t use function expressions before you define them.

Objects

What is scope?

Scope refers to the execution context. It defines the accessibility of variables and functions in the code.

Global Scope is the outermost scope. Variables declared outside a function are in the global scope and can be accessed in any other scope. In a browser, the window object is the global scope.

Local Scope is a scope nested inside another function scope. Variables declared in a local scope are accessible within this scope as well as in any inner scopes.

What is context?

Context (execution context) is often confused as the same thing as Scope. To clear things up, lets keep the following in mind:

Context is most often determined by how a function is invoked. It always refers to the value of this in a particular part of your code.

Scope refers to the visibility of variables.

How does this work in js?

This is a really complex concept in js. As far as my understanding of this keyword is bind the context when the function is executed instead of when is defined. Execution context simply means how a function is called. For example, if we just execute a function in a global environment, outside of any function, this refers to the global scope (global object window, if we don’t use strict mode). But if we have an object a, and method inside called b, in this circumstances, this will be reference to a object.

The following list is the ordered rules for determining this. Stop at the first one that applies:

‘new’ binding when using the new keyword to call a function, this is the newly constructed object.
explicit binding when call or apply are used to call a function, this is the object that is passed in as the argument
bind this lets you create a copy of the function with a definite context; bind returns a copy of the function, and doesn’t affect the original.
implicit binding when a function is called with a context (the containing object), this is the object that the function is a property of. This means that a function is being called as a method.
default binding if none of the above rules applies, this is the global object (in a browser, it’s the window object).
lexical this when a function is called with an arrow function =>, this receives the this value of its surrounding scope at the time it’s created. this keeps the value from its original context.

Functions and Methods

What is ternary operator?

What does the word “ternary” indicate?. The conditional operator is the only js operator that takes three operands. This operator is frequently used as a shortcut for the if statement:

condition ? expr1 : expr2

Explain arrow functions syntax.

new GEN-JS

Arrow functions that’s a different syntax for creating js functions which is omit a function keyword and solve the issue with this keyword. this keyword doesn’t always refer to what you might have expected to refer during writing a code. Arrow function keeps context and don’t change during runtime.

const myFunc = ( ) => { ... }

What is the difference between .call and .apply, .bind?

All of these three methods are used to attach this into function and the difference is in the function invocation. By call, apply, bind you can write common methods for various objects.

The Function.prototype.call() method calls a function with a given this value and arguments provided individually. Syntax function.call(thisArg, arg1, arg2, ...)

The Function.prototype.apply() method calls a function with a given this value, and arguments provided as an array.

let numbers = [5, 6, 2, 3, 7];
let max = Math.max.apply(null, numbers); // 7
let min = Math.min.apply(null, numbers); // 2

While the syntax of call() function is almost identical to that of apply(), the fundamental difference is that call() accepts an argument list, while apply() accepts a single array of arguments.

call(): invokes the function immediately and requires you to pass in arguments as a list (one by one).

apply(): invokes the function immediately and allows you to pass in arguments as an array.

bind():

returns a new function, with a certain context and parameters. It is usually used when you want a function to be called later with a certain context.
that is possible thanks to its ability to maintain a given context for calling the original function. This is useful for asynchronous callbacks and events.
works like the call function. It requires you to pass in the arguments one by one separated by a comma.

Example:

const obj = {num: 2};
const obj2 = {num: 5};

let addToThis = function(a, b, c) {
   return this.num + a + b + c;
};
addToThis.call(obj, 1, 2, 3); // first argument - object you are applying to, the second argument - would be arguments for the function itself

const arr = [1,2,3];
addToThis.apply(obj2, arr);

let bound = addToThis.bind(obj);
bound(1,2,3);

What is the difference between .foreach and .map?

(What is a map method of array?)

The Array.prototype.forEach() method executes a provided function once for each array element.

const items = ['item1', 'item2', 'item3'],
      copy = [];

items.forEach(function(element) {
    copy.push(element);
});

The Array.prototype.map() method creates a new array with the result of calling a provided function on every element in the calling array.

const arr = [1, 4, 9, 16];
const map1 = arr.map(x => x * 2); // pass a function to map
console.log(map1); // [2, 8, 18, 32]

So, map() transforms each item in the array and returns a new array of transformed items with same size as that of old array. If you just want to iterate over the items in an array and do something with the items you need to use forEach().