Tech Interview

What is Promises vs Callback?

Promises are built on top of callbacks.

What is SQL?

Stands Structured Query Language, it is a standard language in which we can query a relational database.

What is third-party API?

When a company offers an API to their customers, it just means that they've built a set of dedicated URLs that return pure data responses — meaning the responses won't contain the kind of presentational overhead that you would expect in a graphical user interface like a website.

What is the difference between mapStateToProps() and mapDispatchToProps()?

mapStateToProps() : utility which helps your component get updated state. mapDispatchToProps() : utility which will help your component to fire an action event (dispatching action which may cause change of application state)

What props are passed down by the Route component to the rendered component?

match: contains information about how the route's path matches the current URL; most notably, it includes a params key that parses the URL parameters. history: used to manipulate the browser's history programmatically using properties on the history object, such as history.push; the history prop can be used when you don't want to use a Link and instead want to perform some sort of JavaScript before router use to another page. location: contains information about where the url is now.

What are the main components of a test spec?

- Describe block contains groups and subgroups of specs. - It block constitutes a single spec. (includes descriptive label of one thing that should happen, and function for testing that it actually happens. - expect : assertion throws error if expected condition is not met, failing the test.

What is the advantage of React?

- It increases the application's performance - Because of JSX, code's readability increases - Using React, writing UI test cases become extremely easy

What are the limitations of React?

- React is just a library, not a full-blown framework - Its library is very large and takes time to understand - It can be little difficult for the novice programmers to understand - Coding gets complex as it uses incline templating and JSX

What are the components of Redux?

1. Action: an object that describes what happened 2. Reducer: it is a place to determine how the state will change. 3. Store: state/Object tree of the entire application is saved in the store. 4. View: simply displays the data provided by the store.

What are the advantages of Redux?

1. Predictability of outcome: always one source of truth (store), there is no confusion about how to sync the current state with actions and other parts of the application. 2. Maintainability: the code becomes easier to maintain with a predictable outcome and strict structure. 3. Server-side rendering: you just need to pass the store created on the server, to the client side. This is very useful for initial render and provides a better user experience as it optimizes the application performance. 3. Developer tools: From actions to state changes, developers can track everything going on in the application in real time. 4. Community and ecosystem: Redux has huge community behind it which makes it even more captivating to use. A large community of talented individuals contribute to the betterment of the library and develop various applications within it. 5. Ease of testing: Redux's code is mostly functions which are small, pure and isolated. This makes the code testable and independent. 6. Organization: Redux is precise about how code should be organized, this makes the code more consistent and easier when a team works with it.

What is the process of Test-Driven Development?

1. Write a failing test. It should describe the desired behavior of your component, and it should initially fail because you haven't implemented this behavior yet. If it passes before you've implemented the behavior, it's probably a worthless test. 2. Write the code to make the test pass 3. Refactor the implementation as necessary 4. Repeat

What is Closure?

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). a closure gives you access to an outer function's scope from an inner function. closures are created every time a function is created, at function creation time. (NOT when function is executed) Closure describes a function that "remembers" & "access" variables that were in scope when they were defined. Function values contains both the code in their body and the environment in which they are created. When called, the function body sees the environment in which it was created, not the environment in which it is called. Ex. Closures are commonly used to give objects data privacy.

What is a server?

A computer dedicated to providing information to the client. It's purpose is to serve content requested by remote clients.

What is Express?

A library that allows us to easily create servers in Node and handles requests from the client via route handling. The library is an abstraction over Node's built-in HTTP module.

What is a reducer?

A reducer is a pure function, which specify how the application's state changes in response to an ACTION. Reducer takes in the previous state and action, and then it returns a NEW state object. It determines what sort of update needs to be done based on the type of the action, and then returns new values.

What is the significance of Store in Redux?

A store is a JavaScript object which can hold the application's state and provide a few helper methods to access the state ,dispatch actions and register listeners. The entire state/object tree of an application is saved in a single store. As a result of this, Redux is very simple and predictable. We can pass middleware to the store to handle the processing of data as well as the keep a log of various actions that change the state of stores. All the actions return a new state via reducers.

What is a NoSQL database?

A term used to describe databases that are Not Only SQL. They are non tabular and store data differently than relational databases. NoSQL databases use a variety of data models, the main types are document, key-value, wide-column, and graph. They provide flexible schemas and scale easily with large amounts of data and high user loads. Very high performance. - Allow developers to store huge amounts o unstructured data, gives a lot of flexibility. - Flexibility to iterate data quickly and make changes based on changing requirements (great for agile development methodology) Ex. Document database store data in documents similar to JSON objects. Each document contains pairs of fields and values. Values (string, num, booleans, array, objects). Benefits: Data that is accessed together is stored together, so you have less code to write and your uses get higher performance (no need to integrate separate ORM layer).

What is Virtual DOM?

A virtual DOM is a lightweight JavaScript object which originally is just the copy of the real DOM. It is a node tree that lists the elements, their attributes and content as Objects and their properties. React's render function creates a node tree out of the React components. It then updates this tree in response to the mutations in the data model which is caused by various actions done by the user or by the system. This Virtual DOM works in three simple steps. 1. Whenever any underlying data changes, the entire UI is re-rendered in Virtual DOM representation. 2. Then the difference between the previous DOM representation and the new one is calculated. 3. Once the calculations are done, the real DOM will be updated with only the things that have actually changed.

What is Action Type Constant?

Action types are defined constants which name the actions that can be dispatched through a Redux store. By creating constants, this ensures that if you mistype a constant when dispatching an action, you will see an obvious error pointing you toward your misspelling. Whereas if you simply passed a mistyped string as the type in your action, the action would silently fail to do anything in your reducer, as its type wouldn't match on any known types. This is a maddening kind of bug to try to track down.

What is API?

An API is a messenger that takes in a request and tells the system what you want to do and returns the response back to you. (A waiter!! gets your menu order, receives food from kitchen, serves the food to you) Contract provided by one piece of software to another (structured request and response) An API is a set of programming code that enables data transmission between one software product and another. It also contains the terms of this data exchange. An API isn't the same as the remote server — rather it is the part of the server that receives requests and sends responses. APIs as a way to serve your customers

What is an Action Creator?

An Action creator is a function that returns an action object. It can take as its arguments anything required to describe the action.

What do we need server when only doing Frontend development?

Because we need to see our application during development. We are not writing a normal HTML file, we have our JavaScript file and we need to have some server side functionality. We need HTTP protocol to resimulate as it will run later on when served by server.

What is Babel and what is its use?

Browsers can only read JavaScript objects but JSX is NOT a regular JavaScript object. Thus, to enable a browser to read JSX, first, we need to transform JSX file into a JavaScript object using JSX transformers/transpiler like Babel and pass it to the browser

What is Component in React?

Components are the building blocks of a React application's UI. These components split up the entire UI into small independent and reusable pieces. Then it renders each of these components independent of each other without affecting the rest of the UI.

What is difference between controlled and uncontrolled components?

Controlled components: - They do not maintain their own state - Data is controlled by the parent component - They take in the current values through props and then notify the changes via callbakcs Uncontrolled components: - They maintain their own state - Data is controlled by the DOM - Refs are used to get their current values. A controlled component has a value prop which is directly set (controlled) by application state. Changes to the value on state will update what you see on the form. Uncontrolled components do not have a value prop tied to application state. Updates to state will NOT be reflected in the form component.

What is Relational Database?

Database is a collection of data and is accessible via query language. In relational database, data is organized as a collection of tables which have fixed columns (properties) and rows (instances). Duplicated rows are now allowed and rows generally have a unique primary key(id). Relational database can be queried through SQL (a simple, declarative language that gets data based on what you specifically declare). - Upfront planning model, plan the data flow in detail and created relationship diagrams to ensure all data were organized in a way that software needed to be. - Hard to adapt if requirements changed during development cycle.

What is the purpose of render in React?

Each React component must have a render method. It returns a single React element which is the representation of the native DOM component. If more than one HTML element needs to be rendered, then they must be grouped together inside one enclosing tag. This function must be kept pure i.e. it must return the same result each time it is invoked.

What is flexbox?

Flexbox allows to arrange elements on two axis, the main and cross axis. The main axis can be either horizontal or vertical and can run in reverse. To layout a page with flexbox, break the design into horizontal and vertical sections.

What are Fragments?

Fragments let you group a list of children without adding extra nodes to the DOM.

What is Functional Programming?

Functional programming is the process of building software by composing pure functions, avoiding shared state, mutable data, and side-effects. Functional programming is declarative rather than imperative, and application state flows through pure functions. Contrast with object oriented programming, where application state is usually shared and colocated with methods in objects.

What is Sequelize Hooks?

Hooks allow you to add functions to be run when certain events occur in an instance. Such as beforeValidate, beforeCreate, beforeDestroy, beforeUpdate.

What is Asynchronous Programming?

In synchronous programming, only one thing can happen at a time, which means that when a function is called, any subsequent function calls are not run until the first function call completes. This is often referred to as blocking code. Contrastingly, asynchronous programming, or non-blocking code, allows multiple things to happen at the same time. In other words, the execution order is not dependent on the command order. Asynchronous programming in JavaScript is event based, which means that when a function is executed, it kicks off some external process and registers an event handler (i.e. callback function) for when that process finishes. The callback function will execute when the process finishes.

How does the internet work?

Internet is network of computers, and its job is to move data from one place to another. Browser looks up the address for the domain name through DNS (domain name server - distributed database that matches website URL with corresponding IP address.) IP is identification number of server hosting the website. Once the IP address is retrieved, browser establishes a TCP connection with the server (environment in which network conversation & data exchange can happen, Application layer transport protocols like HTTP and websockets rely on TCP). Then, browser sends HTTP request to the server (GET homepage RQ), server receives and handles the request (go through middlewares and find correct route that matches HTTP request), then server sends an HTTP response with status code. (send back initial HTML, could be JSON if requesting data) Once browser receives the response, it reads the HTML & builds the DOM tree. By going through line-by-line, when finds non-blocking resources (static images/CSS files), it requests those resources back to server and continues parsing. Once hits blocking resources (like script tag), pauses the rendering, so add defer attribute (so it doesn't block the process). Finish reading HTML line by line to render the initial homepage. Brief: *TCP/IP protocols are used to send/retrieve information from one computer to another. A request is sent over the network, hitting DNS (domain name servers) along the way to find the target server. The DNS points the request in the right direction. Once the target server gets the request, it can send a response back to your computer.

What is Webpack?

It is a build process. A tool that allows you to bundle all your assets like many separated javascript files, css into single file (bundle.js) which gets imported into your html pages. (we don't have to add many <scropTakes in files, running through conversion and split it out into something browser can understand. It lives in Node. Bundles React components and compiling its special syntax (JSX), and any dependencies our app has into browser-safe javascript (something browser can read) Allows you to use importing and modularity in modular system.

What is React Router?

It is a routing library built on top of React, which helps in adding new screens and flows to the application. It keeps the UI in sync with the URL, meaning that it uses the URL in the browser to determine what kind of presentation a visitor should receive without reloading the browser. It maintains a standardized structure and behavior and is used for developing single page web applications.

What is Redux?

It is a state management library for JavaScript applications. Redux uses store for storing the application's entire state at one place. So all the component's state are stored in the store and they receive updates from the store itself. The single state tree makes it easier to keep tack of change over time and debug or inspect the application. Three principles of Redux: 1. Single source of truth: You know exactly where all of your state is stored. 2. Data is Ready-Only: You can query the state of your app at any time. However, changing that state takes some work. 3. Changes are requested through actions and are made with pure functions: By making state changes with pure, synchronous functions, we have an auditable history of changes to our state, which makes things much easier to reason about & debug.

What is middleware in Express?

It is a term used to describe functions that are executed in between the server receiving the request and responding with a response. Middleware functions are often responsible for parsing requests, logging, and handling errors.

What is Single Page Application?

It is a website that fits on a single web page with goal of providing a more fluid and interactive user experience. With SPAs, a single view is loaded and then JavaScript is used to manipulate the DOM as the user interacts with the page. Instead of the server sending page new HTML page each time a user clicks on a link, an AJAX request is made to fetch new data from the server, which is then used to update what the user sees on the page via DOM manipulation

What is Database Driver?

It is an installable module that bridges between a programming language and a database. It abstracts the network connection and specifics of sending/receiving messages to/from the database server. For PostgreSQL database, we use PG as the database driver. with database driver, the level of operation is a string query. driver.query("select * from a_table)

What is the CSS box model?

It is essentially boxes within boxes that wraps around HTML elements, and it consists of from outer box to inner box: margins, borders, padding, and the actual content. Use box-sizing: border-box so that width of the content area is width-borderWith-paddingWidth.

What is the significance of keys in React?

Keys are used for identifying unique Virtual DOM Elements with their corresponding data driving the UI. They help React to optimize the rendering by recycling all the existing elements in the DOM. These keys must be a unique number or string, using which React just reorders the elements instead of re-rendering them. This leads to increase in application's performance.

What is Node.js?

Node.js is a runtime environment used for executing server-side code with higher efficiency and it presents a larger bandwidth to handle large code payloads. It is a JavaScript runtime environment built on Chrome's V8 engine, and it allows us to run JavaScript code on our operating system. We can build servers for our applications using Node.js

What is difference between making a network request via AJAX vs making a request via the URL bar?

One way to make a request to the server is to update the URL bar, which makes a request to the server and will be handled by a route, which will send back a response. An AJAX request does not require the URL bar to be updated. An AJAX request is a background HTTP request using JavaScript and no page refresh is necessary.

What is Props?

Props is the shorthand for Properties in React. They are read-only components which must be kept pure i.e. immutable. They are always passed down from the parent to the child components throughout the application. A child component can never send a prop back to the parent component. This help in maintaining the unidirectional data flow and are generally used to render the dynamically generated data.

What is REST?

REST is convention for building the HTTP services. It is an architectural style for providing standards between computer systems on the web, making it easier for systems to communicate with each other. RESTful systems are characterized by how they are stateless and separate the concerns of client and server. Relies on HTTP protocol. API is the messenger, and REST lets us use HTTP request to format those messages. REST API means conforming to the REST constrains. Separating the user interface concerns (client side) from the data storage concerns (server side), we improve the flexibility of the interface across platforms and improve scalability by simplifying the server components.

How are forms created in React?

React forms are similar to HTML forms. But in React, the state is contained in the state property of the component and is only updated via setState(). Thus the elements can't directly update their state and their submission is handled by a JavaScript function. This function has full access to the data that is entered by the user into a form.

What is React?

React is an open-source JavaScript library for building complex, interactive User Interfaces in web and mobile applications. Key: Change the state and the view will be updated by re-rendering. Separated into Components (with hierarchy) - Javascript class or function that describes that return React element that how a section of the UI should appear. React Element is a javascript object that maps the real DOM element, it not real DOM elements, it is a javascript object that represents the DOM element in memory, React keeps lightweight representation of the DOM in memory, which is referred as VIRTUAL DOM. It is cheap to create. (very FAST) When we change state of component, we get new react element, react will then compare this element and its children with previous one, figures out what is changed, and then it will update part of the real DOM to keep it in sync with the virtual DOM. *Simply change the state of components and React will automatically update the DOM to match that state. *React is a LIBRARY, only takes care of rendering the view, and making sure view is in sync with the state. (has to use other libraries like for features like routing, HTTP services - axios, forms)

What is difference between React and Angular?

React: - Only the view of MVC - Serer-side rendering - Uses virtual DOM - One-way data binding - Compile time debugging - Made by Facebook Angular: - Complete MVC - Client-side rendering - Uses real DOM - Two-way data binding - Runtime debugging - Made by Google

What is the difference between Real DOM and Virtual DOM?

Real DOM: - It updates slowly - Can directly update HTML - Creates a new DOM if element updates. - DOM manipulation is very expensive - Too much memory wastage. Virtual DOM: - It updates faster - Can't directly update HTML - Updates the JSX if element updates (not create new DOM) - DOM manipulation is very easy. - No memory wastage.

What is Redux Thunk?

Redux Thunk is a middleware that allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. The inner function receives the store methods dispatch() and getState() as parameters.

What is refs in React?

Refs is shorthand for References in React. It is an attribute which helps to store a reference to a particular React element or component, which will be returned by the components render configuration function. It is used to return references to a particular element or component returned by render(). They come in handy when we need DOM measurements or to add methods to the component. Usecases: - When you need to manage focus, select text or media playback. - To trigger imperative animations - Integrate with third-party DOM libraries

Why write Tests?

Reliability: ensure code is working as intended Refactorability: Ensure code will continue to work after someone changes it. Documentation: Documents what the code actually does. Accuracy: Certainty of behavor. Checking for odd edge cases (0, negative numbers, null values, etc)

What is Babel?

Responsible for transpiling ES6 code to ES5 code.

What are the main components we import from React-Router-Dom?

Router: the Router component should be the parent component of an application because when the URL changes, the Router component's state will update, which initiates a render; therefore, when the route changes, all parts of an application should be given a change to update. Route: Path + Component. if the path starts with /somePath, then the SomeComponent will render, if we want an exact matching of the path, then we add the exact prop to the Route component. Link: coupled with the Route, when a user clicks on the Link to somePath, the URL bar will change to /somePath, which will then cause the SomeComponent to render.

What is Schema?

Schema describes your databases - how the tables present and how they relate to each other, as well as the columns on those tables and their constraints.

What is Scope?

Scope describes a lexical environment and answers the question, who has access to what. Scope determines the accessibility of variables and values in a specific section of code during runtime. Scopes are in hierarchy, so child scope have access to parent scopes, but not vice versa.

What are Pure Components?

Simplest and fastest components which can be written. They can replace any component which only has a render(). These components enhances the simplicity of the code and performance of application.

What is HTML?

Stands for "Hypertext Markup Language" and is the standard markup language for creating websites. It consists of series of elements represented by tags, and these describes the basic structure of a webpage (skeleton)

What is AJAX?

Stands for Asynchronous JavaScript and XML(JSON). AJAX is the method of sending background HTTP requests with JavaScript (it's a concept) idea that we are sending these requests. Uses a combination of existing technologies like JavaScript, CSS, and XML, allows for information updates without page refresh, allows for a more responsive user experience.

What is CSS?

Stands for Cascading Style Sheets and describes how HTML elements should be displayed on screen.

What is JSX?

Stands for JavaScript XML. This is a type of file used by React which utilizes the expressiveness of JavaScript along with HTML like template syntax. This makes the HTML file really easy to understand. This file makes applications robust and boosts its performance.

What is ORM?

Stands for Object Relational Mapping and acts as a bridge between your code and the relational database management system. Using an ORM, data can be easily stored and retrieved from a database without writing SQL statements directly. ORM convert data using object-oriented programming language. This creates a "virtual object database" that can be used from within the programming language." Sequelize is an ORM for PostgreSQL, can access SQL database from Node.js. (uses JS objects and methods instead of SQL statements). Represents tables as classes (models) and rows as objects (instances)

What is a state in React?

States are the hear of React components. States are the source of data and must be kept as single as possible. Basically, states are the objects which determine components rendering and behavior. They are mutable unlike the props and create dynamic interactive components. They are accessed vis this.state() or useState hooks.

What should I test for?

Test for core features of the application. Test for behavior, not implementation. Given set of inputs, do you get your desired output? Example: - Does my sorting function returns a sorted array? - Does my route respond with 404 to this request? - Does my react component show this message? - Does my get request respond with requested data?

What is a Promise?

The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value. This is similar to sandwich counter. When you order your sandwich, they give you a ticket. Once the sandwich is ready, your number is called out. This lets asynchronous methods return values like synchronous methods: instead of immediately returning the final value, the asynchronous method returns a promise to supply the value at some point in the future A promise is an object that may produce a single value some time in the future When promise is fulfilled can attach callbacks to handle the fulfilled value or the reason for rejection Promises are portable values that can be passed to where they are needed. Callbacks invert this, the thing that needs the value must be passed to where the value is.

What are the main principles of Object-Oriented Programming?

The four principles of object-oriented programming are encapsulation, abstraction, inheritance, and polymorphism. Abstraction : hides everything but the relevant pieces/data about an object. If we reveal all information , it can be unsafe and/or increase complexity. Using cellphone (mechanism is complex, but only have to press buttons to get it to work). Implementation changes — for example, a software update — rarely affect the abstraction you use. Encapsulation : Way to implement Abstraction. idea that we bundle data and methods together that work on that data. Information hiding: we want to keep data/properties invisible to outside objects to prevent data tampering. Coca Cola's secret formula: you can have access to the drink but you cannot see the formula. Inheritance: Idea that we can create classes (child) from other classes (parent) to create a hierarchy of classes that share a set of properties and methods. The child class reuses all fields and methods of the parent class (common part) and can implement its own (unique part). This way, each class adds only what is necessary for it while reusing common logic with the parent classes. Ex. coffee makers should be able to make coffee, but we can have multiple types of coffee makers all with potentially different features. Polymorphism: allows code to be reusedthe ability of an object to take on many forms. Ex. A general chess piece can take on many forms: Queen, King, Bishop, Knight, Pawn, Rook

When to use "next" parameter in Express routes?

The next parameter is a function in which when invoked, it executes the middleware after the current middleware. If the current middleware function doesn't end the request-response cycle by sending a response, it must call next() to pass the request to the next middleware function. Otherwise , the request is left hanging.

Why is switch keyword used in React Router?

The switch keyword is used when you want to display only a single route to be rendered amongst the several defined routes. The switch tag matches the typed URL with the defined routes in sequential order. When the first match is found, it renders the specified route. Thereby bypassing the remaining routes.

What is action?

The way to make request to the store to make change to the state of your application. It is just an object with a type property. It may also have additional properties that are necessary for describing the desired changes to the store's state. Action objects are created using Action creator function

How to CRUD model instances using Sequelize?

There are builtin methods we can use: - Create: Model.create() - Read : Model.findById() or Model.findAll() - Update : Model.update() or instance.save() - Delete : Model.delete() or instance.delete()

What are the different phases of React Component lifecycle?

Three phases: 1. Initial Rendering Phase: This is the phase when the component is about to start its life journey and make its way to the DOM 2. Updating Phase: Once the component gets added to the DOM, it can potentially update and re-render only when a prop or state change occurs. That happens only in this phase. 3. Unmounting Phase: This is the final phase of a component's life cycle in which the component is destroyed and removed from the DOM.

How are URL parameters handled in Express routes?

URL parameters are accessible in the params property of the request object (req.params). If the Express route is "/puppies/:id", Express will interpret the colon as a wildcard and attach whatever is after '/puppies/:id' to req.params.

How can we pass additional props to component rendered by the Route?

Use render: <Route path="/puppies' component={Puppies} /> vs. <Route path="/puppies' render={(routeProps) => <Puppies {...routeProps} />} /> the routeProps in the above example are match, history, and location; if we do not need those props in the rendered component, we can omit them.

What happens when an action is dispatched?

When action is dispatched, it is passed along with the current state object to the reducer. The reducer determines and returns the new sate, which is replaced within the store. At this point, any callbacks that have been registered with store.subscribe are run.

What is Closure?

Whenever you declare a new function and assign it to a variable, you store the function definition, as well as a closure. The closure contains all the variables that are in scope at the time of creation of the function. It is analogous to a backpack. A function definition comes with a little backpack. And in its pack it stores all the variables that were in scope at the time that the function definition was created.

What is difference between app.use and app.get in Express?

app.get is only used for GET request and the route must exactly match the URL in the request in order for the code to execute. app.use handles all verbs (GET, POST, PUT, DELETE) and the URL specified in the route must start with the URL in the request in order for the code in the route to execute. app.use is commonly used in logging/error handling routes (goes though here before finding the app.get/app.post etc)

What are Higher Order Components

function that takes a component and returns a new component. We call them pure components because they can accept any dynamically provided child component but they won't modify or copy any behavior from their input component.