
### Introduction

The developers are used to writing test cases for their components, that is for the validation of the components to ensure the behavior. These test cases will be prior test cases rather than the actual test cases.

We are clear about what is the need for unit test cases. So next we can discuss how to implement and run the unit test cases in your software program.

Here I am particularly going to explain the unit test cases for ReactJS applications and supporting unit test case library.

The widely used testing framework is <a href="https://jestjs.io/">Jest</a> and it is very easy to handle the test cases. Jest is completing the process with help of other libraries like enzyme for rendering the components.

- ### Please follow the below steps to set up the Jest framework in your ReactJS application.

- Please add the below packages to your applications
<div class="list-number">

- <a href="https://www.npmjs.com/package/jest" target="_blank">Jest</a>
- <a href="https://www.npmjs.com/package/enzyme" target="_blank">Enzyme</a>

</div>

create/add a step "test" for running the test cases in package.json on script section along with other commands

```javascript
 "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "test": "jest" ---> for running the test cases
  },
```

Now, the initial step is done. there for we can start to create the test files. basically the test files should create the name with `[filename].test.js`

see the below coding snippet this is how our test file look like.

```javascript
import React from "react";
import { ContactForm } from "./index"; -- ContactForm is accepting the personal details.
import { shallow } from "enzyme";

describe("enter you contact details", () => {
  const element = shallow(<VCardForm />);
  it("should be able to find first name textbox", () => {
    const renderComponent = element.find("input");
    expect(renderComponent.at(0).props().name).toBe("firstName");
  });
});

```

Now, Run the test script from terminal by entering `npm run test`

But unfortunetly we caught an error similar to the below error statement

<div class="highlight-error">
Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none.
To configure an adapter, you should call `Enzyme.configure({ adapter: new Adapter() })`
before using any of Enzyme's top level APIs, where `Adapter` is the adapter
corresponding to the library currently being tested.

For example:

import Adapter from 'enzyme-adapter-react-15'; To find out more about this,
see https://airbnb.io/enzyme/docs/installation/index.html

</div>

So, How to fix: Enzyme expects an adapter to be configured and what does it meant ?

The adapter abstracts away anything that changes based on the React version so the core enzyme code can stay the same. This is the need of Enzyme adapter.

To fix the error can be done in few lines of code and need a adapter package based on your React version.

For this example, I have installed `npm i @wojtekmaj/enzyme-adapter-react-17`

then create a file `setupTests.js` in the root of the application.

```javascript
import * as enzyme from "enzyme";
import * as Adapter from "@wojtekmaj/enzyme-adapter-react-17";

enzyme.configure({ adapter: new Adapter.default() });
```

To make this adapter configuration to work add the file reference to the `jest.config.js`

So create jest.config.js file to add certain configuration for the unit test cases.

```javascript
const config = {
  setupFilesAfterEnv: ["<rootDir>/setupTests.js"],
  transform: {
    "^.+\\.(js|jsx|ts|tsx)$": ["babel-jest", { presets: ["next/babel"] }],
  },
};

module.exports = config;
```

`presets: ["next/babel"] ` this is preset plugin for NextJS application, this can be declared either in `.babelrc` file or within the configuration file. This is only the major part for NextJS and rest everything similar as normal React applications.

Now we are good to run the test cases against to our testcases.

```javascript

PASS  src/components/ContactForm.test.js
enter you contact details
  √ should be able to find first name textbox (53 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.408 s
Ran all test suites.

```

Thank you, I hope this instruction is helps to set up the unit test case for your NextJS application.


Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none.

How to setup jest test case in NextJS


The SVG is a popular format for displaying two-dimensional (2D) graphics, charts, and illustrations on web pages and it is a vector file, it can be scaled up or down without losing any of its resolution.

<div class="highlight">

## What is SVG?

SVG stands for Scalable Vector Graphics. SVG is used to define vector-based graphics for the Web. SVG defines the graphics in XML format. Every element and every attribute in SVG files can be animated.

</div>

It is fine to use anywhere but in some places, the SVG format cannot be used because of the file format, So that situation we have to convert the SVG file to other supporting formats.

I have come across such a situation during my development time. So I wish to share this with our developer community.

Here I have written a Javascript function for downloading the SVG as PNG file format.

```javascript
const download = (e) => {
  const canvas = document.createElement("canvas");
  const svg = document.getElementById("svgContainer");
  const base64doc = btoa(unescape(encodeURIComponent(svg.outerHTML)));
  const w = parseInt(svg.getAttribute("width"));
  const h = parseInt(svg.getAttribute("height"));
  const img_to_download = document.createElement("img");
  img_to_download.src = "data:image/svg+xml;base64," + base64doc;
  img_to_download.onload = function () {
    console.log("img loaded");
    canvas.setAttribute("width", w);
    canvas.setAttribute("height", h);
    const context = canvas.getContext("2d");
    context.drawImage(img_to_download, 0, 0, w, h);
    const dataURL = canvas.toDataURL("image/png");
    if (window.navigator.msSaveBlob) {
      window.navigator.msSaveBlob(canvas.msToBlob(), "download.png");
      e.preventDefault();
    } else {
      const a = document.createElement("a");
      const my_event = new MouseEvent("click");
      a.download = "download.png";
      a.href = dataURL;
      a.dispatchEvent(my_event);
    }
  };
};
```

Actually the SVG file being converted to <span class="highlight-small">canvas</span> then again it is converted as PNG format, like this way also make it in other image file formats.


Easist way of downloading the SVG file as PNG file is done using javascript snippet

[Solved] How to download SVG as PNG file


**Introduction**

We have covered most asked interview questions and their answers, definetely this page will be help if you are preparing for the interview. Please bookmark yourself for your current or future reference.

<div class="list-number highlight">

- [What is IIFE ?](#IIFE)
- [What is hoisting ?](#hoisting)
- [What are the different ways of creating variables in Javascript ?](#let_const_var)
- [what is Arrow functions ?](#arrow)
- [How to extract unique value from an Array](#unique)
- [What is currying ?](#currying)
- [How to create object in Javascript ?](#object)
- [What are the different type of client side storages and its differences.](#client_storage)
- [What is the new way of using window object in Javascript and provide example ?](#windowObject)
- [How to check a number is Amstrong or not](#Amstrong)

</div>
<div class="list-number">

- <h3 class="text-sm" id="IIFE">What is IIFE ?</h3>

  Immediate invoke function expression is a function this will execute right after the declartion, An IIFE can be avoiding the variable hoisting within the blocks. It is also called as self executing anonymous functions.

  syntax

  ```javascript
  (function () {
    // logic goes here
  })();
  ```

- <h3 class="text-sm" id="hoisting">What is Hoisting ?</h3>

  Hoisting is moving the declaration of variable and function to the top of the current scope.

  Why hoisting is used ?

  Hoisting allows you to use the function and variable before they are declared.

  How to prevent hoising ?

  After the release of ES6, two new featurea have introduced such as <a href="/posts/what-are-es6-features#let-and-const">Let and Const.</a> If the variable or function declared any of these will prevent the hoisting, because these two has block scope and the `var` has globally scoped.

- <h3  class="text-sm" id="let_const_var">What are the different ways of creating variables in Javascript ?</h3>

  Before ES6 in Javascript <span class="highlight-small">var</span> keyword mainly used, but after the ES6 release other two way of declaration is introduced, that is Let and Const.

  The existing keyword `var` have one limitation because it has global scope and there is a chance for overwrittern the value from other places and also can use it before declaration.

  ```javascript
  var name = "abc";
  var name = 123; // will not throw any error

  country = "Mexico"; // will not throw any error about declaration because it is hoisted
  var country;
  ```

  The latest keywords let and const has block scoped, So it will not be hoisted.

  <span class="highlight-small">Let</span> - The let keyword cannot be redeclared, It will not be allow us to use it before declaration.

  ```javascript
  let name = "abc";
  let name = 123; // will throw the error, Let keyword won't allow to redeclare

  country = "Mexico"; // will throw error because cannot be able to use it before declaration
  let country;
  ```

  <span class="highlight-small">Const</span> - The const keyword cannot be redeclared and reassigned, It will not be allow us to use it before declaration.

  ```javascript
  const name = 'abc'
  name = 'cde' // will throw the error,
               // const keyword won't allow to reassign the value

  const name = 123 // will throw the error,
                   // const keyword won't allow to redeclare

  country = 'Mexico' // will throw error,
                     // because cannot be able to use it before declaration
  const country
  ```

- <h3 class="text-sm" id="arrow">What is Arrow functions ?</h3>
  Arrow function is an another feature of ES6, this is used to write the function shorter.
  Arrow functions are defined using the fat arrow (=>) notation.

  ```javascript
  const add = (number1, number2) => number1 + number2;
  ```

- <h3 class="text-sm" id="unique">How to extract unique value from an array in Javascript ?</h3>

  There are many ways to find the unique values from an array, but we have to apply more lines of code.

  Other than the longer steps we can use <span class="highlight-small">Set</span> to find the unique numbers in one line of code.

  ```javascript
  const arr = [1, 2, 3, 4, 1, 1, 2, 3];
  const uniqueArray = Array.from(new Set(arr));

  // [1, 2, 3, 4]
  ```

- <h3 class="text-sm" id="currying">What is currying ?</h3>
    Currying in JavaScript transforms a function with multiple arguments into a nested series of functions, each taking a single argument.

  ### What are the benefits of currying?

  Curried functions can make code more readable and expressive by breaking down complex logic into smaller, more manageable pieces. This can make it easier for developers to understand and maintain code. Currying allows for more flexibility in the way that functions are composed.

  ```javascript
  function calculateVolume(length) {
    return function (breadth) {
      return function (height) {
        return length * breadth * height;
      };
    };
  }

  console.log(calculateVolume(4)(5)(6));
  ```

- <h3 class="text-sm" id="object">How to create object in Javascript ?</h3>

  Javascript is not a class based object-oriented language. But it still has ways of using object oriented programming. (object oriented javascript)

  There are many ways to create objects in javascript as below

  **1.** **Object constructor:**

  The traditional way to create an empty object is using the Object constructor. But currently this approach is not recommended.

  ```javascript
  var object = new Object();
  ```

  **2.** **Object's create method:**

  The create method of Object creates a new object by passing the prototype of object as a parameter

  ```javascript
  var object = Object.create(null);
  ```

  **3.** **Object literal syntax:**

  The object literal syntax (or object initializer), is a comma-separated set of name-value pairswrapped in curly braces.

  ```javascript
  var object = {
       name: "Mr. ABC"
       age: 34
  };
  Object literal property values can be of any data type, including array, function, and nested object.
  ```

  **Note:** This is an easiest way to create an object

  **4.** **Function constructor:**
  Create any function and apply the new operator to create object instances,

  ```javascript
  function Person(name) {
    this.name = name;
    this.age = 21;
  }
  var object = new Person("Mr. ABC");
  ```

  **5.** **Function constructor with prototype:**

  This is similar to function constructor but it uses prototype for their properties and methods,

  ```javascript
  function Person() {}
  Person.prototype.name = "Mr. ABC";
  var object = new Person();
  ```

  This is equivalent to an instance created with an object create method with a functionprototype and then call that function with an instance and parameters as arguments.

  ```javascript
  function func {};
  new func(x, y, z);
  ```

  **(OR)**

  ```javascript
  // Create a new instance using function prototype.
  var newInstance = Object.create(func.prototype)
  // Call the function
  var result = func.call(newInstance, x, y, z),
  // If the result is a non-null object then use it otherwise just use the new instance.
  console.log(result && typeof result === 'object' ? result : newInstance);
  ```

  **6.** **ES6 Class syntax:**
  ES6 introduces class feature to create the objects

  ```javascript
  class Person {
    constructor(name) {
      this.name = name;
    }
  }
  var object = new Person("Mr. ABC");
  ```

  **7.** **Singleton pattern:**

  A Singleton is an object which can only be instantiated one time. Repeated calls to its constructor return the same instance and this way one can ensure that they don't accidentally create multiple instances.

  ```javascript
  var object = new (function () {
    this.name = "Mr. ABC";
  })();
  ```

- <h3 class="text-sm" id="client_storage">What are the different type of client side storages and its differences.</h3>
  There are 3 types of client side storages are available, namely Cookie, local storage and session storage.
  Each 3 type of client storages are more powerful in their feature.

    <div class="table-container">
    <div class="table-basic">
    <table>
    <th>Feature</th> <th>Cookie</th> <th>Local storage</th> <th>Session storage</th>
    <tr>
        <td>Availability</td>
        <td>Both server and client side</td>
        <td>Only at client side</td>
        <td>Only at client side</td>
    </tr>
    <tr>
        <td>Life time</td>
        <td>Available until as configured</td>
        <td>Until deleted or clear browser data</td>
        <td>Until closing the tab</td>
    </tr>
    <tr>
        <td>SSL</td>
        <td>Yes</td>
        <td>No</td>
        <td>No</td>
    </tr>
    <tr>
        <td>Maximum storage</td>
        <td>4 KB</td>
        <td>5 MB</td>
        <td>5 MB</td>
    </tr>
    </table>
    </div>
    </div>

- <h3  class="text-sm" id="windowObject">What is the new way of using window object in Javascript and provide example ?</h3>
  The globalThis property provides a standard way of accessing the global this value (and hence the global object itself) across environments. Unlike similar properties such as window and self , it's guaranteed to work in window and non-window contexts.

  ```javascript
  globalThis?.window.location.href;
  ```

- <h3 id="Amstrong" class="text-sm">How to check a number is Amstrong or not</h3>

  **What is amstrong number**</br>

  if the sum of its own digits raised to the power number of digits gives the number itself.

  ```javascript
  function amstrong(num) {
    let num1 = num;
    let sum = 0;
    while (num > 0) {
      rem = num % 10;
      sum = sum + Math.pow(rem, num1.toString().length);
      num = parseInt(num / 10);
    }
    if (sum == num1) {
      console.log(num + " is Armstrong");
    } else {
      console.log(num + " is not Armstrong");
    }
  }
  amstrong(153);
  amstrong(154);
  ```

  Result

  ```javascript
  "153 is Armstrong";
  "154 is not Armstrong";
  ```

  You might have doubt how 153 is Armstrong and why 154 is not.

  153 = (1* 1* 1)+(5 _ 5_ 5)+(3* 3* 3)  
  where:  
  (1* 1* 1)=1  
  (5* 5* 5)=125  
  (3* 3* 3)=27  
  So:  
  1+125+27=153

</div>


We covered most asked questions for Javascript interview and their answers

Javascript interview questions and answers


- ## **Introduction**
  ES6 or the ECMAScript 2015 is the major edition of ECMAScript language, which is introduced the year 2015. It introduced several new features, that can be useful for developers to fasten the development.

There are more than 10 feature introduced with the release 2015. I have listed the below the features and the details.

<div class="highlight">

<h3 class="font-bold" id="ES6">ES6 (ES2015)</h3>
<div class="list-square">

- [Let and const](#let-and-const)
- [Arrow functions](#Arrow-functions)
- [Default parameters](#Default)
- [Rest and spread operators](#rest-spread)
- [Template literal](#template-literal)
- [Destructoring assignment](#destructoring-assignment)
- [Classes and inheritance](#classes)
- [Promises for asynchronous programming](#promises)
- [Symbols for creating unique object keys](#symbols)
- [Iteraters and generators for iterrable objects](#iteraters-generators)
- [Sets and Maps for working with collections](#Sets-Maps)
</div>
</div>

<h3 class="font-bold" id="let-and-const">Let and const</h3>

The keywords <span class="highlight-small">`let and const`</span> are used to define variables and constants. Before ES6, only the `var` keyword was used to declare the variable and this has function scope. `var` will be hoisted.hoisted means the variable declared using `var` will move to the top and this variable will be available to use before declaring.

The `let` variables and `const` have block scope which is surrounded by curly-braces "{}" and cannot be used before declaration.

E.g:-

```javascript
sampleVariable = 10; // this variable used before declaring, but it is not going to throw the error
// this is restricted in let and const feature
var sampleVariable;
```

let and const example

E.g:-

```javascript
sampleVariable = 10; // this will throw, because the operation is not allowed before decalration
let sampleVariable;
```

The correct usage is given below.

```javascript
let sampleVariable;
sampleVariable = 10;
console.log(sampleVariable); //output 10
```

const - const variable must be assigned the value when declaring the variable itself and this cannot be changed.

```javascript
const sampleVariable;       // empty declaration is not allowed
const sampleVariable=10     // correct
console.log(sampleVariable) // output 10
```

[⬆ Back to Top](#ES6)

<h3 class="font-bold" id="Arrow-functions">Arrow functions</h3>

The arrow function is another feature of ES6. This is used to write the function shorter. Arrow functions are defined using the fat arrow (=>) notation.

```javascript
const add = (number1, number2) => number1 + number2;
```

[⬆ Back to Top](#ES6)

<h3 class="font-bold" id="Default">Default Parameters</h3>

A function is declared with some parameters and when the function is used somewhere in the program without providing the expected params, then the compiler will throw out the error with 'undefined'. So, to prevent this situation, ES6 is allowing the programmer to set the default value. This value will take place when the programmer missed to provide the parameter.

E.g:-

```javascript
const add = (number1, number2) => number1 + number2;
console.log(add()); // Error, input parameters are not provided

const add = (number1 = 10, number2 = 10) => number1 + number2;
console.log(add()); // result will be 20

const add = (number1 = 10, number2 = 10) => number1 + number2;
console.log(add(15, 15)); // result will be 30
```

[⬆ Back to Top](#ES6)

<h3 class="font-bold" id="rest-spread">Rest and Spread operators</h3>

The <span class="highlight-small">`rest`</span> operator allow us to accept indefinite number of parameter as an array to a function.

```javascript
function(param1, ...args)
{
   for(let i in args)
   {
     console.log(i)
   }

}
```

The <span class="highlight-small">`spread`</span> operators used to take deep copy of JS objects.

```javascript
let originalValues = ["a", "b", "c"];
let copyValues = [...originalValues];
console.log(copyValues);
```

[⬆ Back to Top](#ES6)

<h3 class="font-bold" id="template-literal">Template literals</h3>

The template Literals use back-ticks (``) rather than the quotes ("") to define a string

```javascript
let title = `template literals is using back-ticks`;
```

It is also allowing multiline declaration, so no more <span class="highlight-small">`+`</span> symbol to append the lines

```javascript
let title = `template 
             literals is 
             using back-ticks`;
```

It is also allowing the interpolation on strings.

```javascript
let topic = `Template literals`;
let ECMAVersion = `ES6`;
let statement = `The ${topic} is a feature of ${ECMAVersion}`;

console.log(statement);
// The Template literals is a feature of ES6
```

[⬆ Back to Top](#ES6)

<h3 class="font-bold" id="destructoring-assignment">Destructoring assignment</h3>

This is one of the good features of ES6. It enables us to extract the relevant details from an array or object.

```javascript
// Array destructoring
let RGB = ["RED", "BLUE", "GREEN"];
let [R, G, B] = RGB;
console.log(R); // RED
console.log(G); // GREEN
console.log(B); // BLUE
```

```javascript
// Object destructoring
const UserDetails = {
  name: { firstName: "John", lastName: "Jon" },
  phone: "8982928292",
  email: "johnjon@abc.com",
  country: "India",
};

const [name, email] = UserDetails;
```

[⬆ Back to Top](#ES6)

<h3 class="font-bold" id="classes">Classes and inheritance</h3>

The class was not used in earlier JavaScript, this class. This looks the same as other object-oriented languages. To inherit the class, for others, the <span class="highlight-small">`extend`</span> keyword is used.

```javascript
class EcmaScript
{
    constuctor(feature, version)
    {
        this.feature = feature
        this.version = version
    }
    const notes = () => console.log(the ${feature} is introduced in the version of ${version})

}

let obj = new EcmaScript('Class','ES6')
obj.notes()

// the Class is introduced in the version of ES6
```

[⬆ Back to Top](#ES6)

<h3 class="font-bold" id="promises">Promises for asynchronous programming</h3>

A promise function enables an asynchronous operation which will produce a result later either rejected or resolved.There are 3 states for a <span class="highlight-small">`promise`</span> operation. Those are pending, fulfilled and rejected.

**Pending -** The result of the operation is not computed, so this pending will be the initial state of a Promise.

**Fulfilled -** The operation is completed as expected.

**Rejected -** The operation did not go well as expected.

Syntax

```javascript
const Promise = new Promise((resolve,reject) => {....});
```

E.g:-

```javascript
let Promise = new Promise((resolve, reject) => {
  let result = fetch(url);
  if (result.data !== undefine) {
    resolve("Success");
  } else {
    reject("Failed");
  }
});
Promise.then((message) => {
  console.log("The data is restrived successfully");
}).catch((message) => {
  console.log("error");
});
```

[⬆ Back to Top](#ES6)

<h3 class="font-bold" id="symbols">Symbols for creating unique object keys</h3>

Symbols, newly added to ES6, are a primitive data-type that gives a unique value (Symbol value) as an output.

E.g:-

```javascript
let id = Symbol("id");

let emp={
    name:'abc'
    [id]:111
}
console.log(emp[id])
```

[⬆ Back to Top](#ES6)

<h3 class="font-bold" id="iteraters-generators">Iteraters and generators for iterrable objects</h3>

The iterators like the loop that we used earlier in the array. The same can be used in strings and objects with the help of <span class="highlight-small">`for..of`</span>

```javascript
const name = "devphobia";

for (const x of name) {
  console.log(x);
}

Result;
d;
e;
v;
p;
h;
o;
b;
i;
a;
```

The ES6 generator is a different kind of function that may be paused in the middle either one or many times and can be resumed later. When the standard function is called, the control rests with the called function until it returns, but the generator in ES6 allows the caller function to control the execution of a called function.

[⬆ Back to Top](#ES6)

<h3 class="font-bold" id="Sets-Maps">Sets and Maps for working with collections</h3>

A <span class="highlight-small">`Set`</span> is a data structure that allows you to create a collection of unique values. `Set` is the collections that deal with single objects or single values. It supports both primitive values and object references.

```javascript
let colors = new Set(['Green', 'Red', 'Orange', 'Yellow', 'Red']);
console.log(colors.size);
console.log(colors);

Result
4
Set { 'Green', 'Red', 'Orange', 'Yellow' }
let map = new Map([iterable]);
```

The <span class="highlight-small">`Map`</span> is a new collection type for JavaScript. It will hold any type of value like a key value pair. The map remembers the insertion order of keys.

```javascript
let map = new Map([iterable]);
```

<div class="learn-more-container">

**Learn more**

- <a href="/posts/Different-versions-of-ecma-script">Different versions of the ECMAscript</a>
</div>


ES6 or the ECMAScript 2015 is the major edition of ECMAScript language, it introduced several new features which are very special to the developers

What are ES6 features ?


**Introduction**

ECMA script is commonly used for clientside on the WWW and other server side scripting like nodeJS.

There are lot of Ecma script standards which is released in various years. On each release Ecma is introduced with very good features which is so helpful to developers to reduce the development time.
 I would like to list the features of those versions.   (ES6, ES7, ES8, ES9, ES10, ES11, ES12, ES13).

## **What is ECMA script**

ECMAScript is a scripting language specification on which JavaScript is based. ECMA International is in charge of standardization of ECMAScript
<div class="highlight">

### **ES6 (ES2015)**

- let and const
- arrow functions 
- default parameters
- rest and spread operators
- template literal 
- destructoring assignment
- classes and inheritance 
- promises for asynchronous programming
- symbols for creating unique object keys 
- iteraters and generators for iterrable objects
- Sets and Maps for working with collections
<a href="/posts/what-are-es6-features" class="see-more-right">See full details</a>
</div>

<div class="highlight">

### **ES7 (ES2016)**

- Array.prototype.includes()
</div>
<div class="highlight">

### **ES8 (ES2017)**

- Object.entries()
- Object.values()
- String.prototype.padStart()
- String.prototype.padEnd()
- async/await
</div>
<div class="highlight">

### **ES9 (ES2018)**

- Object.getOwnPropertyDescriptors()
- Spread syntax for objects
- Promise.prototype.finally()
</div>
<div class="highlight">

### **ES10 (ES2019)**

- Array.prototype.flat()
- Array prototype.flatMap()
- string.prototype.trimStart()
- string.prototype.trimEnd()
- Array.prototype.sort() (stable)
</div>
<div class="highlight">

### **ES11 (ES2020)**

- BigInt()
- Nullish Coalescing operator (??)
- Optional chaining operators(?.)
- Promise.allSettled()
</div>
<div class="highlight">

### **ES12 (ES2021)**

- String.prototype.replaceAll()
- Logical assignment operators (||=,&&=,?=)
</div>
<div class="highlight">

### **ES13 (ES2022)**

- Array.prototype.lastIndexOf()
- Object.hasOwn()
- at() for string and arrays
- Top level await()
</div>

<div class="learn-more-container">

**Learn more**

- <a href="/posts/what-are-es6-features">What are ES6 features ?</a>
</div>

what are the new features among the various versions of ECMA script and what is difference

Different versions of the ECMAscript

Most probably when you are working with Dialog box/Modal popup you might be caught this issue and now you are trying to get resolve this issue as soon as possible.

Some people won't use mouse when they working in computer instead of the mouse they were more depend on keyboard. This problem is stating for the such peoples. It is checking at least one tabble control from the given screen, if did not found any interactive element then you will get this error.

*Your focus-trap must have at least one container with at least one tabbable node in it at all times*


E.g :- consider you are a user who accessing a website, when working with that you are getting one dialog box and it does not have any button to close or any tabbable control. So after this you cannot go further and this webpage become unusable.

This is what the error is saying all about.

*Then how to fix this because developer who do not want this any of button in the dialogue box / Modal popup ?*

I can suggest two methods but this is just an trick.
<ul>
<ol>
1. You can set tabindex attribute to the any of element. 
    

```html
   <div tabindex="-1"></div>
```
but this is not a recommended way of fixing the issue, I  just explain you how we get ride of this problem.
</ol>
<ol>
2. Fix through CSS, this is most recommended way than first option.
I  just wrote a sample code, which contain button but we don't want to display the button in the screen, So just hide the button from the screen.

```html
<div>
<button class="btnclose">close</button>
</div>
```

```css
.btnclose
{
  position: absolute;
  left: -9999px;
  width: 20px;
}
```
</ol>

Hope this help for you.


Your focus-trap must have at least one container with at least one tabbable node in it at all times, when using dialog or modal in ReactJS or other front-end framework

[Solved] Your focus-trap must have at least one container with at least one tabbable node in it at all times

- ## **The most asked logical programs in the interview**

During the technical interview, these types of logical programs may ask you. These questions are common in any software programmer role.</br>
I have picked a bunch of logical programming interview question that are using javascript and it may help you to crack your interview.</br>
The following programs to be narrated.
<h2  class="font-bold" id=table-of-contents>Table of contents</h2>

- [1. Fibonacci](#1-fibonacci-series-using-recursive-function-in-javascript)
- [2. Prime Numbers](#2-find-the-prime-numbers-in-javascirpt)
- [3. Pyramid star pattern](#3-pyramid-star-pattern-in-javascript)
- [4. Amstrong numbers](#4-check-amstrong-number-using-javascriptbr)

- <h2 class="font-bold" id="1-fibonacci-series-using-recursive-function-in-javascript">1. Fibonacci series using recursive function in javascript</h2>
In this program snippet you going to learn how to write the Fibonacci series. To understand the logic you should need javascript knowledge. 
Also we going to learn or familiar the *recursive function*. </br>
A recursive function is a function in code that refers to itself for execution. Recursive functions can be simple or elaborate.</br>
**What is fibonacci?**</br>
A series of numbers in which each number ( Fibonacci number ) is the sum of the two preceding numbers. The simplest is the series 1, 1, 2, 3, 5, 8, etc.

Let's go to the program and will examine how it works!</br>
```javascript
// program to display fibonacci sequence using recursion
function fibonacci(num) {
    if(num < 2) {
        return num;
    }
    else {
        return fibonacci(num-1) + fibonacci(num - 2);
    }
}

// set the nth term
let nThTerms = 5;
if(nThTerms <=0) {
    console.log('Enter a positive integer.');
}
else {
    for(let i = 0; i < nThTerms; i++) {
        console.log(fibonacci(i));
    }
}
```
Result

```javascript
Enter the number of terms: 5
0
1
1
2
3
```
Hope the program is helped to understand the logic, we go to next coding example.</br>

**[⬆ Back to Top](#table-of-contents)**

- <h2 class="font-bold" id="2-find-the-prime-numbers-in-javascirpt"> 2. Find the prime numbers in javascirpt</h2>
let's do the coding for finding out the prime number.</br>
**What is prime number**</br>
A prime number is a number that is divisible by 1 and itself only. 
E.g.:- *prime numbers are: 2, 3, 5, 7, 11, 13, 17...*</br>
Basically, when you doing division to any number, if the remainder is 0 then it is a prime number otherwise it is not.</br>
```javascript
const primeNumber=number % i == 0
```
```javascript
function isPrimeNumber(num) {
  let isPrime = true;
  if (num == 1) {
    return true;
  } else {
    for (let i = 2; i < num; i++) {
      if (num % i === 0) {
        isPrime = false;
        break;
      }
    }
    if (isPrime) {
      console.log(isPrime + " is a prime number");
    } else {
      console.log(isPrime + " is not a prime number");
    }
  }
}
isPrimeNumber(10)
isPrimeNumber(11)
```
Result</br>
```javscript
10 is a prime number
11 is a prime number
```

if you want to check the series of prime number then use for loop and use the isPrimeNumber function and pass the number.</br>
```javascript
 for (let i = 2; i < 10; i++) 
   {
     isPrimeNumber(i)
   }
```
Result
```javscript
"2 is a prime number"
"3 is a prime number"
"4 is not a prime number"
"5 is a prime number"
"6 is not a prime number"
"7 is a prime number"
"8 is not a prime number"
"9 is not a prime number"
```
 **[⬆ Back to Top](#table-of-contents)**

- <h2 class="font-bold" id="3-pyramid-star-pattern-in-javascript"> 3. Pyramid star pattern in javascript**</h2>

The pyramid pattern is very popular star pattern, you can see the example below</br>
```javascript
    *
   ***
  *****
 *******
*********
```
To achieve this pattern use the below code in your program.</br>
```JAVASCRIPT
let n = 5;
let string = "";

for (let i = 1; i <= n; i++) {
  
  for (let j = 1; j <= n - i; j++) {
    string += " ";
  }
  
  for (let k = 0; k < 2 * i - 1; k++) {
    string += "*";
  }
  string += "\n";
}
console.log(string);
```
 
 **[⬆ Back to Top](#table-of-contents)**
- <h2 class="font-bold" id="4-check-amstrong-number-using-javascriptbr"> 4. Check amstrong number using javascript</h2>
In this program, you will learn to write a program for finding out the given number is amstrong or not.</br>
**What is amstrong number**</br>
if the sum of its own digits raised to the power number of digits gives the number itself.
```javascript
function amstrong(num) {
  let num1 = num;
  let sum = 0;
  while (num > 0) {
    rem = num % 10;
    sum = sum + Math.pow(rem, num1.toString().length);
    num = parseInt(num / 10);
  }
  if (sum == num1) {
    console.log(num+" is Armstrong");
  } else {
    console.log(num+" is not Armstrong");
  }
}
amstrong(153);
amstrong(154);
```
Result
```javascript
'153 is Armstrong'
'154 is not Armstrong'
```
You might have doubt how 153 is Armstrong and why 154 is not.

153 = (1*1*1)+(5*5*5)+(3*3*3)  
where:  
(1*1*1)=1  
(5*5*5)=125  
(3*3*3)=27  
So:  
1+125+27=153  

 **[⬆ Back to Top](#table-of-contents)**


It is basicall demonstrating how to find the fibanocci, amstrong, prime numbers and pyramid pattern using javascript.

Back to basics : Top interview logical programs in javascript


There are few development tips for Javascript array operation, these tips will reduce your development time.

## 1. Initialize an array with default value

If you are working with fixed length of array and you need to initialize it with fixed value.
We have traditional way of initialzation but also we have alterative and it is a shortcut method.

**Initialize one dimensional array**
If you want to intialize one dimensional array of specified length and apply the default values.

```javascript
const oneArray = Array(6).fill('xxx');  
//["xxx", "xxx", "xxx", "xxx", "xxx", "xxx"]
```
**Initialize Multi-dimentsional array**

If you want to intialize multi-dimensional array of specified length and apply the default values.

```javascript
const multiArray = Array(6).fill(0).map(() => Array(5).fill('xxx'));
// [["xxx", "xxx", "xxx", "xxx", "xxx"], ["xxx", "xxx", "xxx", "xxx", "xxx"], ["xxx", "xxx", "xxx", "xxx", "xxx"], ["xxx", "xxx", "xxx", "xxx", "xxx"], ["xxx", "xxx", "xxx", "xxx", "xxx"], ["xxx", "xxx", "xxx", "xxx", "xxx"]]

```

## 2. Find Sum, Maximum and Minimum of an array.

It is a very tricky and this is a common question in most of interviews. 
To solve this we can use javascript standard function "reduce()".

*The reduce() method executes a reducer function for array element.*

```javascript
const sampleArray  = [51,14,17,28,39,32];
```

**Sum**
```javascript
sampleArray.reduce((a,b) => a+b);

//Result: 181
```

**Finding Maximum**
```javascript
sampleArray.reduce((a,b) => a > b ? a : b);  Math.max(...sampleArray)
//Result: 51
```

**Finding Minimum**
```javascript
sampleArray.reduce((a,b) => a < b ? a : b);  Math.min(...sampleArray)
//Result: 14
```

## 3. Empty an array

If you want to clear the values in the array variable then set the length equal to Zero.

```javascript
let array = ["J", "A", "V", "A", "S", "C", "R", "I", "P", "T"]
array.length = 0 
console.log(array)  // []
```

## 4. Split the word into an Array

We can split the word by given identifier, this is can be achieved by using <code>split()</code>

*Eg :- 1*
```javascript
let array = "JAVASCRIPT"
console.log(array.split(""))
Result //["J", "A", "V", "A", "S", "C", "R", "I", "P", "T"]
```
*Eg :- 2*
```javascript
let array = "JAVA-SCRIPT"
console.log(array.split("-"))
Result //["JAVA", "SCRIPT"]
```
the above are the two example of split function on different scenario.

## 5. Combine two or more arrays

If you want to Merge or Combine two or more arrays then use the <code>Spread Operator</code> or <code>Concat()</code>

<u>using Spread or Extension operator</u>
```javascript
const start = [1, 2] 
const end = [5, 6, 7] 
const result = [9, ...start, ...end, 8] // [9, 1, 2, 5, 6, 7 , 8]
```
<u>using concat method</u>
```javascript
const start = [1, 2, 3, 4] 
const end = [5, 6, 7] 
start.concat(end); // [1, 2, 3, 4, 5, 6, 7]
```


There are few development tips for Javascript array operation, these tips will reduce your development time.

Some useful techniques for array operation using javascript

## How to know whether we are using mobile or desktop
This question is very usual, to get solve this issue by using the browser property **`user agent`** to check whether the device type. This is an inbuild property of every browser, which is used to do many customization on device specification.

```javascript
The code `navigator.userAgent` will get the device type. 
```

The working code is given below.

1. This method is using regex to check the device type

```javascript
window.mobilecheck = function () {
  var mobileCheck = false;
  (function (a) {
    if (
      /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(
        a
      ) ||
      /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
        a.substr(0, 4)
      )
    )
      mobileCheck = true;
  })(navigator.userAgent || navigator.vendor || window.opera);
  return mobileCheck;
};
```
2. if you don't want to use the regex or without regex how to determine the device type is 
```javascript
function detectmob() {
  if (
    navigator.userAgent.match(/Android/i) ||
    navigator.userAgent.match(/webOS/i) ||
    navigator.userAgent.match(/iPhone/i) ||
    navigator.userAgent.match(/iPad/i) ||
    navigator.userAgent.match(/iPod/i) ||
    navigator.userAgent.match(/BlackBerry/i) ||
    navigator.userAgent.match(/Windows Phone/i)
  ) {
    return true;
  } else {
    return false;
  }
}
```

I hope this code is worked for you. 

This question is very usual, to get solve this issue by using the browser property user agent to check whether the device type.

How to know whether we are using mobile or desktop


Javascript is not a class based object-oriented language. But it still has ways of using object oriented programming. (object oriented javascript)

There are many ways to create objects in javascript as below

**1.** **Object constructor:**

The traditional way to create an empty object is using the Object constructor. But currently this approach is not recommended.

```javascript
var object = new Object();
```

**2.** **Object's create method:**

The create method of Object creates a new object by passing the prototype of object as a parameter

```javascript
var object = Object.create(null);
```

**3.** **Object literal syntax:**

The object literal syntax (or object initializer), is a comma-separated set of name-value pairs wrapped in curly braces.

```javascript
      var object = {
           name: "Mr. ABC"
           age: 34
      };
      Object literal property values can be of any data type, including array, function, and nested object.
```

**Note:** This is an easiest way to create an object

**4.** **Function constructor:**
Create any function and apply the new operator to create object instances,

```javascript
function Person(name) {
  this.name = name;
  this.age = 21;
}
var object = new Person("Mr. ABC");
```

**5.** **Function constructor with prototype:**

This is similar to function constructor but it uses prototype for their properties and methods,

```javascript
function Person() {}
Person.prototype.name = "Mr. ABC";
var object = new Person();
```

This is equivalent to an instance created with an object create method with a function prototype and then call that function with an instance and parameters as arguments.

```javascript
      function func {};
      new func(x, y, z);
```

**(OR)**

```javascript
      // Create a new instance using function prototype.
      var newInstance = Object.create(func.prototype)
      // Call the function
      var result = func.call(newInstance, x, y, z),
      // If the result is a non-null object then use it otherwise just use the new instance.
      console.log(result && typeof result === 'object' ? result : newInstance);
```

**6.** **ES6 Class syntax:**
ES6 introduces class feature to create the objects

```javascript
class Person {
  constructor(name) {
    this.name = name;
  }
}
var object = new Person("Mr. ABC");
```

**7.** **Singleton pattern:**

A Singleton is an object which can only be instantiated one time. Repeated calls to its constructor return the same instance and this way one can ensure that they don't accidentally create multiple instances.

```javascript
var object = new (function () {
  this.name = "Mr. ABC";
})();
```


What are the possible ways to create objects in JavaScript,  The traditional way to create an empty object is using the Object constructor. But currently this approach is not recommended.

More Stories related to 'javascript'

Also read the similar topics