Interview Wiki Javascript/React/Frontend Flashcards
What is a potential pitfall with using typeof bar === “object” to determine if bar is an object? How can this pitfall be avoided?
Although typeof bar === “object” is a reliable way of checking if bar is an object, the surprising gotcha in JavaScript is that null is also considered an object!
What is the significance of, and reason for, wrapping the entire content of a JavaScript source file in a function block?
This is an increasingly common practice, employed by many popular JavaScript libraries (jQuery, Node.js, etc.). This technique creates a closure around the entire contents of the file which, perhaps most importantly, creates a private namespace and thereby helps avoid potential name clashes between different JavaScript modules and libraries.
Another feature of this technique is to allow for an easily referenceable (presumably shorter) alias for a global variable. This is often used, for example, in jQuery plugins. jQuery allows you to disable the $ reference to the jQuery namespace, using jQuery.noConflict(). If this has been done, your code can still use $ employing this closure technique, as follows: (function($) { /* jQuery plugin code referencing $ */ } )(jQuery);
What is the significance, and what are the benefits, of including ‘use strict’ at the beginning of a JavaScript source file?
The short and most important answer here is that use strict is a way to voluntarily enforce stricter parsing and error handling on your JavaScript code at runtime. Code errors that would otherwise have been ignored or would have failed silently will now generate errors or throw exceptions. In general, it is a good practice.
What is NaN? What is its type? How can you reliably test if a value is equal to NaN?
The NaN property represents a value that is “not a number”. This special value results from an operation that could not be performed either because one of the operands was non-numeric (e.g., “abc” / 4), or because the result of the operation is non-numeric (e.g., an attempt to divide by zero).
While this seems straightforward enough, there are a couple of somewhat surprising characteristics of NaN that can result in hair-pulling bugs if one is not aware of them.
For one thing, although NaN means “not a number”, its type is, believe it or not, Number:
console.log(typeof NaN === “number”); // logs “true”
Additionally, NaN compared to anything – even itself! – is false:
console.log(NaN === NaN); // logs “false”
A semi-reliable way to test whether a number is equal to NaN is with the built-in function isNaN(), but even using isNaN() is an imperfect solution.
A better solution would either be to use value !== value, which would only produce true if the value is equal to NaN. Also, ES6 offers a new Number.isNaN() function, which is a different and more reliable than the old global isNaN() function.
What is a “closure” in JavaScript?
A closure is an inner function that has access to the variables in the outer (enclosing) function’s scope chain. The closure has access to variables in three scopes; specifically: (1) variable in its own scope, (2) variables in the enclosing function’s scope, and (3) global variables.
What are undeclared and undefined variables?
Undeclared variables are those that do not exist in a program and are not declared. If the program tries to read the value of an undeclared variable, then a runtime error is encountered.
Undefined variables are those that are declared in the program but have not been given any value. If the program tries to read the value of an undefined variable, an undefined value is returned.
What is negative infinity?
Negative Infinity is a number in JavaScript which can be derived by dividing negative number by zero.
What is ‘this’ keyword in JavaScript?
‘This’ keyword refers to the object from where it was called.
What is the function of the delete operator?
The functionality of delete operator is used to delete all variables and objects in a program but it cannot delete variables declared with VAR keyword.
This answer is not complete. Please see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete when assessing candidates’ answers.
What are the major features of React?
It uses VirtualDOM instead of the real DOM because real DOM manipulations are expensive in terms of performance.
Supports server-side rendering.
Follows Unidirectional data flow or data binding.
Uses reusable/composable UI components to develop the view.
What is JSX?
JSX is an XML-like syntax extension to ECMAScript (the acronym stands for JavaScript XML). Basically it just provides syntactic sugar for the React.createElement() function, giving us expressiveness of JavaScript along with HTML-like template syntax.
Why you can’t update props in React?
he React philosophy is that props should be immutable and top-down. This means that a parent can send any prop values to a child, but the child can’t modify received props.
What are the React lifecycle functions?
Read about ‘em all here.
Underlined = very common, candidate should definitely know.
–Mounting:–
constructor()
static getDerivedStateFromProps()
render()
componentDidMount()
–Updating:–
static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()
–Unmounting:–
componentWillUnmount()
-Error Handling:-
static getDerivedStateFromError()
componentDidCatch()
(CSS-Beginner) What are the different types of CSS selectors? Explain how CSS specificity is calculated.
Answer: Type, class, and ID (others include attribute, universal, and pseudo-classes). Numerically, an inline style is worth 1000, IDs are 100, classes are 10, and types are 1. Knowing the exact numbers is not crucial – you could also explain this by noting the order in which each selector overrides the others.
(CSS-Beginner) Explain the difference between inline elements and block-level elements. Name some elements that default to each type.
No answer from wiki provided
