10 Important JavaScript Questions and Answers

Here we will discuss another 10 important JavaScript interview questions.

Here are more interview questions and answers:

Javascript Interview Q/A: Part-1

Javascript Interview Q/A: Part-2

Now let’s move to our today’s discussion.

1. Why fragments are better than container divs?

Answer:

i) Fragments are a bit faster and use less memory by not creating an extra DOM node. This only has a real benefit on very large and deep trees.

ii) Some CSS mechanisms like Flexbox and CSS Grid have a special parent-child relationships, and adding divs in the middle makes it hard to keep the desired layout.

iii) The DOM Inspector is less cluttered.

2. What are React Mixins?

Answer:

Mixins are a way to totally separate components to have a common functionality. Mixins should not be used and can be replaced with higher-order components or decorators.

One of the most commonly used mixins is PureRenderMixin. You might be using it in some components to prevent unnecessary re-renders when the props and state are shallowly equal to the previous props and state:

const PureRenderMixin = require(‘react-addons-pure-render-mixin’)
const Button = React.createClass({
mixins: [PureRenderMixin],
// …
})

3. What is the difference between React and ReactDOM?

Answer:

1. The react package contains React.createElement(), React.Component, React.Children, and other helpers related to elements and component classes. You can think of these as the isomorphic or universal helpers that you need to build components. The react-dom package contains ReactDOM.render(), and in react-dom/server we have server-side rendering support with ReactDOMServer.renderToString() and ReactDOMServer.renderToStaticMarkup().

4. Why you get “Router may have only one child element” warning?

Answer:

You have to wrap your Route’s in a <Switch> block because <Switch> is unique in that it renders a route exclusively.

Then define the routes within <Switch> block:

<Router>
<Switch>
<Route {/* ... */} />
<Route {/* ... */} />
</Switch>
</Router>

5. What is the difference between constructor and getInitialState?

Answer:

You should initialize state in the constructor when using ES6 classes, and getInitialState() method when using React.createClass().

6. What is the difference between super() and super(props) in React using ES6 classes?

Answer:

When you want to access this.props in constructor() then you should pass props to super() method.

Using super(props):

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    console.log(this.props) // { name: 'John', ... }
  }
}

Using super():

class MyComponent extends React.Component {
  constructor(props) {
    super()
    console.log(this.props) // undefined
  }
}

7. Is it possible to use async/await in plain React?

Answer:

If you want to use async/await in React, you will need Babel and transform-async-to-generator plugin. React Native ships with Babel and a set of transforms.

8. What is React Intl?

Answer:

The React Intl library makes internalization in React straightforward, with off-the-shelf components and an API that can handle everything from formatting strings, dates, and numbers, to pluralization. React Intl is part of FormatJS which provides bindings to React via its components and API.

9. What are the main features of React Intl?

Answer:

1. Display numbers with separators.
2. Display dates and times correctly.
3. Display dates relative to “now”.
4. Pluralize labels in strings.
5. Support for 150+ languages.
6. Runs in the browser and Node.
7. Built on standards.

10.What is Jest?

Answer:

Jest is a JavaScript unit testing framework created by Facebook based on Jasmine and provides automated mock creation and a jsdom environment. It's often used for testing components.

Advantages of Jest over Jasmine:

There are couple of advantages compared to Jasmine:

• Automatically finds tests to execute in your source code.
• Automatically mocks dependencies when running your tests.
• Allows you to test asynchronous code synchronously.
• Runs your tests with a fake DOM implementation (via jsdom) so that your tests can be run on the command line.
• Runs tests in parallel processes so that they finish sooner.

Example of Jest :

Let’s write a test for a function that adds two numbers in sum.js file:

const sum = (a, b) => a + b
export default sum

Create a file named sum.test.js which contains actual test:

import sum from './sum'
test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3)
})

And then add the following section to your package.json:

{
  "scripts": {
    "test": "jest"
  }
}

Finally, run yarn test or npm test and Jest will print a result:

$ yarn test
PASS ./sum.test.js
✓ adds 1 + 2 to equal 3 (2ms)

Thanks for your time.That’s all for now.

#Stay_Home

#Stay_Safe😢😢