Mock Interview Q & A
Summary of Milestone 3 (Day 7)
Today we’ve practiced a mock interview, by using the previous preparation & knowledge of JavaScript and our journey of the Milestone 3.
1. How does z-index works in CSS?
Answer:
The z-index helps specify the stack order of positioned elements that may overlap one another. The z-index default value is zero and can take on either a positive or negative number.
An element with a higher z-index is always stacked above than a lower index.
Z-Index can take the following values:
- Auto: Sets the stack order equal to its parents.
- Number: Orders the stack order.
- Initial: Sets this property to its default value (0).
- Inherit: Inherits this property from its parent element.
2. What is CSS flexbox? Write all the properties of the flexbox.
Answer:
It allows us to design a flexible responsive layout structure without using any float or positioning property of CSS. To use CSS flexbox we need to define a flex container initially.
Flexbox Properties:
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
3. What are the different ways to get an element from DOM?
Answer:
We can retrieve DOM elements by using the followings:
1. document.getElementById or just id
2. getElementsByTagName, getElementsByClassName
3. querySelectorAll
4. What are the differences between undefined and null?
Answer:
undefined means a variable has been declared but has not yet been assigned a value. On the other hand, null is an assignment value.
Get Rahul Biswas’s stories in your inbox
Join Medium for free to get updates from this writer.
undefined and null are two distinct types: undefined is a type itself (undefined) while null is an object.
5. What’s Event Bubbling?
Answer:
When an event happens on an element, the respective handler is run and is bubbled on to the parent element, the parent element handles the event and the event is bubbled on to its ancestors (except when the bubbling is stopped).
6. What is JSX?
Answer:
JSX is a XML-like syntax extension to ECMAScript (the acronym stands for JavaScript XML). Basically it just provides syntactic sugar for the React.createElement() function, giving us expressiveness of JavaScript along with HTML like template syntax.
In the example below text inside <h1> tag return as JavaScript function to the render function.
class App extends React.Component {
render() {
return(
<div>
<h1>{'Welcome to React world!'}</h1>
</div>
)
}
}7. What is Scope?
Answer:
8. What are Closure?
Answer:
One of the powerful default behavior of JavaScript, which is interesting but confusing at the same time.
It’s known to us that in JS a child function can access all the function variables, objects, etc. from the parent class. But it is more interesting that even if the parent function is returned, the child function can still access the function variables, object, etc. from the parent class. Because the function properties are stored in memory. This feature is known as Closure in JavaScript.
Example:
function closuresDemo() {
var x = 10;
return function() {
var y = 20;
console.log(‘Sum: ‘ + (x + y));
}
}
9. What is context?
Answer:
Context provides a way to pass data through the component tree without having to pass props down manually at every level. For example, authenticated user, locale preference, UI theme need to be accessed in the application by many components.
Example:
const {Provider, Consumer} = React.createContext(defaultValue)
10. How to fetch data with React Hooks?
Answer:
The useEffect hook is used to fetch the data from the API and to set the data in the local state of the component with the state hook’s update function.
Let's take an example in which it fetches list of react articles from the API
import React, { useState, useEffect } from 'react';
import axios from 'axios';function App() {
const [data, setData] = useState({ hits: [] }); useEffect(async () => {
const result = await axios(
'http://hn.algolia.com/api/v1/search?query=react',
); setData(result.data);
}, []); return (
<ul>
{data.hits.map(item => (
<li key={item.objectID}>
<a href={item.url}>{item.title}</a>
</li>
))}
</ul>
);
}export default App;
