Interview Prep

Question 1

What is React Js?

Answer 1

• a front end JavaScript library for building web and mobile user interfaces
• It was developed by Facebook in 2011
• React allows developers to build reusable UI components
• It has the support of a large, open source community

Question 2

What are React components?

Answer 2

When it comes to using React, everything boils down to components.
Components are the building materials React uses to create website and application UI’s.
Components break a UI down into reusable parts (one of React’s core competencies). React then renders each UI component as needed (separately from the others), which is a big part of React’s fast performance speeds.

Question 3

What is the difference between props and state?

Answer 3

“State” describes a default data value in a React component that can change over time (usually based on user actions that call for changes in a UI).

“Props” (or properties) describe the way a React component is configured. Props do not change.In summary: state is mutable (changeable based on user actions) while props are not

Question 4

When would you use a class component over a functional component?

Answer 4

Functional components are the most basic kind of React component, defined by the components (unchanging) props.
Class components are more complicated React components that allow developers to execute component lifecycle methods and manage a component's state.
This means class components are used over functional components when you need to manage state or use component lifecycle methods

Question 5

What are React events?

Answer 5

Events are reactions (the library IS called React, right?) that are triggered by specific user actions like clicking on a UI button, hovering a mouse over a UI object, using keyboard commands with the UI, etc.

Question 6

What is JSX?

Answer 6

JSX is an HTML-like syntax that let’s developers write HTML style code in JavaScript, in case you prefer the readability of HTML to raw JavaScript

Developers do NOT need to use JSX to build websites or applications with React, but it can be a helpful tool for reducing overall code complexity (and Facebook encourages using it in their official React documentation)

After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects.

Question 7

What are virtual DOMs and how do they work?

Answer 7

When web browsers render HTML documents and turn them into a website or application on a screen, they create a representational tree of how the site or app is arranged called a Document Object Model (DOM).

Without React, your website or app will use HTML to update its DOM in order to make things “change” on screen without users needing to manually refresh a page. React JS takes a different approach by creating a Virtual DOM—a copy of the site’s “actual” DOM.
React uses this copy to determine what parts of the actual DOM need to change based on a user’s action. React then takes the change date from the Virtual DOM and selectively updates the actual DOM (versus reloading the entire thing). Over time, this leads to significant performance improvements for the website or application.

Question 8

What is the difference between React and React Native?

Answer 8

React JS is a front end, open source JavaScript library used for building UIs. React Native, on the other hand, is an open source, MOBILE framework that allows developers to use React on platforms like Android and iOS. “Native” is a reference to the fact that React Native integrates React components with the native capabilities of these mobile-specific platforms.

Question 9

What are some of the major advantages of using React?

Answer 9

Increased application performance via the Virtual DOM model

Improved coding efficiency with JSX

The ability to reuse components across multiple projects

Flexibility and extensibility through add-on tools provided by React’s open source community

Question 10

What are some of React’s limitations?

Answer 10

React JS is a JavaScript library and not a full-blown framework, meaning it might not be full service enough for some project

React’s library is extremely large and can take additional time and experience (past the initial learning phase) to really understand

JSX adds a new coding dimension for developers who haven’t used before (though it does have a gentle learning curve due to its similarity to HTML)

Question 11

What is Redux?

Answer 11

Redux is a predictable state container for JavaScript apps.

It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

Question 12

What is the difference between const, let, and var?

Answer 12

const is a constant, it is read only, and cannot be reassigned (the pointer cannot change). Objects assigned to a variable using const are still mutable - you can still add properties to objects or elements to an array

let allows the variable to be reassigned (changing pointer), when declared inside a block, statement, or expression, its scope is limited to that block, statement, or expression

var declares a variable globally, it can also be reassigned

Question 13

Explain prototypical inheritance

Answer 13

Everything in JavaScript has a baseline object prototype that it inherits from. When you create an object based on its prototype, it will inherit the prototype’s properties and methods by default, but then you can overwrite them.

Question 14

What does “this” mean in JavaScript

Answer 14

“this” refers to the context of everything that is available to access, so all the functions and objects that you currently can use

Question 15

What is the data structure of the DOM?

Answer 15

tree

Question 16

What is a stack? What is a queue? How would you create those data structures in JavaScript?

Answer 16

stack - last in first out
queue - first in first out

create both using an array, pop, push, shift, etc.

Question 17

How can you tell if an image element is loaded on a page?

Answer 17

There is an “onload” event that occurs when an object has been loaded. If the onload callback function runs, then the image has loaded.

Question 18

What are call() and apply()?

Answer 18

They are ways of changing the scope of the calling function. Call is a series of arguments, and apply is an array of arguments

Question 19

What is event delegation?

Answer 19

It is an event handling pattern. The idea is that if we have a lot of elements handled in a similar way, then instead of assigning a handler to each of them - we put a single handler on their common ancestor.

Question 20

What is a worker? When would you use one?

Answer 20

It is JavaScript that runs in the background without affecting the performance of the page. You use it to offload computationally expensive work from the main thread.

Question 21

What is Big O?

Answer 21

The longest amount of time that a function is going to take in the worst case scenario

O(n log n) example - sorting

O(n) example - iterate over the whole data set, like a for loop (this is the most common time)

O(log n) example - if you’re iterating over a data set and at every iteration you’re reducing the number of elements, like a binary tree search

O(1) - constant time, the function takes the same amount of time no matter the input

Question 22

What is the purpose of “use strict”

Answer 22

to indicate that the code should be executed in “strict mode”

With strict mode, you can not, for example, use undeclared variables.

Strict mode changes previously accepted “bad syntax” into real errors.

Question 23

What is the difference between = (equality) and == (strict equality)?

Answer 23

• The equality operator performs a type conversion if the values compared are of different types
• The strict equality operator compares type and value as-is

Question 24

What does Object.freeze() do?

Answer 24

Use Object.freeze to prevent data mutation. This ensures your data doesn’t change. Once an object is frozen, you can no longer add, update, or delete properties from it. Any attempt at mutation will be rejected without an error.