JavaScript and React.js Technical Interview Preparation
Getting a response and an interview from a company for a job is already difficult enough, but even if you succeed and ace your first interview, the second one presents an even greater difficulty. The technical interview can test anything from a large range of topics to very little depending on the company, but having to answer questions live is always more difficult since unless you prepared for that specific questions, you could always just draw a blank from nerves or bad luck. This article will go over some of the common questions and topics that are asked, as well as their answers, to help people prepare for any interviews that might have coming up (so long as the main jobs language is JavaScript that is)!
JavaScript Topics
- Hoisting
- The declaration of variables is treated as done at top of a function (if declared inside) or at top of global scope (if declared outside) and same with function declarations, since document is scanned and all declarations are made first. However, even if a declaration is hoisted up, the value assigned to it is not yet evaluated. Pretend all 3 in the following box are separate and not stacked on top of each other in the same environment.
var var1 = "VARIABLE"
console.log(var1)
# would print "Variable"
console.log(var1)
var var1 = "VARIABLE"
# would print undefined
console.log(var1)
# would return an error since var1 wasn't declared yet
2. Undefined vs Null
- Undefined is when a variable is declared but not assigned a value.
- Null is when a variable is explicitly assigned a value of null (empty).
3. Var vs Const vs Let
- Var can be reassigned and updated, but is only available inside the function where it was declared, unless it was declared in function global scope.
- Let and const are both block scope , but const cant be reassigned.
4. Bubbling
- 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.target stays the same entire time, but this changes each step)
5. Closure
- Holds onto the variables that it had access to when it was declared. Closures can be used to declare functions that have specific variables always defined. JavaScript developers also take advantage of closures to encapsulate data, as we can declare our functions in such a way that the data is only accessible from the returned function, with no way to overwrite the variables captured by the closure.
var add = (function () {
var counter = 0;
return function () {counter += 1; return counter}
})();
add();
add();
add();
# the counter would now be 3
6. Callback
- A function passed to another function to be called at a later time
7. Constructor
- Used to initiate a specific instance of a class object.
function objectCreator(att1, att2) {
this.att1 = att1;
this.att2 = att2;
}
8. This
- if “this” is used as a stand-alone or inside a function “this” refers to the window/global scope
- if used in an object method (such as person1.name) “this” refers to the object that received the call
- in an event, this refers to the element that received the event
- function.call(context) and function.apply(context) allows you to call a function in a specific context, such as greet.call(Sally) instead of just greet.call
- .bind keeps something in the context of what it is bound by; i.e. greet.bind(sally), using it on the outside of a function before it invokes another function inside .bind(this)ensures the scope of the inside function is the scope of the this bound one
9. Strict Mode
- In strict mode you will get errors instead of JavaScript trying to work around your stuff, like letting you make undeclared variables in global scale and stuff (default mode for most browsers)
10. Function declaration vs function expression
- Function declaration is making a function function name(){}
- Function expression is typically let var1 = (either a named of anonymous function)
- ** variable declaration and function declaration hoisted to start things off, but if a variable itself calls a function (function expression now) that function isn’t run yet, and the var is undefined
React.js
11. Class component vs Functional component
- class vs functional => functional = no state or lifecycle hook
12. Controlled Component vs Uncontrolled Component
- Controlled component is made so things like input which typically maintain own state and update based on user input are maintained as own state and only updated with setState
- Uncontrolled component has own internal state, data is accessed through the event such as event.value
13. Keys
- Values that help React identify which items have changed, are added, or are removed. Unique keys should be given to the elements inside the array to give the elements a stable identity, typically data IDs are used.
14. higher-order component
- F.unction that takes a component and returns a new component.
15. Life-cycle
- Stuff that happens when something is first rendered (mount) or removed (unmount)
CSS
17. vertically align div in another div
- display: flex; justify-content: center (center right + left); align-items: center (center up + down)
container {
display: flex;
justify-content: center;
align-items: center
}
18. Span
- Element used to color part of text, used to group text together and by itself provides no visual change
<p>A <span style="color:blue">blue</span> example.</p>
19. Box Model
- Starting from inside to outside, consists of: content -> padding -> border -> margin
20. Box-Sizing
- Allows us to include padding and border in elements total height and width
#box {
box-sizing: border-box;
}
21. DOM
- tree like structure of nodes of connected elements
22. Shadow DOM
- Allows hidden DOM trees to be attached to elements of normal DOM tree
23. Shadow Host
- The regular DOM node shadow DOM is attached too
24. Shadow Tree
- DOM tree inside the shadow DOM.
25. Shadow Boundary
- Place where shadow DOM ends and normal DOM begins.
26. Shadow Root
- Root node of shadow trees (first node that the shadow host is connected too)
27. Pseudo-Element
- used to style specific parts of an element
p::first-line{color: red}
Algorithms
28. Breadth-First Search
- Algorithm style that explores all neighboring nodes at current level before moving onto deeper levels
29. Depth-First Search
- Algorithm that explores as far possible along one nodes path until the end and backtracks
30. Binary Search
- Algorithm that only works on a sorted array; compares target element to middle value, eliminates half it cannot be in, and repeats
31. Merge-Sort
- Sorting algorithm that divide unsorted list into single element sublists (single element is considered sorted), then merges sublists into sorted sublists until only one list remains (this is the sorted list).
32. Quick-Sort
- sorting algorithm that:
- 1) pick an element (called pivot) from array
- 2) rearrangse so all greater elements then pivot come after and all less elements come before
- 3) recursively applies above steps to each sub array on both sides
33. Bubble-Sort
- Sorting algorithm that goes through an array, compares two elements, swap to be in correct order if needed, moves on to the next pair, then restarts from the beginning of the array and repeat until there are no swaps
34. Insertion-Sort
- Sorting algorithm that take an element out of array, creates a new array, inserts it into the new array in the proper place, and repeat until the original array is empty.
Data Structures
35. Queue
- A way of storing info where the first item in is the first item out
- An example is a line at a cashier.
36. Stack
- A way of storing info where the first item in is the last item out
- An example is a stack of plates at a buffet, new dishes are put on top of the old ones.
37. Heap
- A way of storing info where an item can go in or be taken out in any order
- A bookshelf or market shelf.
38. Priority Queue
- Abstract data type which is like a regular queue or stack data structure, but where additionally each element has a “priority” associated with it. In a priority queue, an element with high priority is served before an element with low priority. In some implementations, if two elements have the same priority, they are served according to the order in which they were enqueued, while in other implementations, ordering of elements with the same priority is undefined
39. Binary Tree
- Data structure in which each node has at most 2 children, and which those nodes can have 0–2 children.
There are obviously many more questions that can be asked and topics that can be brought up, but this should cover a bunch of the common ones! Hopefully this will serve as a helpful pre-interview study sheet in the future, good luck in all of your future interviews!