Front End questions

Question 1

What is React?

Answer 1

React is a JS library used for building interactive user interfaces. It is also the most popular and widely used front-end tool.

Question 2

What is Javascript?

Answer 2

JS is a scripting language used to create and control dynamic web content. It is synchronous, blocking, and single-threaded in its most basic form. Single-threaded means it can only do one thing at a time.

Question 3

What is JSX?

Answer 3

An HTML-like syntax extension of Javascript. It allows us to write HTML elements in JS and place them in the DOM without the need of using createElement() and appendChild(). This HTML like synatx is converted into JS objects using a transpiler like Babel

Question 4

What is the virtual DOM

Answer 4

React creates a Virtual DOM which is a copy of the actual DOM. Any time a change is made or state changes in the application, a new virtual DOM is created and compared to prev virtual DOM. The actual DOM then updates only those objects that were changed in the virtual DOM. Virtual DOM leads to improved performance and faster applications.

Question 5

What makes Redux special?

Answer 5

Because state is stored in a central location, it makes it easier to understand where errors are occurring thus easier to debug issues. Also, access to Redux dev tools, and handy middlewares like redux thunk and redux persist

Question 6

What are reducers in redux?

Answer 6

A reducer is a slice of the entire pie that is the application’s state. It is a function that takes in an initial state and a set of various actions. Depending on the action that is dispatched, the state living in the reducer will be altered in a certain manner. The reducer gets exported and imported into the rootReducer which makes up the Redux store.

Question 7

Why did you choose React?

Answer 7

I chose React because it is a very popular and highly-regarded web technology. Based on my research it seemed to be a less complicated and more beginner friendly JS library/framework, especially when compared to Angular. Moreover it is incredibly powerful due to the various libraries and packages that can be installed to assist you in development.

Question 8

What is AJAX?

Answer 8

Stands for asynchronous javascript and XML. It is used to make a request to a server in which JSON is the commonly used format for receiving the server data. Fetches are made using XMLHttpRequests. Can use fetch and axios to make AJAX requests which return a promise.

Question 9

What is Restful API

Answer 9

Restful API simply refers to an API that adheres to the constraints of a REST API.

Question 10

What is a REST API?

Answer 10

A REST API conforms to a particular set of criteria:

1. A client-server architecture in which client requests are made via HTTP. The response format from making this request is typically in JSON (JS Object Notation)
2. Stateless communication between client and server. All state is maintained on client side
3. Layered system in which the architecture is composed of hierarchical layers that is not visible to the client

Question 11

What are the major features of React

Answer 11

1. Reusable components
2. Virtual DOM
3. Unidirectional Data flow
4. JSX
5. Important extensions like Redux for state management and various other useful libraries that make development easier.

Question 12

What is the DOM?

Answer 12

Document Object Model is a tree-like structure interface that represents how the HTML is read by the browser. It can be manipulated, re-structured, and styled with a scripting language such as JS.

Question 13

What is State?

Answer 13

State is an object that is used to contain data or information about a specific component. When the user interacts with the page with a particular event, such as a click or key press, the state can change. Depending on the state of the application, the component will behave and render in a certain manner.

Question 14

What are props?

Answer 14

Props are useful in React in a few ways. One example is when you create a re-usable component in which the structure will be maintained but the content of the component will be different for each instance, props can be used in each occurrence of the component to specify it. Also, if a component is rendering a child component within it, you can give that child component data.

Question 15

Why do we set a key prop when we map over an array?

Answer 15

The key prop establishes a relationship between the component and the DOM element. It helps React understand which elements should be updated and which can stay in tact after a particular change within the component. It is not recommended to use the item’s index as a key due to the fact that the array can change it’s order at some point.

Question 16

What is a promise?

Answer 16

A JS object that returns a value which you hope to receive in the future. Promises are well-suited for handling asynchronous operations, such as making a call to an API. 3 states of a promise are pending, fulfilled, rejected. Promise responses can either be handled with .then and .catch method, or by using a try, catch block with async await.

Question 17

How to make AJAX request using Redux?

Answer 17

install redux thunk which allows asynchronous operations within redux. Create an action that dispatches different types depending on whether the response was resolved or rejected

Question 18

What is the benefit of using async/await?

Answer 18

Easier to read then .then because you are creating variables for the Promise responses. It looks like synchronous code.

Question 19

How to copy an array in JS

Answer 19

You can create a new array and use the spread operator to spread all of the values in the existing array to the new array. You can also create a new array in where you map over the existing array and just return the values.

Question 20

null vs undefined vs undeclared?

Answer 20

1. Undeclared means a variable has been declared without the use of var let or const
2. Null means the intentional absence of any value.
3. Undefined means a variable has been declared but not given a value (let x) or not declared at all

Question 21

What is a closure?

Answer 21

When a function is defined within another function, the inner function has access to the variables and scope of the outer function even when the outer function has finished executing. The closure is a function that accesses its lexical scope and the variables that live within it even when that function is executed outside its lexical scope. A closure remembers the variables from the place where it is defined, no matter where it is executed.

Question 22

What is lexical scoping?

Answer 22

It means the accessibility of variables is determined by the position of the variables inside the nested scopes. It means that inside an inner scope you can access variables living in the outer scope.

Question 23

What does lifting state up mean and why do we do it?

Answer 23

Lifting state from a child component back up to the parent component for the parent to utilize. This is done using a callback function. In other words, you can create a function that alerts the state in the parent and pass this function to the child through props. You can then pass the proper arguments to that function in the child to alter the parent’s state.

Question 24

What is a callback function?

Answer 24

A callback function is a function that is passed into another function as an argument to be executed later. Common examples include the callback function that is used with an array method such as filter or map, or the function used with a JS eventListener.

Question 25

What is redux thunk?

Answer 25

It is a Redux middleware that allows you to do async actions by allowing you to return another function in your action which takes dispatch as an argument and then dispatches the synchronous action after the API call has finished.

Question 26

What is a Redux Middleware?

Answer 26

Redux middleware is a function that sits between the action and reducer and can interact with the dispatched action before reaching the reducer function. Used for purposes such as logging(redux-logger) and asynchronous API calls.

Question 27

React Context vs Redux

Answer 27

Redux is much more powerful and comes equipped with more tools such as Redux Thunk, Redux Persist, Redux Logger, Redux Saga. I’ve often read that an appropriate use for Context is if you are using Redux solely to avoid passing down props to child components.

Question 28

cookies?

Answer 28

Smallest capacity of storage. Accessible from any window. Expiration is manually set. Can be stored on browser and server. Cookies used to send data to a server, so do not use if unnecessary.

Question 29

Local Storage

Answer 29

largest storage capacity. Accessible from any window. Never expires. Meant from trivial data to be stored on local side like game scores. Only stored on browser.

Question 30

Session Storage

Answer 30

Larger capacity than cookies, smaller than local storage. Only accessible from the same tab. Expires when tab closes. Only stored in the browser.

Question 31

What is asynchronous programming?

Answer 31

Asynchronous programming is when we want to do an operation in JavaScript in which the result we are trying to obtain will not be immediately available. Running our code asynchronously means to let the code do multiple things at the same time without stopping or blocking the main thread. Async operations are put into the event/callback queue to wait for the call stack and main thread to finish executing so it does not block code. Asynchronous functions can be handled with callback functions, or with Promises using .then() or async/await.

Question 32

What is hoisting?

Answer 32

Hoisting is when the JS engine moves variable and function declarations to the top of the code during the creation phase of the global execution context. They are stored in memory which allows them to be executed before declared. Function expressions and arrow functions aren’t hoisted, meaning they cant be executed before declaration. A function expression will behave similar to a variable in that it will return undefined if executed before declaration.

Question 33

Var variable

Answer 33

Var is local (or function) scoped. Var can be redeclared AND updated. Var variables are hoisted to the top of their scope and initialized with a value of undefined. Var is problematic because using the same variable name throughout the code base can result in unintentional bugs.

Question 34

What is JS execution context?

Answer 34

When JS engine executes a script it creates execution context. Each execution context has two phases: creation phase and execution phase. Global Execution Context is created and variable and function references are stored in memory during the creation phase. Variables will originally be undefined. During execution phase, JS engine assigns values to variables and executes function calls. For every function call, JS engine then creates a function execution context where it creates an arguments object.

Question 35

Why use Redux Dev Tools?

Answer 35

It makes it easier to track where and how state has changed. You can trace actions

Question 36

What is a higher order function?

Answer 36

A Higher-Order function is a function that receives a function as an argument or returns the function as output. Examples include Array.prototype.map, Array.prototype.filter which are built into the language.

Question 37

What is scope in JS?

Answer 37

Scope defines where variables are available for use.

Question 38

Let variable

Answer 38

Let is block scoped, meaning if/else statements and loops. Let can be updated but NOT re-declared. Let declarations are hoisted to the top but unlike var which is initialized as undefined, the let keyword is NOT initialized.

Question 39

Const variable

Answer 39

Block scoped. Const cannot be updated OR re-declared. Can update an object declared with const however. ex) greeting.message = ‘blah blah’. Hoisted to the top but not initialized. Must be initialized (given a value) when declared.

Question 40

What is NPM?

Answer 40

Node Package Manager. Command line utility to install packages.

Question 41

What is Webpack and Babel?

Answer 41

Babel is a JS transpiler that converts older versions of JS code to new ones so it works on all browsers. Webpack is a modular build tool transforms source code of a module.

Question 42

Explain CSS Box Model

Answer 42

rectangular layout paradigm for HTML element that consists of the content, padding, border, and margin

Question 43

What is SASS?

Answer 43

Syntactically Awesome StyleSheets. It’s a CSS pre-processor that adds power and elegance to CSS. You can use variables and nested rules with it.

Question 44

What is strict mode?

Answer 44

With strict mode, you cannot use undeclared variables. And undeclared variable is the following: greeting = ‘hello’

Question 45

What are the JS data types?

Answer 45

Primitives: boolean, number, string, symbol, undefined, null. Object is not a primitive data type.

Question 46

What do the break and continue statements do?

Answer 46

Break statement is used to exit a current loop. Continue statement continues the loop.

Question 47

What are default parameters in a function?

Answer 47

When you specifiy default values for parameters in a function. ex) function multiple(numberOne = 1, numberTwo = 3) {return numberOne * numberTwo}

Question 48

What are default parameters in a function?

Answer 48

When you specifiy default values for parameters in a function. ex) function multiple(numberOne = 1, numberTwo = 3) {return numberOne * numberTwo}

Question 49

Synchronous vs Asynchronous programming

Answer 49

Synchronous functions wait until each statement in a method has been run before moving onto the next. Asynchronous functions execute each line of code without stopping to wait for a value from a function.

Question 50

Explain CSS Specificity

Answer 50

CSS specificity concerns itself with how style rules are applied to an HTML document. Inline-styling and id’s have the highest specificity so those styling rules will reign supreme over classes and element selectors

Question 51

What is an API

Answer 51

Application programming interface. It is basically a software intermediary that allows two applications to communicate with each other. An analogy is that an API is the waiter in a restaurant who registers your request for a particular dish, communicates that with the kitchen (which is the server or database), and returns the dish back to you.

Question 52

What happens when we enter a url into our browser?

Answer 52

A request goes out to the server and after a response is received the browser interprets the code and displays the web page.

Question 53

How does Redux work?

Answer 53

A store is created that hold all of the state of the application. This state lives in different reducers that make up the rootReducer. The rootReducer gets passed into the store. The store wraps the entire application. Actions are functions that can be dispatched throughout the application to cause changed within each reducer, thus altering the state of the application.

Question 54

What is the redux setup process?

Answer 54

Import Provider which wraps around the App component in index.js. Provider takes in a store prop. Create the store. Pass in rootReducer and any middlewares such as Redux Thunk. RootReducer is made up of individual reducers. Reducers are specific pieces of state for specific components within the application. Actions can be dispatched to alter the state in the reducers. You can bring in state and actions into components with useSelector and useDispatch.

Question 55

How do you copy an object in JS?

Answer 55

You can use spread operator and Object.assign

Question 56

How do you compare objects in JS?

Answer 56

using method Object.is()

Question 57

What is prototypal inheritance?

Answer 57

All objects that are linked to a certain prototype object can use the methods and properties defined in the prototype. The objects inherit the properties of the prototype.

Question 58

What is ‘this’ keyword?

Answer 58

Refers to the specific object that is calling a method from it’s prototype. In the global state, ‘this’ refers to the window object. Created during creation phase of global execution context

Question 59

Give an example of a closure

Answer 59

If you have an IIFE (Immediately invoked function expression), often there will be variables and functions defined within it. Inner functions will maintain access to variables defined in the IIFE even when the IIFE is finished executing right when the page renders.

Question 60

What are examples of higher order functions?

Answer 60

Addevent Listener (which takes in a callback function)

Question 61

What is the call method?

Answer 61

A method used on a function that manually sets the ‘this’ keyword on any function that we want to call. Basically, if you want to use a method defined within an object outside of the object, the ‘this’ keyword originally points to undefined. Using call method, we define the object that we want ‘this’ to point to.

Ex) book.call(americanAirlines, 586, ‘Rabie Nasser’)

Question 62

What is the apply method?

Answer 62

Does the same thing as call method but takes in the object that you want 'this' to point to, and an array of arguments. Ex) const flightData=[567, 'Rabie Nasser']
book.apply(americanAirlines, flightData)

Question 63

What is the bind method?

Answer 63

A replacement to using call or apply. The easiest way to define ‘this’ keyword for a function. Create a variable that ‘binds’ the function to the object you want ‘this’ to point to.

Ex) const spirit = book.bind(americanAirlines)
spirit(456, 'Rabie Nasser')

Question 64

rem vs em

Answer 64

em units for the font-size property will be relative to the font-size of the parent element. rem units sizes will always be relative to the font-size of the root html element.

Question 65

managin state in classes vs fn component

Answer 65

In a functional component you use the useState hook. With class components, state is an object and you change it using this.setState

Question 66

css flex vs grid

Answer 66

CSS flexbox is designed from providing layouts in only one dimension, and they can be either row or column. CSS Grid can be used to create more complex layouts in 2 dimensions