Stories by Iqbal Mahmud on Medium

10 BASIC INTERVIEW QUESTIONS -- FLUID DESIGN AND VUE JS

Iqbal Mahmud — Sat, 30 May 2020 14:50:39 GMT

10 BASIC INTERVIEW QUESTIONS -- FLUID DESIGN AND VUE JS

What is Fluid Design

Fluid Design means that different sections of the site are defined relatively (eg, an element is 50% of the page width). No matter what browser you’re using: Smartphone, Tablet, Desktop, the site will look (mostly) the same and have the same proportions (this element will take up half the screen).

2. Difference Between Fixed And Fluid Layouts

Although most designers and developers would consider defining fixed and fluid website layouts to be elementary, we’ll go over it just to be clear.

FIXED WEBSITE LAYOUTS

A fixed website layout has a wrapper that is a fixed width, and the components inside it have either percentage widths or fixed widths. The important thing is that the container (wrapper) element is set to not move. No matter what screen resolution the visitor has, he or she will see the same width as other visitors.

FLUID WEBSITE LAYOUTS

In a fluid website layout, also referred to as a liquid layout, the majority of the components inside have percentage widths, and thus adjust to the user’s screen resolution.

3. FLUID LAYOUTS

A fluid layout is a type of webpage design in which layout of the page resizes as the window size is changed. This is accomplished by defining areas of the page using percentages instead of fixed pixel widths. Most webpage layouts include one, two, or three columns

4. What is Vue.js?

Vue.js lets you extend HTML with HTML attributes called directives
Vue.js directives offers functionality to HTML applications
Vue.js provides built-in directives and user defined directives

5. Vue.js Directives

Vue.js uses double braces {{ }} as place-holders for data.
Vue.js directives are HTML attributes with the prefix v-

Vue Example

In the example below, a new Vue object is created with new Vue().
The property el: binds the new Vue object to the HTML element with id="app".

6. Virtual DOM

VueJS makes the use of virtual DOM, which is also used by other frameworks such as React, Ember, etc. The changes are not made to the DOM, instead a replica of the DOM is created which is present in the form of JavaScript data structures. Whenever any changes are to be made, they are made to the JavaScript data structures and the latter is compared with the original data structure. The final changes are then updated to the real DOM, which the user will see changing. This is good in terms of optimization, it is less expensive and the changes can be made at a faster rate.

7. VueJS v/s React

Virtual DOM
Virtual DOM is a virtual representation of the DOM tree. With virtual DOM, a JavaScript object is created which is the same as the real DOM. Any time a change needs to be made to the DOM, a new JavaScript object is created and the changes are made. Later, both the JavaScript objects are compared and the final changes are updated in the real DOM.
VueJS and React both use virtual DOM, which makes it faster.
Template v/s JSX
VueJS uses html, js and css separately. It is very easy for a beginner to understand and adopt the VueJS style. The template based approach for VueJS is very easy.
React uses jsx approach. Everything is JavaScript for ReactJS. HTML and CSS are all part of JavaScript.

8. Data Binding

The data binding feature helps manipulate or assign values to HTML attributes, change the style, assign classes with the help of binding directive called v-bind available with VueJS.

9. Vue-CLI

VueJS can be installed at the command line using the vue-cli command line interface. It helps to build and compile the project easily using vue-cli.

10. Advantage of using Vue JS.

advantages of using Vue. JS | the The Progressive JavaScript Framework small. The success of JavaScript framework depends on its size. ...

Easy to Understand. One of the reasons for the popularity of this framework is that it is quite easy to understand. ...

Simple Integration

Flexibility

Two-Way Communication

Great Tooling

Best of both worlds.

10 JavaScript Coding Interview Questions Solve With Code

Iqbal Mahmud — Sat, 16 May 2020 16:39:35 GMT

Q-1: Write a function that would allow you to do this

You can create a closure to keep the value of a even after the inner function is returned. The inner function that is being returned is created within an outer function, making it a closure, and it has access to the variables within the outer function, in this case the variable a.

Q-2: Palindrome

A palindrome is a word, sentence or other type of character sequence which reads the same backward as forward. For example, “racecar” and “Anna” are palindromes. “Table” and “John” aren’t palindromes, because they don’t read the same from left to right and from right to left.

Understanding the challenge

The problem can be stated along the following lines: given a string, return true if the string is a palindrome and false if it isn’t. Include spaces and punctuation in deciding if the string is a palindrome. For example:

palindrome('racecar')  ===  true
palindrome('table')  ===  false

Reasoning about the challenge

This challenge revolves around the idea of reversing a string. If the reversed string is the same as the original input string, then you have a palindrome and your function should return true. Conversely, if the reversed string isn’t the same as the original input string, the latter is not a palindrome and your function is expected to return false.

Solution

Here’s one way you can solve the palindrome challenge:

Next, reverse the input string. You can do so by turning the string into an array using the String’s .split() method, then applying the Array’s .reverse() method and finally turning the reversed array back into a string with the Array’s .join() method. I’ve chained all these methods above so the code looks cleaner.

Q-3: FizzBuzz

This is a super popular coding challenge — the one question I couldn’t possibly leave out. Here’s how you can state the problem.

Understanding the challenge

The FizzBuzz challenge goes something like this. Write a function that does the following:

console logs the numbers from 1 to n, where n is the integer the function takes as its parameter
logs fizz instead of the number for multiples of 3
logs buzz instead of the number for multiples of 5
logs fizzbuzz for numbers that are multiples of both 3 and 5

Example:

fizzBuzz(5)

Result:

// 1
// 2
// fizz
// 4
// buzz

Reasoning about the challenge

One important point about FizzBuzz relates to how you can find multiples of a number in JavaScript. You do this using the modulo or remainder operator, which looks like this: %. This operator returns the remainder after a division between two numbers. A remainder of 0 indicates that the first number is a multiple of the second number:

12 % 5 // 2 -> 12 is not a multiple of 5
12 % 3 // 0 -> 12 is multiple of 3

If you divide 12 by 5, the result is 2 with a remainder of 2. If you divide 12 by 3, the result is 4 with a remainder of 0. In the first example, 12 is not a multiple of 5, while in the second example, 12 is a multiple of 3.

With this information, cracking FizzBuzz is a matter of using the appropriate conditional logic that will lead to printing the expected output.

Solution

Here’s one solution you can try out for the FizzBuzz challenge:

Q-1: Write a “mul” function which will properly when invoked as below syntax.

Here mul function accept the first argument and return anonymous function which take the second parameter and return anonymous function which take the third parameter and return multiplication of arguments which is being passed in successive

In JavaScript function defined inside has access to outer function variable and function is the first class object so it can be returned by function as well and passed as argument in another function.

A function is an instance of the Object type
A function can have properties and has a link back to its constructor method
Function can be stored as variable
Function can be pass as a parameter to another function
Function can be returned from function

Q-5: Implement enqueue and dequeue using only two stacks

Enqueue means to add an element, dequeue to remove an element.

Q-6: Given a string, reverse each word in the sentence

For example Welcome to this Javascript Guide! should be become emocleW ot siht tpircsavaJ !ediuG

Q-7: How to empty an array in JavaScript?

How could we empty the array above?

Method 1

Above code will set the variable arrayList to a new empty array. This is recommended if you don't have references to the original array arrayList anywhere else because It will actually create a new empty array. You should be careful with this way of empty the array, because if you have referenced this array from another variable, then the original reference array will remain unchanged, Only use this way if you have only referenced the array by its original variable arrayList.

Method 2

Above code will clear the existing array by setting its length to 0. This way of empty the array also update all the reference variable which pointing to the original array. This way of empty the array is useful when you want to update all the another reference variable which pointing to arrayList.

Method 3

Above implementation will also work perfectly. This way of empty the array will also update all the references of the original array.

Method 4

Above implementation can also empty the array. But not recommended to use often.

Q-8: How would you use a closure to create a private counter?

You can create a function within an outer function (a closure) that allows you to update a private variable but the variable wouldn’t be accessible from outside the function without the use of a helper function.

Q-9: Write a function that would allow you to do this.

You can create a closure to keep the value passed to the function createBase even after the inner function is returned. The inner function that is being returned is created within an outer function, making it a closure, and it has access to the variables within the outer function, in this case the variable baseNumber.

Q-10: Explain what a callback function is and provide a simple example.

A callback function is a function that is passed to another function as an argument and is executed after some operation has been completed. Below is an example of a simple callback function that logs to the console after some operations have been completed.

10 JavaScript Coding Interview Questions Solve With Code was originally published in The Startup on Medium, where people are continuing the conversation by highlighting and responding to this story.

10 Days of JavaScript HackerRank Problem Solve

Iqbal Mahmud — Fri, 15 May 2020 17:59:29 GMT

Day 0: Data Types

Problem

Function receives an integer, a float, and a string
The function has a constant integer of 4
The function has a constant float of 4.0
The function has a constant string of “HackerRank”
Console log the sum of the constant integer and the integer received
Console log the sum of the constant float by the float received
Console lot the constant string following the string received on one line

Solution

Day 1: Arithmetic Operators

Problem

A length and width are sent to two different functions
getArea must return the area of the shape dimensions sent
getPerimeter must return the perimeter of the shape dimensions sent
Complete the functions

Solution

Solution 2: Optimized

Day 1: Functions

Problem

A integer of value n is provided
1 ≤ n ≤ 10
Output the factorial value of n (n!, 4! = 4 x 3 x 2 x 1 = 24)

Solution

This can be written is a few different ways, but let’s solve it with a for loop by decreasing the value until it reaches 1;

Day 1: Let and Const

Problem

A float value r is provided for the radius
0 < r ≤ 100
Print (console.log) the area of the circle (π x r²)
Print (console.log) the perimeter of the circle (2πr)
Do not overwrite the try and catch but make sure the code still works

Solution

Day 2: Conditional Statements: If-Else

Problem

An integer value score is provided for a students test
0 ≤ score ≤ 30
Given the following legend, return the respective grade

If 25 < score <= 30, then grade = A.
If 20 < score <= 25, then grade = B.
If 15 < score <= 20, then grade = C.
If 10 < score <= 15, then grade = D.
If 5 < score <= 10, then grade = E.
If 0 <= score <= 5, then grade = F.

Solution

Day 2: Conditional Statements: Switch

Problem

A string is provided where its length is 1 ≤ s ≤ 100
Given the following legend, return the correct value based on the first letter

First letter is a, e, i, o, or u = A.
First letter is b, c, d, f, or g = B.
First letter is h, j, k, l, or m = C.
First letter is n, p, q, r, s, t, v, w, x, y, z = D.

Solution

Day 2: Loops

Problem

Given a string of s of any length
Output, in order, the vowels of that string on each new line
Right after, output, in order, the consonants of that string on each new line

// Example
javascriptloops// Output
a
a
i
o
o
j
v
s
c
r
p
t
l
p
s

Solution

Day 3: Arrays

Problem

Receive n length array between 1 ≤ n ≤ 10
0 ≤ nums ≤ 100 as integers
Return the second largest integer of the array

Solution

Day 3: Throw

Problem

n number of values of a sent
1 ≤ n ≤ 5
a number between -100 and 100
a = 0, throw error “Zero Error”
a < 0, throw error “Negative Error”
a > 0, console log “YES”

Solution

Day 3: Try, Catch, and Finally

Problem

Expect a value of s of any type
If it’s a string take it return the reverse
If it’s not a string console log “s.split is not a function”
Console.log the result of reversing or not reversing s

Solution

Day 4: Create a Rectangle Object

Problem

a = length of rectangle
b = width of rectangle
Complete Rectangle function to be instantiated
when length called return a
when width called return b
when perimeter called, return the result
when area called, return the result

Solution

Day 4: Count Objects

Problem

n is the number of values given for x and y
5 ≤ n ≤ 10
x equal a coordinate between 1 and 100
y equal a coordinate between 1 and 100
Return the index where the two coordinates are the same.

Solution

Day 4: Classes

Problem

A class called Polygon is initialized with an array with share sizes
Create a JavaScript class that returns the perimeter of the shape, when .perimeter() is called

Solution

Day 5: Inheritance

Problem

Create a class called Square that extends an existing class of Rectangle
Add functionality to Rectangle to return the shapes area

Solution

Day 5: Template Literals

Problem

A function will receive literals and remaning expressions
Convert the expressing into values a and p
Return an array
Index 1= ((perimeter — Math.sqrt((Math.pow(p, 2) — (16 * area)))) / 4)
Index 0= ((perimeter + Math.sqrt((Math.pow(p, 2) — (16 * area)))) / 4)

Solution

Day 5: Arrow Functions

Problem

an array of n length between 1 and 10 is received
nums is the array with values between 1 and 100
if a value of nums is even multiply it by 2
if a value of nums is odd multiply it by 3
return the modified array

Solution

Day 6: Bitwise Operators

Problem

Given an integer of n between 2 and 1000
Given an integer of k between 2 and n
q is just the number of lines we read from the input
n is the max number of sequential numbers as a non-repeating pattern that can exist

// Example
n = 5// a b
// 1 2
// 1 3
// 1 4
// 1 5
// 2 3
// 2 4
// 2 5
// 3 4
// 3 5
// 4 5

Solution

Day 6: JavaScript Dates

Problem

Receive a string value of dateString
The format is in DD/MM/YYYY (10/11/2009)
Return the name of the day (Sunday, Monday, Tuesday,…) based on the date

Solution

Day 7: Regular Expressions I

Problem

Receive a string of s which is greater than or equal to the length of 3
Write a regular expression that validates the string
The string must be in all lowercase with characters from a-z
The string must start and end with a vowel
Return a boolean of true or false if the string meets the requirements

Solution

Day 7: Regular Expressions II

Problem

Receive a string of s which is greater than or equal to the length of 3
Write a regular expression that validates the string
String starts with either (Mr., Mrs., Ms., Dr., or Er.)
String doesn’t contain any spaces
String contains on the letters a-z or A-Z
Return a boolean of true or false if the string meets the requirements

Solution

Day 7: Regular Expressions III

Problem

Receive a string of s
length of s ≥ 3
s is a string that contains numbers and letters
Write a regular expression that validates the string
The expression must only output integer numbers

// Example 1
// 102, 1948948 and 1.3 and 4.5
102
1948948
1
3
4
5// Example 2
// 1 2 3
1
2
3

Solution

Day 8: Create A Button

Problem

Given index.html, js/button.js, and css/button.css
Create an html button with an id of btn
btn must have the styling of: width 96px, height 48px, font-size 24px
The default innerHTML of button is set to 0
Create the interaction where when the button is clicked its internal value displayed is incremented

// Example
btn = 0// clicked 5 times
btn = 5

Solution

index.html

button.css

button.js

REACT INTERVIEW QUESTIONS.

Iqbal Mahmud — Thu, 14 May 2020 16:12:15 GMT

Q-1: What is the difference between HTML and React event handling?

In HTML, the event name should be in lowercase:

Whereas in React it follows camelCase convention:

In HTML, you can return false to prevent default behavior:

Whereas in React you must call preventDefault() explicitly:

function handleClick(event) {
  event.preventDefault()
  console.log('The link was clicked.')
}

In HTML, you need to invoke the function by appending () Whereas in react you should not append () with the function name. (refer "activateLasers" function in the first point for example)

Q-2: How to bind methods or event handlers in JSX callbacks?

There are 3 possible ways to achieve this:

Binding in Constructor: In JavaScript classes, the methods are not bound by default. The same thing applies for React event handlers defined as class methods. Normally we bind them in constructor.

class Component extends React.Componenet {
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    // ...
  }
}

Public class fields syntax: If you don’t like to use bind approach then public class fields syntax can be used to correctly bind callbacks.

handleClick = () => {
  console.log('this is:', this)
}

Arrow functions in callbacks: You can use arrow functions directly in the callbacks.

Note: If the callback is passed as prop to child components, those components might do an extra re-rendering. In those cases, it is preferred to go with .bind() or public class fields syntax approach considering performance.

Q-3: What are synthetic events in React?

SyntheticEvent is a cross-browser wrapper around the browser's native event. It's API is same as the browser's native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers.

Q-4: What are “key” props and what is the benefit of using them in arrays of elements?

A key is a special string attribute you should include when creating arrays of elements. Keys help React identify which items have changed, are added, or are removed.

Most often we use IDs from our data as keys:

const todoItems = todos.map((todo) =>
  
    {todo.text}
  

)

When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort:

const todoItems = todos.map((todo, index) =>
  
    {todo.text}
  

)

Note:

Q-5: Which is preferred option with in callback refs and findDOMNode()?

It is preferred to use callback refs over findDOMNode() API. Because findDOMNode() prevents certain improvements in React in the future.

The legacy approach of using findDOMNode:

class MyComponent extends Component {
  componentDidMount() {
    findDOMNode(this).scrollIntoView()
  }

  render() {
    return 
  }
}

The recommended approach is:

class MyComponent extends Component {
  constructor(props){
    super(props);
    this.node = createRef();
  }
  componentDidMount() {
    this.node.current.scrollIntoView();
  }

  render() {
    return 
  }
}

Q-6: What are uncontrolled components?

The Uncontrolled Components are the ones that store their own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.

In the below UserProfile component, the name input is accessed using ref.

class UserProfile extends React.Component {
  constructor(props) {
    super(props)
    this.handleSubmit = this.handleSubmit.bind(this)
    this.input = React.createRef()
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.current.value)
    event.preventDefault()
  }

  render() {
    return (
      
        
          {'Name:'}
          
        
        
      

    );
  }
}

In most cases, it’s recommend to use controlled components to implement forms.

Q-7: What are the lifecycle methods of React?

React 16.3+

Before 16.3

Q-8: What is the purpose of using super constructor with props argument?

A child class constructor cannot make use of this reference until super() method has been called. The same applies for ES6 sub-classes as well. The main reason of passing props parameter to super() call is to access this.props in your child constructors.

Passing props:

class MyComponent extends React.Component {
  constructor(props) {
    super(props)

    console.log(this.props) // prints { name: 'John', age: 42 }
  }
}

Not passing props:

class MyComponent extends React.Component {
  constructor(props) {
    super()

    console.log(this.props) // prints undefined

    // but props parameter is still available
    console.log(props) // prints { name: 'John', age: 42 }
  }

  render() {
    // no difference outside constructor
    console.log(this.props) // prints { name: 'John', age: 42 }
  }
}

The above code snippets reveals that this.props is different only within the constructor. It would be the same outside the constructor.

Q-9: What are error boundaries in React v16?

Error boundaries are 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.

A class component becomes an error boundary if it defines a new lifecycle method called componentDidCatch(error, info) or static getDerivedStateFromError() :

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)
    this.state = { hasError: false }
  }

  componentDidCatch(error, info) {
    // You can also log the error to an error reporting service
    logErrorToMyService(error, info)
  }

  static getDerivedStateFromError(error) {
     // Update state so the next render will show the fallback UI.
     return { hasError: true };
   }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return {'Something went wrong.'}

    }
    return this.props.children
  }
}

After that use it as a regular component:

Q-10: What is ReactDOMServer?

The ReactDOMServer object enables you to render components to static markup (typically used on node server). This object is mainly used for server-side rendering (SSR). The following methods can be used in both the server and browser environments:

For example, you generally run a Node-based web server like Express, Hapi, or Koa, and you call renderToString to render your root component to a string, which you then send as response.

// using Express
import { renderToString } from 'react-dom/server'
import MyPage from './MyPage'

app.get('/', (req, res) => {
  res.write('My Page')
  res.write('')
  res.write(renderToString())
  res.write('
')
  res.end()
})

Q-11: What is CRA and its benefits?

The create-react-app CLI tool allows you to quickly create & run React applications with no configuration step.

Let’s create Todo App using CRA:

# Installation
$ npm install -g create-react-app

# Create new project
$ create-react-app todo-app
$ cd todo-app

# Build, test and run
$ npm run build
$ npm run test
$ npm start

It includes everything we need to build a React app:

Q-12: How to re-render the view when the browser is resized?

You can listen to the resize event in componentDidMount() and then update the dimensions (width and height). You should remove the listener in componentWillUnmount() method.

class WindowDimensions extends React.Component {
  constructor(props){
    super(props);
    this.updateDimensions = this.updateDimensions.bind(this);
  }
   
  componentWillMount() {
    this.updateDimensions()
  }

  componentDidMount() {
    window.addEventListener('resize', this.updateDimensions)
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.updateDimensions)
  }

  updateDimensions() {
    this.setState({width: window.innerWidth, height: window.innerHeight})
  }

  render() {
    return {this.state.width} x {this.state.height}
  }
}

Q-13: Is it possible to use React without rendering HTML?

It is possible with latest version (>=16.2). Below are the possible options:

render() {
  return false
}

render() {
  return null
}

render() {
  return []
}

render() {
  return 
}

render() {
  return <>
}

Returning undefined won't work.

Q-13: Why function is preferred over object for setState()?

React may batch multiple setState() calls into a single update for performance. Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state.

This counter example will fail to update as expected:

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
})

The preferred approach is to call setState() with function rather than object. That function will receive the previous state as the first argument, and the props at the time the update is applied as the second argument.

// Correct
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}))

Q-14: How to add Google Analytics for React Router?

Add a listener on the history object to record each page view:

history.listen(function (location) {
  window.ga('set', 'page', location.pathname + location.search)
  window.ga('send', 'pageview', location.pathname + location.search)
})

Q-15: What is the benefit of styles modules?

For example, these styles could be extracted into a separate component:

export const colors = {
  white,
  black,
  blue
}

export const space = [
  0,
  8,
  16,
  32,
  64
]

And then imported individually in other components:

import { space, colors } from './styles'

Q-16: How to make AJAX call and in which component lifecycle methods should I make an AJAX call?

You can use AJAX libraries such as Axios, jQuery AJAX, and the browser built-in fetch. You should fetch data in the componentDidMount() lifecycle method. This is so you can use setState() to update your component when the data is retrieved.

For example, the employees list fetched from API and set local state:

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      employees: [],
      error: null
    }
  }

  componentDidMount() {
    fetch('https://api.example.com/items')
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            employees: result.employees
          })
        },
        (error) => {
          this.setState({ error })
        }
      )
  }

  render() {
    const { error, employees } = this.state
    if (error) {
      return Error: {error.message}
;
    } else {
      return (
        
          {employees.map(employee => (
            
              {employee.name}-{employee.experience}
            

          ))}
        

      )
    }
  }
}

Q-17: What is React Router?

React Router is a powerful routing library built on top of React that helps you add new screens and flows to your application incredibly quickly, all while keeping the URL in sync with what’s being displayed on the page.

Q-18: How to get query parameters in React Router v4?

The ability to parse query strings was taken out of React Router v4 because there have been user requests over the years to support different implementation. So the decision has been given to users to choose the implementation they like. The recommended approach is to use query strings library.

const queryString = require('query-string');
const parsed = queryString.parse(props.location.search);

You can also use URLSearchParams if you want something native:

const params = new URLSearchParams(props.location.search)
const foo = params.get('name')

You should use a polyfill for IE11.

Q-19: What are the two ways of formatting in React Intl?

The library provides two ways to format strings, numbers, and dates: react components or an API.

  id={'account'}
  defaultMessage={'The amount is less than minimum balance.'}
/>

const messages = defineMessages({
  accountMessage: {
    id: 'account',
    defaultMessage: 'The amount is less than minimum balance.',
  }
})

formatMessage(messages.accountMessage)

Q-20: How to format date using React Intl?

The injectIntl() higher-order component will give you access to the formatDate() method via the props in your component. The method is used internally by instances of FormattedDate and it returns the string representation of the formatted date.

import { injectIntl, intlShape } from 'react-intl'

const stringDate = this.props.intl.formatDate(date, {
  year: 'numeric',
  month: 'numeric',
  day: 'numeric'
})

const MyComponent = ({intl}) => (
  {`The formatted date is ${stringDate}`}

)

MyComponent.propTypes = {
  intl: intlShape.isRequired
}

export default injectIntl(MyComponent)

Q-21: What is Jest?

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.

10 JAVASCRIPT INTERVIEW QUESTIONS

Iqbal Mahmud — Wed, 13 May 2020 15:33:04 GMT

Q-1: What is WeakMap in ES6?

The WeakMap is same as Map where it is a collection of key/value pairs. But in WeakMap, the keys must be objects and the values can be arbitrary values. The object references in the keys are held weakly, meaning that they are a target of garbage collection (GC) if there is no other reference to the object anymore. The WeakMap API is the same as the Map API.

However, One difference to Map objects is that WeakMap keys are not enumerable. And there are no methods giving us a list of keys. If they were, the list would depend on the state of garbage collection, introducing non-determinism. If we want to have a list of keys, we should use a Map.

WeakMap

Q-2: What is Set?

Set objects are collections of unique values. Duplicate values are ignored, as the collection must have all unique values. The values can be primitive types or object references.

Set

Also, NaN and undefined can also be stored in a Set. NaN is considered the same as NaN (even though NaN !== NaN).

Q-3: What is Generator function?

Generator functions are a new feature in ES6 that allow a function to generate many values over time by returning an object which can be iterated over to pull values from the function one value at a time.

A generator function returns an iterable object when it’s called. It is written using the new * syntax as well as the new yield keyword introduced in ES6.

Generator function

Each time yield is called, the yielded value becomes the next value in the sequence. Also, note that generators compute their yielded values on demand, which allows them to efficiently represent sequences that are expensive to compute, or even infinite sequences.

Q-4: What is WeakSet?

The WeakSet object lets you store weakly held objects in a collection.

WeakSet objects are collections of objects. An object in the WeakSet may occur only once; it is unique in the WeakSet's collection. The main differences to the Set object are:

Unlike Set, WeakSets are collections of objects only and not of arbitrary values of any type.
The WeakSet is weak: References to objects in the collection are held weakly. If there is no other reference to an object stored in the WeakSet, they can be garbage collected. That also means that there is no list of current objects stored in the collection. WeakSets are not enumerable.

WeakSet

Q-5: What will be the output of the code below?

The output would be 5. When we use the delete operator to delete an array element, the array length is not affected from this. This holds even if you deleted all elements of an array using the delete operator.

In other words, when the delete operator removes an array element, that deleted element is not longer present in array. In place of value at deleted index undefined x 1 in chrome and undefined is placed at the index. If you do console.log(trees) output ["xyz", "xxxx", "test", undefined × 1, "apple"] in Chrome and in Firefox ["xyz", "xxxx", "test", undefined, "apple"]

Q-6: How can we calculate the length of the above associative array’s counterArray?

There are no in-built functions and properties available to calculate the length of associative array object here. However, there are other ways by which we can calculate the length of an associative array object. In addition to this, we can also extend an Object by adding a method or property to the prototype in order to calculate length. However, extending an object might break enumeration in various libraries or might create cross-browser issues, so it's not recommended unless it's necessary. Again, there are various ways by which we can calculate length.

Object has the keys method which can be used to calculate the length of an object:

We can also add a length method directly on Object:

Q-7: How do you add an element at the begining of an array? How do you add one at the end?

Q-8: What will the following code output and why?

Output to the console will be “3”.

There are three closures in the example, each with it’s own var b declaration. When a variable is invoked closures will be checked in order from local to global until an instance is found. Since the inner closure has a b variable of its own, that is what will be output.

Furthermore, due to hoisting the code in inner will be interpreted as follows:

Q-9: What is NaN? What is its type? How can you reliably test if a value is equal to NaN?

The NaN property represents a value that is “not a number”. This special value results from an operation that could not be performed either because one of the operands was non-numeric (e.g., "abc" / 4), or because the result of the operation is non-numeric.

While this seems straightforward enough, there are a couple of somewhat surprising characteristics of NaN that can result in hair-pulling bugs if one is not aware of them.

For one thing, although NaN means “not a number”, its type is, believe it or not, Number:

console.log(typeof NaN === "number");  // logs "true"

Additionally, NaN compared to anything – even itself! – is false:

console.log(NaN === NaN);  // logs "false"

A semi-reliable way to test whether a number is equal to NaN is with the built-in function isNaN(), but even using isNaN() is an imperfect solution.

A better solution would either be to use value !== value, which would only produce true if the value is equal to NaN. Also, ES6 offers a new Number.isNaN() function, which is a different and more reliable than the old global isNaN() function.

Q-10: What is the significance, and what are the benefits, of including 'use strict' at the beginning of a JavaScript source file?

The short and most important answer here is that use strict is a way to voluntarily enforce stricter parsing and error handling on your JavaScript code at runtime. Code errors that would otherwise have been ignored or would have failed silently will now generate errors or throw exceptions. In general, it is a good practice.

Some of the key benefits of strict mode include:

Makes debugging easier. Code errors that would otherwise have been ignored or would have failed silently will now generate errors or throw exceptions, alerting you sooner to problems in your code and directing you more quickly to their source.
Prevents accidental globals. Without strict mode, assigning a value to an undeclared variable automatically creates a global variable with that name. This is one of the most common errors in JavaScript. In strict mode, attempting to do so throws an error.
Eliminates this coercion. Without strict mode, a reference to a this value of null or undefined is automatically coerced to the global. This can cause many headfakes and pull-out-your-hair kind of bugs. In strict mode, referencing a a this value of null or undefined throws an error.
Disallows duplicate parameter values. Strict mode throws an error when it detects a duplicate named argument for a function (e.g., function foo(val1, val2, val1){}), thereby catching what is almost certainly a bug in your code that you might otherwise have wasted lots of time tracking down.
Note: It used to be (in ECMAScript 5) that strict mode would disallow duplicate property names (e.g. var object = {foo: "bar", foo: "baz"};) but as of ECMAScript 2015 this is no longer the case.
Makes eval() safer. There are some differences in the way eval() behaves in strict mode and in non-strict mode. Most significantly, in strict mode, variables and functions declared inside of an eval() statement are not created in the containing scope (they are created in the containing scope in non-strict mode, which can also be a common source of problems).
Throws error on invalid usage of delete. The delete operator (used to remove properties from objects) cannot be used on non-configurable properties of the object. Non-strict code will fail silently when an attempt is made to delete a non-configurable property, whereas strict mode will throw an error in such a case.

10 Interview Questions Every JavaScript Developer Should Know

Iqbal Mahmud — Tue, 12 May 2020 16:40:54 GMT

Question No-1: What are Promises?

Promises are one way in handling asynchronous operations in JavaScript. It represents the value of an asynchronous operation. Promises was made to solve the problem of doing and dealing with async code before promises we’re using callbacks.

The problem with this approach if we have another async operation inside the callback and another. We will have a code that is messy and unreadable. This code is called Callback Hell.

If we use promises in this code it will be more readable and easy to understand and easy to maintain.

Promises have 3 different states.

Pending — The initial state of a promise. The promise’s outcome has not yet been known because the operation has not been completed yet.

Fulfilled — The async operation is completed and successful with the resulting value.

Rejected — The async operation has failed and has a reason on why it failed.

Settled — If the promise has been either Fulfilled or Rejected.

The Promise constructor has two parameters which are functions resolve and reject respectively.
If the async operation has been completed without errors call the resolve function to resolve the promise or if an error occurred
call the reject function and pass the error or reason to it.
We can access the result of the fulfilled promise using the .then
method and we catch errors in the .catch method. We chain multiple async promise operations in the .then method because the .then method returns a Promise just like the example in the image e above.

We can make a helper func that converts an async operation with a callback to promise. It works like the promisify utility function from the node core module util.

Question No-2: What are Template Literals?

Template Literals are a new way of making strings in JavaScript. We can make Template Literal by using the backtick or back-quote symbol.

In the ES5 version, we need to escape the ' using the \ to escape the normal functionality of that symbol which in this case is to finish that string value. In Template Literals, we don't need to do that.

In the ES5 version, we need to add this \n to have a new line in our string. In Template Literals, we don't need to do that.

In the ES5 version, If we need to add an expression or value in a string we need to use the + or string concatenation operator. In Template Literals, we can embed an expression using ${expr} which makes it cleaner than the ES5 version.

Question No-3: What is Object Destructuring?

Object Destructuring is a new and cleaner way of getting or extracting values from an object or an array.

Suppose we have an object that looks like this.

The old way of getting properties from an object is we make a variable that has the same name as the object property. This way is a hassle because we’re making a new variable for every property. Imagine we have a big object with lots of properties and methods using this way in extracting properties will be irritating.

If we use object destructuring it looks cleaner and takes a little time than the old way. The syntax for object destructuring is that if we are getting properties in an object we use the {} and inside that, we specify the properties we want to extract and if we are getting data from an array we use the [].

If we want to change the variable name we want to extract we use the propertyName:newName syntax. In this example the value of fName variable will hold the value of the firstName property and lName variable will hold the value of the lastName property.

We can also have default values when destructuring. In this example, if the firstName property holds an undefined value in the object then when we destructure the firstName variable will hold a default of "Snigdho".

Question No-4: What is async/await and How does it work?

async/await is the new way of writing asynchronous or non-blocking code in JavaScript’s. It is built on top of Promises. It makes writing asynchronous code more readable and cleaner than
Promises and Callbacks. But you must learn the basics of Promises before using this feature because as I said earlier it is built on top of Promises which means is still uses Promises under the hood.

Using Promises.

Using Async/Await.

Note: We’re using the old try/catch statement to catch any errors that happened in any of those async operations inside the try statement.

Note: The async keyword before the function declaration makes the function return implicitly a Promise.

Note: The await keyword can only be used inside an async function. Using await keyword in any other function which is not an async function will throw an error. The await keyword awaits the right-hand side expression (presumably a Promise) to return before executing the next line of code.

Question No-5: What are Default Parameters?

Default Parameters is a new way of defining default variables in JavaScript it is available in the ES6 or ECMAScript 2015 Version.

We can also use Destructuring in Default Paremeters.

We can also use the parameters defined first to the parameters defined after them.

Question No-6: What are Wrapper Objects?

Primitive Values like string,number and boolean with the exception of null and undefined have properties and methods even though they are not objects.

name is a primitive string value that has no properties and methods but in this example we are calling a toUpperCase() method which does not throw an error but returns SNIGDHO.

The reason for this is that the primitive value is temporarily converted or coerce to an object so the name variable behaves like an object. Every primitive except null and undefined have Wrapper Objects. The Wrapper Objects are String,Number,Boolean,Symbol and BigInt. In this case, the name.toUpperCase() invocation, behind the scenes it looks like this.

The newly created object is immediately discarded after we finished accessing a property or calling a method.

Question No-7: What are the ways to deal with Asynchronous Code in JavasScript?

Callbacks
Promises
async/await
Libraries like async.js, bluebird, q, co

Question No-8: How many ways can a function be invoked?

There are 4 ways that a function can be invoked in JavaScript. The invocation determines the value of this or the "owner" object of that function.

Invocation as a function — If a function isn’t invoked as a method, as a constructor or with the apply, call methods then it is invoked as a function. The "owner" object of this function will be the window object.

Invocation as a method — If a property of an object has a value of a function we call it a method. When that method is invoked the this value of that method will be that object.

Invocation as a constructor — If a function was invoked with a new keyword before it then it's called a function constructor. An empty object will be created and this will point to that object.

Invocation with the apply and call methods - If we want to explicitly specify the this value or the "owner" object of a function we can use these methods. These methods are available for all functions.

Question No-9: What does the new keyword do?

The new keyword is used with constructor functions to make objects
in JavaScript.

Suppose we have an example code below.

The new keyword does 4 things.

Creates an empty object.
Assigns that empty object to the this value.
The function will inherit from functionName.prototype.
Returns the this if no Explicit return statement is used.

In the above image, it will first create an empty object {} then
it will the this value to that empty object this = {} and add properties to that this object. Because we don't have a explicit return statement it automatically returns the this for us.

Question No-10: What’s Event Capturing?

When an event occurs on a DOM element, that event does not entirely occur on that just one element. In Capturing Phase, the event starts from the window all the way down to the element that triggered the event.

If we have an example markup like this.

And js code.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Top 20 Interview Questions For HTML and CSS.

Iqbal Mahmud — Mon, 11 May 2020 17:10:50 GMT

PART-1 HTML

Question No-1: What are the new features introduced in HTML 5?

HTML 5 introduces a number of new elements and attributes that help in building an attractive web Site, that we see nowadays.

It supports following new features.

New Semantic Elements — These are like
,
, and
.
Forms 2.0 — It contains improvements to HTML web forms. It has introduced new attributes for the tag.
Persistent Local Storage — With HTML5, it is possible to achieve this, without resorting to third-party plugins.
WebSocket — It facilitates setting up a bidirectional communication for web applications.
Server-Sent Events(SSE) — These events got introduced in HTML5. The direction of the flow of the execution of these events is from the server to the Web Browser.
Canvas — It supports a two-dimensional drawing surface that is programmable using JavaScript.
Audio & Video — It allows embedding audio or video on the web pages without resorting to third-party plugins.
Geolocation — It facilitates the visitors to share their physical location with the web application.
Microdata — It allows building our personal vocabulary beyond HTML5 and extends our web pages with those custom semantics.
Drag and drop — It supports to Drag and drop the items from one location to another location on the same Web page.

Question No-2: What are the new Form elements made available in HTML 5?

When we want to collect some data from the person visiting our site, we use HTML Forms. An example is, the user has to enter his name, email id when he registers for the first time.

A form takes input from the site visitor and then posts it to a back-end application such as CGI, ASP Script or PHP script. The back-end application will then perform required processing on the passed data based on defined business logic inside the application.

There are various form elements available in earlier version of HTML like, text fields, text area fields, drop-down menus, radio buttons, checkboxes, etc.

HTML5 provides the support of some new Form elements that are as follows.

— It represents a list of pre-defined options for input controls.
— It defines a key-pair generator field (for forms).
— It represents the result of the calculation.

Question No-3: What is a semantic element in HTML5? Also, explain the difference between semantic and non-semantic elements?

Semantic elements are one of the new features that are part of HTML5. They intend to help the developers in quickly creating the page structure.

A semantic element has its meaning expressed to both the browser and the developer. Also, all the modern browsers support this feature. However, it is possible for a developer to train old browsers to handle unknown elements.

Here is the list of some of the commonly used HTML5 Semantic Elements.

The difference — Semantic Vs. Non-semantic.

Semantic — These elements clearly describe their content like ,

, etc.
Non-semantic — These elements are without any definition. They don’t describe anything about their structure such as and
.
Question No-4: What is HTML5 Graphics?
In HTML5, there are two types of graphics.
Scalable Vector Graphics (SVG).
The HTML5 element is a container for SVG graphics. It provides several methods for drawing boxes, paths, text, circles, and graphic images.
SVG is beneficial as nowadays, people are using high-resolution devices (iPads and Monitors), so it becomes impressive as designs, logos, and charts scale according to the requirement, maintaining the picture quality.
SVG is XML based, which means that every element is available within the SVG DOM. It treats every shape as an object. If the user changes the attributes of any SVG object, the browser will automatically re-render the shape.
Canvas.
It is a rectangular area on the HTML page for drawing graphics on the fly, using JavaScript.
The default size of the canvas is 300 PX × 150 PX (width × height).
The HTML tag
In Canvas, browser forgets the graphic, after drawing it. If the user tries to modify it, the entire scene needs to be redrawn, including all the objects present in the graphic.
Question No-5: How can we create a new HTML element?
We can even create new elements for the document as follows.
It can be used in the HTML as.
hello
Question No-6: What is HTML5 Web Storage?
HTML5 Web Storage, also known as DOM Storage is a way to preserve state on either the client or server which makes it much easier to work against the stateless nature of HTTP. It allows the web pages to store the data locally in the user’s browser.
Following are the advantages of HTML5 Web Storage.
It can store 5 to 10 MB data. That is far more than what cookies allow.
HTML5 never transfers Web storage data with any HTTP request. Thus creating less overhead than cookies and in turn, increase the performance of the application.
Apps can work both online and offline.
This API is easy to learn and use.
Question No-7: Explain the key differences between localStorage and sessionStorage objects?
Following are the key differences between localStorage and sessionStorage objects.
The localStorage object stores the data without an expiry date. However, sessionStorage object stores the data for only one session.
In the case of a localStorage object, data will not delete when the browser window closes. However, the data gets deleted, if the browser window closes, in the case of sessionStorage objects.
The data in sessionStorage is accessible only in the current window of the browser. But the data in the localStorage can be shared between multiple windows of the browser.
Question No-8: What is a Manifest file?
A Manifest file is a simple text file, that tells the browser what to cache and what not to cache.
A Manifest file contains three Sections as
CACHE MANIFEST — HTML5 performs the caching of files listed under this section after
they get downloaded for the first time.
NETWORK — Files listed here, always need a connection to the server. The browser can never cache them.
FALLBACK — Files listed here specify the fallback pages, if any page in it is not accessible.
Question No-9: What is a Web Worker? How does it work?
JavaScript will hang the browser if it has to handle UI events, query large amounts of API data for processing, and manipulate the DOM simultaneously.
Web Workers handle this situation by doing all the high computation tasks without interrupting the user interface. They do this by running on separate threads. Thus we can say that.
A web worker is a script, which runs in the background. It exists in external files.
The user can perform actions like clicking, selecting things and so on. Meanwhile, the Web worker runs in the background.
It is appropriate, to use Web worker for CPU intensive tasks.
Since Web workers are in external files, they do not have access to the following JavaScript objects.
The window object
The document object
The parent object
Question No-10: When should you use section, div or article?
, group of content inside is related to a single theme, and should appear as an entry in an outline of the page. It’s a chunk of related content, like a subsection of a long article, a major part of the page (eg the news section on the homepage), or a page in a webapp’s tabbed interface. A section normally has a heading (title) and maybe a footer too.
, represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
, on the other hand, does not convey any meaning, aside from any found in its class, lang and title attributes.
PART-2: CSS
Question No-1: Name all the modules which are used in the current version of CSS.
There are several modules in CSS as stated below:
Selectors
Box Model
Backgrounds and Borders
Text Effects
2D / 3D Transformations
Animations
Multiple Column Layout
User Interface.
Question No-2: What is the CSS Box model and what are its elements?
The CSS box model is used to define the design and layout of elements of CSS.
The elements are:
Margin — It removes the area around the border. It is transparent.
Border — It represents the area around the padding
Padding — It removes the area around the content. It is transparent.
Content — It represents content like text, images, etc.
Question No-3: Write all the properties of the flexbox.
There are several properties of the flexbox that are used in the HTML webpage.
They are:
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
Question No-4: What is the difference between padding and margin?
In CSS, the margin is the property by which we can create space around elements. We can even create space to the exterior defined borders.
In CSS, we have margin property as follows:
margin-top
margin-right
margin-bottom
Margin-left
Margin property has some defined values as shown below.
Auto — Using this property browser calculates the margin.
Length — It sets the margin values in px,pt,cm etc.
% — It sets the width % of the element.
Inherit — By this property we can inherit the margin property from the parent element.
In CSS, padding is the property by which we can generate space around an element’s content as well as inside any known border.
CSS padding also has properties like,
Padding-top
Padding-right
Padding-bottom
Padding-left
Negative values are not allowed in padding.
div {
padding-top: 60px;
padding-right: 40px;
padding-bottom: 50px;
padding-left: 70px;
}
Question No-5: What are pseudo classes and what are they used for?
Pseudo classes are similar to pseudo elements, but instead of styling a part of an element, they apply styles when an element is in a certain state. For example, you could style a button differently based on whether the user has their mouse pointer over it, or when they click the button.
Another common use case is to style only certain occurrences of elements in a row. For example, styling the first tab in a series of tabs, or every second tab.
They all start with a single colon and look like this:
.link:hover { ... }
.link:active { ... }
.tab:first-child { ... }
.tab:last-child { ... }
.avatar:nth-child(2n) { ... }
Question No-6: Should you use !important?
When you’re wrestling with specificity, trying to override that one style, you may be tempted to add !important to your style. Think very carefully before you do so! It may seem harmless, but if you do this all over the place, you will soon find yourself in a big mess that you cannot get out of.
What !important does, is make that particular style have the highest specificity possible. Nothing else can override it, apart from another !important. You might be able to see where this is going, but once you start using them, you’ll almost certainly get into a position where you need to override a rule marked as !important, which forces you to use another one. And so the cycle continues.
/* high specificity */
.large .navigation.navigation-large {
font-size: 2em;
}
/* will override the above, but it's dangerous! */
.navigation {
font-size: 3em !important;
}
Question No-7: What are the differences between relative and absolute in CSS?
The main difference between relative and absolute is that “relative” is used for the same tag in CSS and it means that if we write the left:10px then the padding will shift to 10px in the left while absolute is totally relative to the non-static parent.
It means, if we write left:10px then the result will be 10px far from the left edge of the parent element.
Question No-8: How would you use media queries in a mobile-first approach?
There’s no way to avoid these nowadays, everyone expects their website to work on mobile devices, even if they don’t specifically ask for it.
The most common approach is the mobile-first one. All styles outside of media queries are targeted at mobile devices. Then, through progressively larger media queries, you can style larger screens one step at a time.
/* mobile styles */
body {
font-size: 1em;
}
/* desktop styles */
@media only screen and (min-width: 768px) {
body {
font-size: 1.5em;
}
}
Question No-9: Differentiate between inline and block element.
Inline element does not have an element to set width and height and also it does not have the line break.
Example: em, strong, etc.
Block element specification:
They do have the line break.
They define the width by setting a container and also allow setting height.
It can also contain an element that occurs in the inline element.
Example:
width and height
max-width and max-height
min-width and min-height
hi (i=1–6)- heading element
p- Paragraph element.
Question No-10: Do you use any CSS preprocessors, and which do you prefer?
If you’re working on a medium to large project, it’d be a good idea to use a CSS preprocessor. They allow you to write more concise CSS, split it up into multiple files and use a large number of very useful functions and mixins (you can even create your own!), along with variables.
The main players are Sass (also referred to as SCSS), LESS and Stylus, although arguably Sass is the biggest.

JAVASCRIPT REACT, DATA STRUCTURE & ALGORITHMS SUMMARY.

Iqbal Mahmud — Sun, 10 May 2020 06:34:52 GMT

REACT IS A JAVASCRIPT FRAMEWORK OR LIBRARY?
React is a javaScript library, it is not same as framework. Framework provides total solution where React library is not a complete solution and you will need other libraries to sort out any solution. That’s why we can nominate React as a library but not as a framework.
REACT DOM
The Document Object Model is the browsers programming interface that treated HTML and XML documents as tree structures. By using the DOM API, we can change a document structure, style, and content.
RECONCILIATION
It is the process of recursively traversing a tree to know the DOM tag elements of a React application’s component tree. During this process, React goes through the following steps:
Compares the previous internal instance with the next internal instance.
Updates the internal Instance (Virtual DOM).
Updates the actual DOM only at the node where there is an actual change.
COMPONENTS VS ELEMENTS
You can be confused with this two words that are most commonly used in React guides and tutorials out there. As a react learner you must have to understand the difference between this two words.A react component is a template, blueprint or a global definition you can say. This can be either a function or a class with a render method.
A react element is what it gets returned from the components. It’s an object virtually describes the DOM nodes that a component represents. In function component, this element is the object that the function returns and in class components, this element is the object that the component’s render method returns.
REACT COMPONENTS
Components are one of the essential features of a React application. They are independent and reusable bits of code. Basically, they are like functions with a different syntax. They take props as inputs and returns the description of the UI as output. In React, there are two types of components.
Class Components
Class Components
Function Components
Function Components
REACT FRAGMENT
A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.
REACT FRAGMENT
There is also a short and simple syntax for declaring them. It looks like empty tags.
REACT UNDER THE HOOD
React is a JavaScript library used to build user interfaces. There are several tools that power a React app.
Babel: It is a JavaScript transpiler used to convert code from one syntax to another. It is essential to React as is used to convert JSX into plain JS code.
JSX: It is an extension to JavaScript, that allows us to write function calls in an HTML like syntax.
Node.js: It is a JavaScript runtime environment built on Chrome’s V8 JavaScript engine. This allows us to execute JS outside the browser.
NPM: It is a software register used as a package manager for JavaScript programming language.
BABEL
Bable is a javascript compiler it compiles javascript ES2015+ code into older version javascript code for new or old browser and environment compatible. Babel can do fo you —
Transform syntax
Polyfill features that are missing in your target environment.
Source code transformations.
PROPS IN JSX
In React, ‘props’ is a special keyword that stands for properties and used for passing data between components. There are several ways to define props in JSX.
JavaScript Expressions
String Literals
Props Default to “True”
Spread Attributes
WHY NEED JSX?
JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() and appendChild() methods. JSX converts HTML tags into react elements. You are not required to use JSX, but JSX makes it easier to write React applications.
React uses JSX for templating instead of regular JavaScript. It is not necessary to use it, however, following are some pros that come with it:
It is faster because it performs optimization while compiling code to JavaScript.
It is also type-safe and most of the errors can be caught during compilation.
It makes it easier and faster to write templates, if you are familiar with HTML.
ERROR HANDLING METHODS
There are mainly two types of error handling methods in React. These methods are used in the error boundary mechanism.
static getDerivedStateFromError(error)
This method is useful for rendering a fallback UI after an error is thrown.
componentDidCatch(error, info)
This is useful for logging the error information for debugging purposes.
WHAT IS LIFECYCLE METHOD IN REACT?
React lifecycle methods are the series of events that happen from the birth of a React component to its death. Every component in React goes through a lifecycle of events. I like to think of them as going through a cycle of birth, growth, and death. Lifecyle methods execute in initial rendering or re-rendering phase.
Example:
componentDidMount(), shouldComponentUpdate(), componentDidUpdate() etc.
WHY IS UNIT TESTING NEEDED?
Unit testing helps to make sure the code works correctly. Unit tests are a great way to do regression testing: simply run them every time you change something and make sure nothing breaks. Spotted a bug? Fix it and write a unit test to make sure it doesn’t happen again.
For your identified important parts of code, you need to write unit tests to make sure the code works.
WHY NOT USE TRY / CATCH?
try / catch is great but it only works for imperative code:
try {
showButton();
} catch (error) {
// …
}
However, React components are declarative and specify what should be rendered:

5 USEFUL ALGORITHMS IN JAVASCRIPT

Iqbal Mahmud — Sat, 09 May 2020 14:22:51 GMT

FACTORIAL
The factorial of a non-negative integer n, denoted by n!, is the product of all positive integers less than or equal to n. Such as
4! = 4 * 3 * 2 * 1 = 24
For example:
FACTORIAL
FACTORIAL RECURSIVE
We can find the factorial of a number using recursion. If you’re having trouble to understand the recursive function then try to think about stack. When a function call is placed the function call is placed on the stack and then the other function calls are placed one top of another. Try to draw the call stack on a note book then may be it will be easier to understand.
For Example:
FACTORIAL RECURSIVE
FIBONACCI SERIES
In mathematics, the Fibonacci numbers are the numbers in the following integer sequence, called the Fibonacci sequence, and characterized by the fact that every number after the first two is the sum of the two preceding ones:
[1, 1, 2, 3, 5, 8, 13, 21, 34, 55]
For Example:
FIBONACCI SERIES
LINEAR SEARCH
In computer science, linear search or sequential search is a method for finding a target value within a list. It sequentially checks each element of the list for the target value until a match is found or until all the elements have been searched. Linear search runs in at worst linear time and makes at most n comparisons, where n is the length of the list.
For Example:
LINEAR SEARCH
BINARY SEARCH
In computer science, binary search, also known as half-interval search, logarithmic search, or binary chop, is a search algorithm that finds the position of a target value within a sorted array. Binary search compares the target value to the middle element of the array; if they are unequal, the half in which the target cannot lie is eliminated and the search continues on the remaining half until it is successful. If the search ends with the remaining half being empty, the target is not in the array.
For Example:
BINARY SEARCH
BUBBLE SORT
Bubble sort, sometimes referred to as sinking sort, is a simple sorting algorithm that repeatedly steps through the list to be sorted, compares each pair of adjacent items and swaps them if they are in the wrong order (ascending or descending arrangement). The pass through the list is repeated until no swaps are needed, which indicates that the list is sorted.
For Example:
BUBBLE SORT
SELECTION SORT
Selection sort is a sorting algorithm, specifically an in-place comparison sort. It has O(n2) time complexity, making it inefficient on large lists, and generally performs worse than the similar insertion sort. Selection sort is noted for its simplicity, and it has performance advantages over more complicated algorithms in certain situations, particularly where auxiliary memory is limited.
For Example:
SELECTION SORT
INSERTION SORT
Insertion sort is a simple sorting algorithm that builds the final sorted array (or list) one item at a time. It is much less efficient on large lists than more advanced algorithms such as quicksort, heapsort, or merge sort.
For Example:
INSERTION SORT

TOP 5 MAIN DATA STRUCTURES IN JAVASCRIPT

Iqbal Mahmud — Fri, 08 May 2020 16:17:14 GMT

WHAT ARE DATA STRUCTURES?
Data structures, at a high level, are techniques for storing and organizing data that make it easier to modify, navigate, and access. Data structures determine how data is collected, the functions we can use to access it, and the relationships between data. Data structures are used in almost all areas of computer science and programming, from operating systems to basic vanilla code to artificial intelligence.
Data structures enable us to:
Manage and utilize large datasets
Search for particular data from a database
Design algorithms that are tailored towards particular programs
Handle multiple requests from users at once
Simplify and speed up data processing
Data structures are vital for efficient, real-world problem solving. After all, the way we organize data has a lot of impact on performance and usability. In fact, most top companies require a strong understanding of data structures. These skills demonstrate that you know how to manage your data effectively. Anyone looking to crack the coding interview will need to master data structures.
JAVASCRIPT DATA STRUCTURES
BINARY SEARCH TREE:
When we think of a binary search tree, the three things we should think of are:
Root: This is the very top node of a tree structure and does not have a parent.
Parent: It is a child of a node but also the parent of a node.
Child: This node is the child of a node and does not necessarily have a child.
In a binary search tree, each node either has zero, one or two children. The child on the left is called the left child, and the child on the right is the right child. In a binary search tree, the child on the left must be smaller then the child on the right.
The core class for a tree would look like:
We’ll also create a Node class to represent each of out nodes.
Let’s implement the add method. I have commented the code very well, but if you find it confusing, just remember that all we are doing from our root and chekong the left and right of each node.
Let;s test our new add method like so:
STACK
This is quite similar to the queue, and you may have heard of the call stack before, which is what JavaScript uses to handle events.
when you have a stack, the last item you pushed on the stack will be the first one removed. This is referred to as last-in, first-out (LIFO). The back button in web browsers is a good example: each page you view is added to the stack, and when you click back, the current page (the last one added) is popped from the stack.
That is enough theory. Let’s get into some code:
I’ve commented the above code, so hopefully you are with me up to this point. The first method we will implement is the push method.
So let’s think about what we need this method to do:
We need to accept a value
We then need to add that value to the top of our stack
We also should track the length of our stack so we know our stack’s index
It would be great if you could try this yourself first, but if not, the complete push method implementation is below:
I bet it was easier than you thought. I think with a lot of these structures, they sound more complicated than they actually are.
Now let’s get to the pop method. The goal with the pop method is to remove the last value that was added to our stack and then return that value. Try this yourself first if you can, otherwise just continue on to see the solution:
The last thing we need to do is the peek function, which looks at the last item in the stack. This is the easiest function: we simply return the last value. Implementation is:
QUEUE
The key difference between the stack and the queue is that the queue is first-in, first-out (FIFO). There have been a few comments on this article asking why not use an array here, so as a contrast to the above, we will use an array for this data structure.
he two big actions are enqueue and dequeue. We add to the back and remove from the front. Let’s get into implementing a queue to get a better understanding. I had previously used an object here, but I have updated it now to use an array. For the stack data structure, you can also do this approach.
The core structure of our code will look like this:
let’s first implement our enqueue method. Its purpose is to add an item to the back of our queue.
This is quite a simple method that adds a value to the end of our queue, but you may be a little confused by
this.queue[this.length + this.head] = value;
Let’s say our queue looked like this{14 : 'randomVal'}. When adding to this, we want our next key to be 15, so it would be length(1) + head(14), which gives us 15.
The next method to implement is the dequeue method:
The final method to implement is the peek method, which is an easy one:
LINKED LIST
This is more complicated than our structures above, but together, we can figure it out.
The first question you might ask is why we would use a linked list. A linked list is mostly used for languages that do not have dynamic sizing arrays. Linked lists organize items sequentially, with each item pointing to the next item.
The first thing we are going to create is a Node class.
The above represents each node in our list.
With a class for our Node, the next class we need is our LinkedList.
So as we explained above, our LinkedList as a head, which is first set to null (you could add an arg to your constructor to set this if you wanted). We also track the size of our linked list.
The first method we are going to implement is insert; this will add a node to our linked list
I have commented the code above to make it easier to understand, but all we are doing is adding a node to the end of the linked list. We can find the end of our linked list by finding the node that has a next value of null.
The next method we are going to implement is removeAt. This method will remove a node at an index.
So the method above will remove a node at a specific index. It does this by updating the next value to point at the next node in the list until we reach the index. This means that no node will be pointing at the node at the index, so it will be removed from our list.
The final (easiest) method left to do is clearList.
HASH TABLE
A hash table is a data structure that implements an associative array, which means it maps keys to values. A JavaScript object is a hash table, as it stores key-value pairs.
With the hashing function covered, it’s time to talk about how we would implement a hash table.
The three operations we will discuss are insert , get , and, finally, remove.
The core code to implement a hash table is as follows:
let’s tackle our first method, which is insert The code to insert into a hash table is as follows.
So if we were to call the insert method like so:
Now how would we remove from a hash table?
The final method we will implement is the get method. This is the same as the remove method, but this time, we return the pair rather than delete it.