
**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

More Stories related to 'interview'

Also read the similar topics