Interview Questions

Javascript

1. What are the different ways of creating an object in javascript?

Ways of creating objects in javascript

2. What is Namespaces in javascript?

JavaScript Namespace

3. What is Prototypes in javascript?

4. Explain bind, call and apply in javascript?

5. What is Event Bubbling and Event Capturing in javascript and How to prevent it?

6. What is Closure in javascript and How it is useful?

7. What is splice and slice in javascript?

8. What is map, filter and reduce in javascript?

9. Difference between the setInterval and setTimeout in javascript?

setTimeout and setInterval in javascript

10. What is callback hell in javascript and How can it be avoided?

Callback hell and How to avoid it

11. What is the typeof string, object and array in javascript?

// String
let name = "John";
typeof name; // "string"

// Object
let myObj = { name: "Jane" };
typeof myObj; // "object"

// Array
let myArr = [1, 2, 3];
typeof myArr; // "object"

12. What is hoisting in javascript?

Hoisting in Javascript

13. List some the features of ES6

ES6 features

14. What's the difference between var, let and const in javascript?

var declarations are globally scoped or function scoped while let and const are block scoped.
var variables can be updated and re-declared within its scope; let variables can be updated but not re-declared; const variables can neither be updated nor re-declared.
They are all hoisted to the top of their scope but while var variables are initialized with undefined, let and const variables are not initialized.
While var and let can be declared without being initialized, const must be initialized during declaration.

15. List some the uses of spread operator.

6 Great Uses of the Spread Operator

16. What's the difference between forEach and Map?

forEach: This iterates over a list and applies some operation with side effects to each list member.
map: This iterates over a list, transforms each member of that list, and returns another list of the same size with the transformed members (example: transforming list of strings to uppercase). It does not mutate the array on which it is called (although if passed a callback function, it may do so).
forEach and map

17. AJAX: What is AJAX?

AJAX - MDN Docs

18. jQuery: List the different types of jQuery selectors?

19. jQuery: Explain find and filter methods in jQuery?

Javascript Coding Questions:

1. Assume two variables a and b having an object with the different firstName values. Add another property to both the object lastName with the value of Doe in a single line of code.

var a = { firstName: "John" };
var b = { firstName: "Jane" };

// Solution
a["lastName"] = b["lastName"] = "Doe";

2. What would be the output of following code?

console.log(10 + true); // 11
console.log(-"24" + 10); // -14
console.log("34" + 14); // 3414

3. What would be the output of following code?

var a = "Hello";
var b = new String("Hello");

console.log(a == b); // true
console.log(a === b); // false

4. Write a program to find whether the given string in a palindrome or not (with and without built-in javascript string methods).

// With built-in string methods
function isPalindrome(str) {
  // remove special characters, spaces and make lowercase
  let removeChar = str.replace(/[^A-Z0-9]/gi, "").toLowerCase();

  // reverse removeChar for comparison
  let checkPalindrome = removeChar.split("").reverse().join("");

  // Check to see if str is a Palindrome
  return removeChar === checkPalindrome;
}

// Without build-in string methods
function isPalindrome(str) {
  const len = Math.floor(str.length / 2);
  for (let i = 0; i < len; i++) {
    if (str[i] !== str[str.length - i - 1]) return false;
  }
  return true;
}

5. Write a program to find factorial of a given number (also handle 0!).

function findFactorial(num) {
  if (num < 0) {
    return -1;
  } else if (num === 0) {
    return 1;
  } else {
    return num * findFactorial(num - 1);
  }
}

6. Find a maximum number present in a given array using Math.max() built-in method in both ES5 and ES6.

var arr = [3, 4, 1, 5, 7, 6, 2];

// ES5
Math.max.apply(null, arr);

// ES6
Math.max(...arr);

7. Display an alert saying 'Before' before the page is loaded and another alert saying 'After' after the page has loaded using JavaScript.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script>
      // when page is loading
      if (document.readyState === "loading") {
        alert("Before");
      }

      // when page has loaded
      window.onload = function () {
        alert("After");
      };
    </script>
  </head>
  <body>
    <h1>Hello</h1>
  </body>
</html>

8. Write a program to sort numeric values in an array using javascript build-in method sort.

let numArray = [23, 1, 45, 9];

// The default sort order is according to string Unicode code points.
numArray.sort(); // output: [1, 23, 45, 9]

// To sort numerically just add a new method which handles numeric sorts
// For ascending sort
numArray.sort((a, b) => a - b); // output: [1, 9, 23, 45]

// For descending sort
numArray.sort((a, b) => b - a); // output: [45, 23, 9, 1]

9. Assume there are 5 methods which gets the different data. How to call all the 5 methods simultaneously using JavaScript.

// Using Promise

let p1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, "one");
});

let p2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 2000, "two");
});

let p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 3000, "three");
});

let p4 = new Promise((resolve, reject) => {
  setTimeout(resolve, 4000, "four");
});

let p5 = new Promise((resolve, reject) => {
  setTimeout(resolve, 5000, "five");
});

Promise.all([p1, p2, p3, p4, p5])
  .then((values) => {
    console.log(values);
  })
  .catch((reason) => {
    console.log(reason);
  });

10. Write a program (javascript) to check if the given date of birth falls under leap year or not.

function isLeapYear(date) {
  let d = new Date(date);
  let year = d.getFullYear();

  if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
    console.log("Leap Year");
  } else {
    console.log("Not a Leap Year");
  }
}

11. Given an object (person), Assign the value of name property to a new variable (myName) using ES6 destructuring.

let person = {
  name: "John",
  age: 26,
};

let { name: myName } = person;
console.log("myName", myName);

React.js

1. What is React.js?

React js is javascript based UI Library developed at Facebook, to create an interactive, stateful & reusable UI components.
Its developed by Facebook in 2011.
It follows the component based approach which helps in building reusable UI components.
It is used for developing complex and interactive web and mobile UI.

2. What is Virtual DOM in react? or How does react works internally?

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.

Whenever any underlying data changes, the entire UI is re-rendered in Virtual DOM representation.
Then the difference between the previous DOM representation and the new one is calculated.
Once the calculations are done, the real DOM will be updated with only the things that have actually changed.

How virtual dom and diffing works in react

3. Difference between React.js and other JS frameworks such as Angular or Vue.js.

Comparison between React and Angular
Angular VS React VS Vue
Angular – developed by Google, angular is a typescript based JavaScript application framework. It is also known as Super-heroic JavaScript MVW Framework. It was developed with the motive to encounter the challenges of creating single page applications. There are several versions of angular such as Angular 2+, Angular 2 or ng2. Angular is the rewritten, mostly incompatible successor to AngularJS which means AngularJS is the oldest framework.
React – React was developed by Facebook in March 2013. It is a JavaScript library that is used for building user interfaces. React creates large web applications and also provides speed, scalability, and simplicity.
Vue – Launched in February 2014, Vue is the most famous and rapidly growing framework in JS field. Vue is an intuitive, fast and composable MVVM for building interactive interfaces. It is extremely adaptable and several JavaScript libraries make use of this. Vue is also a web application framework that helps in making advanced single page applications.

4. What is the main advantage of using React.js when compared to the other JS frameworks such as Angular or Vue.js? or Why React.js is better than Angular or Vue.js?

Major features of React are listed below:

It uses the virtual DOM instead of the real DOM.
It uses server-side rendering.
It follows uni-directional data flow or data binding.

5. Differentiate between Real DOM and Virtual DOM.

Real DOM	Virtual DOM
1. It updates slow.	1. It updates faster.
2. Can directly update HTML.	2. Can’t directly update HTML.
3. Creates a new DOM if element updates.	3. Updates the JSX if element updates.
4. DOM manipulation is very expensive.	4. DOM manipulation is very easy.
5. Too much of memory wastage.	5. No memory wastage.

Understanding reacts virtual dom vs the real dom

6. Difference between state and props in react? or What is state and props in react.

State and Props in React

7. What is Higher Order Components (HOC) in react?

8. What are the advantages of React.js?

Advantages of React.js

React.js is extremely efficient: React.js creates its own virtual DOM where your components actually live. This approach gives you enormous flexibility and amazing gain in performance. React.js also calculates what are the changes needed to be made in DOM. This process of React.js avoids expensive DOM operations and make updates in a very client manner.
It makes writing Javascript easier: React.js uses a special syntax called JSX, which allows you to mix HTML with Javascript. The user can drop a bit of HTML in the render function without having to concatenate strings, this is another fantastic thing. React.js turns those bits of HTML into functions with a special JSXTransformer.
It gives you out-of-the-box developer tools: When you start your journey with React.js, do not forget to install official React.js chrome extension. It makes debugging your application much easier. After you install the extension, you will have a direct look into the virtual DOM as if you were browsing a regular DOM tree in the elements panel. Isn’t it pretty amazing!
It’s awesome for SEO: One of the biggest problems with other Javascript frameworks is that they do not search engine friendly. Though there have been some improvements in this area, search engines generally have trouble reading Javascript heavy applications. React.js stands out from the crowd because you can run React.js on the server, and the virtual DOM will be rendered to the browser as a regular web page.
UI Test Cases: It is extremely easy to write UI test cases because the virtual DOM system implemented entirely in JS.

9. How do you create/define a component in react?

React Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name} </h1>;
  }
}

const element = <Welcome name="John" />;
ReactDOM.render(element, document.getElementById("root"));

10. What is the purpose of render() method in react?

render() method is used to update the UI. For this, you have to create a new element and send it to ReactDOM.render(). React elements are immutable and once you create an element, you cannot change its attributes. Thus, elements are like a single frame and it depicts the UI at some point. ReactDOM.render() controls the content of the container node you pass and if there is any DOM element already present in it then it would be replaced when first called.

11. How can we pass the props to a component in react?

Props are shorthand for properties.they are very similar to an argument is passed to a pure javascript function. Props of the component are passed from parent component which invokes component. During a component’s life cycle props should not change consider them as immutable. In React all props can be accessible with this.props.

import React from "react";
class Welcome extends React.Component {
  render() {
    return <h1>Hello {this.props.name}</h1>;
  }
}

12. What is Pure functions/components in react?

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

Stateless Component vs Pure Component

13. What are the life cycle methods in react?

There are three different phases of React component’s lifecycle:

Initial Rendering Phase or Mounting Phase: This is the phase when the component is about to start its life journey and make its way to the DOM.
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.
Unmounting Phase: This is the final phase of a component’s life cycle in which the component is destroyed and removed from the DOM.

Some of the most important lifecycle methods are:

componentWillMount() – Executed just before rendering takes place both on the client as well as server-side.
componentDidMount() – Executed on the client side only after the first render.
componentWillReceiveProps() – Invoked as soon as the props are received from the parent class and before another render is called.
shouldComponentUpdate() – Returns true or false value based on certain conditions. If you want your component to update, return true else return false. By default, it returns false.
componentWillUpdate() – Called just before rendering takes place in the DOM.
componentDidUpdate() – Called immediately after rendering takes place.
componentWillUnmount() – Called after the component is unmounted from the DOM. It is used to clear up the memory spaces.

14. For calling API's, which life cycle method of React.js should we use and why?

The API calls should be made in componentDidMount method always.
This method is executed once in a lifecycle of a component and after the first render.
After a component is mounted, this method would be invoked. This is the right place to load any data from endpoint or set up any subscription.
Calling here setState will trigger re-render.

15. What is JSX in react?

JSX is an XML/HTML-like syntax used by React that extends ECMAScript so that XML/HTML-like text can co-exist with JavaScript/React code. The syntax is intended to be used by preprocessors (i.e., transpilers like Babel) to transform HTML-like text found in JavaScript files into standard JavaScript objects that a JavaScript engine will parse.
Basically, by using JSX you can write concise HTML/XML-like structures (e.g., DOM like tree structures) in the same file as you write JavaScript code, then Babel will transform these expressions into actual JavaScript code. Unlike the past, instead of putting JavaScript into HTML, JSX allows us to put HTML into JavaScript.

16. What is stateful and stateless component in react?

Stateful Component	Stateless Component
1. Stores info about component’s state change in memory	1. Calculates the internal state of the components
2. Have authority to change state	2. Do not have the authority to change state
3. Contains the knowledge of past, current and possible future changes in state	3. Contains no knowledge of past, current and possible future state changes
4. Stateless components notify them about the requirement of the state change, then they send down the props to them.	4. They receive the props from the Stateful components and treat them as callback functions.

Stateless components are components that don’t have any state. When something is stateless, it calculates its internal state but it never directly mutates it.

17. What do you mean by React.Component and React.PureComponent syntax in react and when are they used?

When to use Component or PureComponent

18. What is the purpose of super() method in react?

super() method is used in constructor to call the parent object methods.

19. Whether setState() call in react is an asynchronous or synchronous?

setState() call in react is asynchronous in nature because React may batch multiple setState() calls into a single update for performance.

20. Explain Context API in react?

Context API - React Docs

21. What are refs in React? and When to use it.

In React ref is used to store the reference of element or component returned by the component render() configuration function.Refs should be avoided in most cases, however, they can be useful when we need DOM measurements or to add methods to the components.

Refs can be used in the following cases

Managing focus, text selection, or media playback.
Triggering imperative animations.
Integrating with third-party DOM libraries.

22. What is Controlled and Uncontrolled Components in react?

23. What is Functional and Class Components in react?

Functional and Class Component

24. How to pass data from parent to child components and vice verse in react?

Passing data between React Component

25. MVC: Explain MVC design pattern?

MVC design pattern

26. Redux: What is Redux?

Redux

27. Explain any state management architecture (Flux, Redux or MobX)?

28. Explain React Hooks and what's the use of useEffect and useMemo hooks?

React Hooks

29. What happen if we call setState method inside render function?

render() calling setState() here makes your component a contender for producing infinite loops. render should always remain pure. It's a very bad practice to do side-effecty things in there, and calling setState is a big red flag.

30. What is Error Boundary in react?

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.
Error Boundary

React.js Coding Questions:

1. What will be the output of console.log(this.state.data) in the following code?

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      data: 10,
    };
  }

  componentDidMount() {
    this.setState({
      data: 20,
    });
    console.log(this.state.data); // What's the output here
  }

  render() {
    const { data } = this.state;
    return (
      <div className="App">
        <h1>Number is {data}</h1>
      </div>
    );
  }
}

Solution: As the this.setState is an asynchronous call. So the output at this stage will be 10 (i.e. Previous state value).

2. Build a clone of google's search page (https://www.google.com/) using react.

Node.js

1. How process.nextTick() works in Node.js?

How process.nexttick() works in node.js

2. What is Event loop in Node.js?

3. Explain any caching technologies/techniques?

4. What is Streams in Node.js?

Node.js Streams: Everything you need to know

5. How to handle API errors in Node.js?

6. What is module.export in Node.js?

How to use module.exports in Node.js

7. Sequelize: How to use Sequelize (NPM package) for Database operation?

Sequelize Docs

8. Sequelize: List some the methods in Sequelize?

Sequelize Methods

9. Express.js: How to use custom module in Express.js?

Getting started with Node.js modules: require, exports, imports and beyond

10. Whats the difference between Asynchronous programming & Parallel programming?

HTML

1. List any 5 new HTML5 tags?

HTML5 Tags

2. List any 5 input types in HTML5?

Input types in HTML5

3. List some of the HTML5 API's?

HTML5 API

4. Explain GeoLocation, LocalStorage and SessionStorage HTML5 API's?

5. Difference between localStorage and sessionStorage?

LocalStorage:

Stores data with no expiration date, and gets cleared only through JavaScript, or clearing the Browser cache / Locally Stored Data
Storage limit is the maximum amongst the three

SessionStorage:

The sessionStorage object stores data only for a session, meaning that the data is stored until the browser (or tab) is closed.
Data is never transferred to the server.
Storage limit is larger than a cookie (at least 5MB).

Cookie:

Stores data that has to be sent back to the server with subsequent requests. Its expiration varies based on the type and the expiration duration can be set from either server-side or client-side (normally from server-side).
Cookies are primarily for server-side reading (can also be read on client-side), localStorage and sessionStorage can only be read on client-side.
Size must be less than 4KB.
Cookies can be made secure by setting the httpOnly flag as true for that cookie. This prevents client-side access to that cookie

6. What is the maximum data (size) that we can store in localStorage?

It depends on the browser, different browser has different storage limit.
In Chrome and IE, We can store upto 10MB (10MB seperate for localStorage and sessionStorage).
In Firefox, We can store upto 10MB (Combining both localStorage and sessionStorage).

Read More on this here Working with quota on mobile browsers

7. Can string, number, object and array be stored in localStorage and sessionStorage?

Yes, We can store strings, number, object and array in localStorage and sessionStorage.

CSS

1. What is specificity rule in CSS?

CSS Specificity Rule

2. List some of the CSS selector?

3. What is flex in CSS?

4. How can we define variables in CSS?

5. What is the difference between display:none and visibility:hidden properties in CSS?

Stack Overflow

6. How to make a HTML page responsive without using media query or any CSS libraries?

7. List the different types of positions in CSS?

CSS position Property

8. In how many ways can a CSS be integrated as a web page and which type of CSS integration/styling method is preferred?

CSS can be integrated in three ways:

Inline: term is used when the CSS code have attribute of HTML elements.

<p style="color:skyblue;">hello world!</p>

External: separate CSS file is created in the workspace and later linking them in every web page that is created. This is the preferred method to style an application.

<head>
  <link rel="text/css" href="your_CSS_file_location" />
</head>

Internal: the head element of the web page has internal CSS implemented in it.

<head>
  <style>
    p {
      color: lime;
      background-color: black;
    }
  </style>
</head>

CSS Styles

9. Based on the specificity rule, In what order will the styles types are applied to a HTML?

Based on the specificity rule, Style types are applied in this order:

Inline style
Internal style
External style

CSS Styles

10. What is grid/grid layout in CSS?

CSS Grid

CSS Coding Questions:

1. What will be the background color of the div?

<div id="myDiv" class="myClass">TEXT</div>

#myDiv {
  background-color: red;
}

.myClass {
  background-color: green;
}

2. Write CSS to change the font color of 3rd, 7th and 8th li element to red.

<ul>
  <li>TEXT1</li>
  <li>TEXT2</li>
  <li>TEXT3</li>
  <li>TEXT4</li>
  <li>TEXT5</li>
  <li>TEXT6</li>
  <li>TEXT7</li>
  <li>TEXT8</li>
  <li>TEXT9</li>
  <li>TEXT10</li>
</ul>

li:nth-child(3) {
  color: red;
}

li:nth-child(7) {
  color: red;
}

li:nth-child(8) {
  color: red;
}

3. Write CSS to change the background color of alternative rows of the table to grey.

table > tr:nth-child(2n) {
  background-color: grey;
}

4. What will be the position of second div when the position relative or absolute is applied to it.

<div class="myDiv myClass1"></div>
<div class="myDiv myClass2"></div>
<div class="myDiv myClass3"></div>
<div class="myDiv myClass4"></div>

.myDiv {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  display: inline-block;
}

.myClass1 {
  background-color: red;
}

.myClass2 {
  top: 20px;
  left: 20px;
  position: relative; /* or absolute */
  background-color: green;
}

.myClass3 {
  background-color: yellow;
}

.myClass4 {
  background-color: blue;
}

Solution:

Name		Name	Last commit message	Last commit date
Images		Images
.gitignore		.gitignore
README.md		README.md

Navigation Menu

Repository files navigation

Interview Questions

Table of Contents

Javascript

Javascript Coding Questions:

React.js

React.js Coding Questions:

Node.js

HTML

CSS

CSS Coding Questions:

About

Releases

Packages

Contributors

Latest commit

History

Folders and files

Repository files navigation

Interview Questions

Table of Contents

Javascript

Javascript Coding Questions:

React.js

React.js Coding Questions:

Node.js

HTML

CSS

CSS Coding Questions:

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors