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
(CSS-Intermediate) Explain the difference between inline and inline-block.
Inline elements:
respect left & right margins and padding, but not top & bottom
cannot have a width and height set
allow other elements to sit to their left and right.
Block elements:
respect all of those
force a line break after the block element
Inline-block elements:
allow other elements to sit to their left and right
respect top & bottom margins and padding
respect height and width
(CSS-Intermediate) Explain CSS sprites, and how you would implement them.
Bonus: how will HTTP/2 affect this? Answer: This will be a bad practice.
(CSS-Intermediate) What’s the difference between a relative, fixed, absolute, and statically positioned element?
No answer from wiki provided
(CSS-Advanced) Tell me about some principles you’ve learned that that help lead to maintainable CSS.
This is open-ended, but they may mention some CSS methodologies such as OOCSS, SMACSS, BEM, or SUIT.
(javaScript - Beginner) I’m in a function, and I have two declarations: x = 2 and var x = 2. What’s the difference between these two declarations?
global scope, function scope.
(javaScript - Intermediate) Explain how closures work.
no wiki answer provided
(javaScript - Intermediate) Explain how event bubbling works.
no wiki answer provided
(javaScript - Intermediate) Explain event delegation. What property in the event object allows this to work?
no wiki answer provided
(javaScript - Intermediate) What’s the result of 0 == false, and why?
Answer: true.
(javaScript - Intermediate) Explain hoisting.
no wiki answer provided
(javaScript - Intermediate) What techniques have you used to organize or modularize your code?
no wiki answer provided
Tell me about how call and apply work.
Call a function with a given value for “this.” It’s ok if they get the two confused (apply takes an array, and call takes arguments).
Explain the bind method (If they didn’t get the call and apply question - skip this).
Create a new function that uses a given value for “this.”
Explain how the Array map function works.
Create a new array with the results of calling a provided function on every element in the array.
Explain how prototypal inheritance works in JavaScript.
no wiki answer provided
How can you identify the value of “this” in a function?
no wiki answer provided
What’s your favorite ES6 (ES2015) feature?
no wiki answer provided
If you could change anything about the JavaScript language, what would it be?
no wiki answer provided
Whiteboard “FizzBuzz tests” (check basic JS coding skills)
How would you make each of these work?
add(2, 5); // 7
add(2)(5); // 7
Define a spacify function that separates each character with a space:
spacify(‘hello world’); // ‘h e l l o w o r l d’
Simplest answer:
function spacify(str) {
return str.split(‘’).join(‘ ‘);
}
Could also use a for loop.
