Note: Keep in mind that many of these questions are open-ended and could lead to interesting discussions that tell you more about the person's capabilities than a straight answer would.
Answer
A function's this keyword behaves a little differently in JavaScript compared to other languages. It also has some differences between strict mode and non-strict mode.
In the global execution context (outside of any function), this refers to the global object whether in strict mode or not.
Inside a function, the value of this depends on how the function is called.
Implicitly Binding: As an object method its this is set to the object the method is called on.
Explicit Binding: Functions have three methods on their prototype, bind, call, and apply. If a function is called with these methods, then this is set to the first argument passed.
As an example:
function echoThis() {
console.log(this);
}
echoThis.call('hello'); // hellonew Binding: If a function is called using the new keyword, an empty object is created and assigned to this inside the function.
default Binding: If a function is called, but the three scenarios above do not apply, then this is set to the global object if not in strict mode, and undefined if in strict mode.
Arrow function exception: If a function is defined as an arrow function, the prior rules will not apply. Instead, this will refer to the this binding in the immediate scope where the arrow function was declared.
Answer
const is a signal that the identifier won’t be reassigned. It needs initialization upfront, so you can't write const something;
let is a signal that the variable may be reassigned, such as a counter in a loop, or a value swap in an algorithm.
var is now the weakest signal available when you define a variable in JavaScript. The variable may or may not be reassigned, and the variable may or may not be used for an entire function, or just for the purpose of a block or loop.
It's declaration is hoisted, instead of let and const.
for (var i = 0; i < 2; i++) {}
console.log(i); // exists outside the block scope
for (let i = 0; i < 2; i++) {}
console.log(i); // only exists inside the block scope
for (const i = 0; i < 2; i++) {}
console.log(i); // error reassignment, but only on top-level
for (const cnt = { i: 0 }; cnt.i < 2; cnt.i++) {} // only exists inside the block scopeAnswer
This is the strict comparison operator e.g. 5 == '5' = true vs 5 === '5' = false, this means that it checks the value and also the type, so that Int 5 isn't equal a Str 5.
Answer
Access one element:
let byID = document.getElementById('id');
let qS = document.querySelector('#id');They return the first matching node. querySelector is the new selector interface, should be faster, but depends on browser implementation. querySelector can take any css-selector and is more comfortable.
Access one and more:
let byClass = document.getElementsByClassName(classname);
let qSA = document.querySelectorAll('.classname');They return a non-live NodeList, which is an array-like list of elements, array-like means that some functions are missing like push(), pop()).
Answer
The typeof operator is used to get the data type (returns a string) of its operand. The operand can be either a literal or a data structure such as a variable, a function, or an object. The operator returns the data type.
Syntax:
typeof operand;
typeof operand;Answer
LocalStorage
- It can store up to 10Mb offline data.
- The data is not sent back to the server for every HTTP request (HTML, images, JavaScript, CSS, etc) - reducing the amount of traffic between client and server.
- The data stored in localStorage persists until explicitly deleted. Changes made are saved and available for all current and future visits to the site.
- It works on same-origin policy. So, data stored will only be available on the same origin.
SessionStorage
- It is similar to localStorage.
- The data is not persistent i.e. data is only available per window (or tab in browsers like Chrome and Firefox). Data is only available during the page session. Changes made are saved and available for the current page, as well as future visits to the site on the same window. Once the window is closed, the storage is deleted.
- The data is available only inside the window/tab in which it was set.
- Like localStorage, tt works on same-origin policy. So, data stored will only be available on the same origin.
For more info please check MDN - LocalStorage & MDN - SessionStorage
Answer
null and undefined are two types in JavaScript. undefined means something hasn't been initialized. null means something is currently unavailable.
Answer
The anonymous functions are those function created with the function constructor and hasn't any given name, those functions are commonly used as parameters to other functions.
//declaration
function() {
console.log('Hi from anonymous my function');
}
//common use
setTimeout(function() {
console.log('Hi from my anonymous function');
}, 300);Answer
A callback function is a function that is passed to another function as an argument and is executed after some operation has been completed. Below is an example of a simple callback function that logs to the console after some operations have been completed.
const modifyArray = (arr, callback) => {
// do something to arr here
arr.push(100);
// then execute the callback function that was passed
callback();
};
var arr = [1, 2, 3, 4, 5];
modifyArray(arr, function() {
console.log('array has been modified', arr);
});Answer
innerHTML lets you work with HTML rich text and doesn't automatically encode and decode text. In other words, innerText retrieves and sets the content of the tag as plain text, whereas innerHTML retrieves and sets the content in HTML format.
Answer
Answer
When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors.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 of the target element in the same nesting hierarchy till it reaches the outermost DOM element or document object.
Let’s say, we have 3 nested elements FORM > DIV > P with a handler on each of them:
<form onclick="alert('form')">FORM
<div onclick="alert('div')">DIV
<p onclick="alert('p')">P</p>
</div>
</form>A click on the inner <p> first runs onclick:
- On that
<p>. - Then on the outer
<div>. - Then on the outer
<form>. - And so on upwards till the document object.
So if we click on
<p>, then we’ll see 3 alerts. The process is called “bubbling”, because of events “bubble” from the inner element up through parents like a bubble in the water.
For more info & reference Javascript - Bubbling and capturing
Answer
The global NaN property is a value representing Not-A-Number.
Answer
q-unit, mocha, chai, sinonJS, jasmine, ...
Answer
Means that the declaration moved to the top of the current scope (current script or the current function). JavaScript only hoists declarations, not initializations.
let and const don't get hoisted.
Answer
Switches to strict mode which helps to prevent common errors like using unsafe operators
Answer
bind is a method to bind the current context for later execution e.g.
element.addEventListener('click', this.onClick.bind(this), false);it creates a new function which prevents accidental loss of scope. An alternative approach is to use apply, call or ES6 fat-arrow function.
Answer
Function that will take a function as argument or return a new function. For example [].map/filter/reduce are higher order functions.
Answer
map - to iterate over an array and return a new one
filter - to filter an array and return a new filtered one
reduce - takes and reducer function which evaluate against every element and can produce every desired output (filter, map or simple value like sum)
Answer
If you have to watch a lot of elements and performance is key