JavaScript Flashcards
Explain event delegation
Event delegation is a technique involving adding event listeners to a parent element instead of adding them to the descendant elements. The listener will fire whenever the event is triggered on the descendant elements due to event bubbling up the DOM. The benefits of this technique are:
Memory footprint goes down because only one single handler is needed on the parent element, rather than having to attach event handlers on each descendant.
There is no need to unbind the handler from elements that are removed and to bind the event for new elements.
Explain how this works in JavaScript
There’s no simple explanation for this; it is one of the most confusing concepts in JavaScript. A hand-wavey explanation is that the value of this depends on how the function is called. I have read many explanations on this online, and I found Arnav Aggrawal’s explanation to be the clearest. The following rules are applied:
If the new keyword is used when calling the function, this inside the function is a brand new object.
If apply, call, or bind are used to call/create a function, this inside the function is the object that is passed in as the argument.
If a function is called as a method, such as obj.method() — this is the object that the function is a property of.
If a function is invoked as a free function invocation, meaning it was invoked without any of the conditions present above, this is the global object. In a browser, it is the window object. If in strict mode (‘use strict’), this will be undefined instead of the global object.
If multiple of the above rules apply, the rule that is higher wins and will set the this value.
If the function is an ES2015 arrow function, it ignores all the rules above and receives the this value of its surrounding scope at the time it is created.
Can you give an example of one of the ways that working with this has changed in ES6?
ES6 allows you to use arrow functions which uses the enclosing lexical scope. This is usually convenient, but does prevent the caller from controlling context via .call or .apply—the consequences being that a library such as jQuery will not properly bind this in your event handler functions. Thus, it’s important to keep this in mind when refactoring large legacy applications.
What is the difference between == and ===?
The == operator compares two values, without taking into account their types. === compares the values, but also makes their types into account. So 3==’3’ evaluates to True, but 3===’3’ evaluates to False.
What is the difference between textContent and innerHTML?
textContent is a concatenation of the text content of a node and its descendant. It is the fastest of the two.
innerHTML returns the HTML. It parses the text into HTML, which makes it slower.
What is the DOM?
DOM stands for the Documentation Object Models, and it is a World Wide Web Consortium standard.It defines a standard for accessing documents, and it can be used to access and change the content of the HTML.
what is a JavaScript object?
In JavaScript, an object is a standalone entity, with properties and type. Compare it with a cup, for example. A cup is an object, with properties. A cup has a color, a design, weight, a material it is made of, etc. The same way, JavaScript objects can have properties, which define their characteristics.
What are the JavaScipt data types?
There are seven data types: Boolean, Null, Undefined, Number, String, Symbol, Object. The first six are primitives, meaning data types that aren’t objects and do not have any methods.
What are the pop-up boxes types available in JavaScript?
There are 3 pop up boxes: Alert, Confirm and Prompt.
What do the break and the continue statements do?
The break statement is used to exit a current loop. On the other hand, the continue statement continues with the next announcement in the loop.
What is negative infinity in JavaScript?
The result of a negative number divided by 0.
Explain the differences between var, const and let.
var declarations are globally scoped or function scoped while let and const are block scoped.
var variables can be updated and re-declared within its scope; let variables can be updated but not re-declared; const variables can neither be updated nor re-declared.
They are all hoisted to the top of their scope. But while var variables are initialized with undefined, let and const variables are not initialized.
While var and let can be declared without being initialized, const must be initialized during declaration.
Explain the difference between null, undefined or undeclared variables.
Undefined variables have been declared, but no value exists for them. Null is a value of variables, as well as a type of object. Undeclared variables are those declared without the var, const or let keyword.
What is ECMAScript?
The standard specification for scripting languages. JavaScript is based on ECMAScript.
What is a promise?
An object that may produce a single value sometime in the future with either a resolved value or a reason for not being resolved
