123-Essential-JavaScript-Interview-Question/index.html at gh-pages · unsignedcpp/123-Essential-JavaScript-Interview-Question

687 lines (503 loc) · 53.2 KB
<!doctype html>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <title>101-javascript-interview-question by nishant8BITS</title>
    <link rel="stylesheet" href="stylesheets/styles.css">
    <link rel="stylesheet" href="stylesheets/github-light.css">
    <script src="javascripts/scale.fix.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <div class="wrapper">
      <header>
        <h1 class="header">101-javascript-interview-question</h1>
        <ul>
          <li><a class="buttons github" href="https://github.com/nishant8BITS/101-JavaScript-Interview-Question">View On GitHub</a></li>
          <li><a class="buttons github" href="https://github.com/nishant8BITS">Follow @GitHub</a></a></li>
        </ul>
        <a href="https://www.codementor.io/nihantanu?utm_source=github&utm_medium=button&utm_term=nihantanu&utm_campaign=github"><img src="https://cdn.codementor.io/badges/i_am_a_codementor_light.svg" alt="I am a codementor" style="max-width:100%"/></a>
        <p class="header">This project is maintained by <a class="header name" href="https://github.com/nishant8BITS">nishant8BITS</a> and <a class="header name" href="https://github.com/suryasingh">surya singh</a></p>
      </header>
      <section>
        <h5>
<a id="1-difference-between-undefined-and-not-defined-in-javascript" class="anchor" href="#1-difference-between-undefined-and-not-defined-in-javascript" aria-hidden="true"><span class="octicon octicon-link"></span></a>1. Difference between <code>undefined</code> and <code>not defined</code> in JavaScript</h5>
<blockquote>
<p>In JavaScript if you try to use variable that doesn't exist and has not been declared, then JavaScript will throw an error <code>var name is not defined</code> and script will stop execution there after. But If you use <code>typeof undeclared_variable</code> then it will return <code>undefined</code>.</p>
</blockquote>
<p>Before starting further discussion let understand the difference between deceleration and definition.</p>
<p><code>var x</code> is a declaration because you are not defining what value it holds yet, but you are declaring it's existence and the need of memory allocation. </p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">&gt;</span> <span class="pl-k">var</span> x; <span class="pl-c">// declaring x</span>
<span class="pl-k">&gt;</span> <span class="pl-en">console</span><span class="pl-c1">.log</span>(x); <span class="pl-c">//output: undefined </span></pre></div>
<p><code>var x = 1</code> is both declaration and definition (also we can say we are doing initialisation), Here declaration and assignment of value happen inline for variable x, In JavaScript every variable declaration and function declaration brings to the top of it's current scope in which It's declared then assignment happen in order this term is called <code>hoisting</code>. </p>
<blockquote>
<p>A variable that is declare but not define and when we try to access it, It will result <code>undefined</code>.</p>
</blockquote>
<div class="highlight highlight-source-js"><pre><span class="pl-k">var</span> x; <span class="pl-c">// Declaration</span>
<span class="pl-k">if</span>(<span class="pl-k">typeof</span> x <span class="pl-k">===</span> <span class="pl-s"><span class="pl-pds">'</span>undefined<span class="pl-pds">'</span></span>) <span class="pl-c">// Will return true</span>
</pre></div>
<blockquote>
<p>A variable that is neither declare nor defined, when we try to reference such variable then It result <code>not defined</code>.</p>
</blockquote>
<div class="highlight highlight-source-js"><pre><span class="pl-k">&gt;</span> <span class="pl-en">console</span><span class="pl-c1">.log</span>(y);  <span class="pl-c">// Output: ReferenceError: y is not defined</span></pre></div>
<a id="ref-link" class="anchor" href="#ref-link" aria-hidden="true"><span class="octicon octicon-link"></span></a>Ref Link:</h6>
<p><a href="http://stackoverflow.com/questions/20822022/javascript-variable-definition-declaration">http://stackoverflow.com/questions/20822022/javascript-variable-definition-declaration</a></p>
<a id="2-what-will-be-the-output-of-below-code-" class="anchor" href="#2-what-will-be-the-output-of-below-code-" aria-hidden="true"><span class="octicon octicon-link"></span></a>2. What will be the output of below code ?</h5>
<div class="highlight highlight-source-js"><pre> <span class="pl-k">var</span> y <span class="pl-k">=</span> <span class="pl-c1">1</span>;
  <span class="pl-k">if</span> (<span class="pl-k">function</span> <span class="pl-en">f</span>(){}) {
    y <span class="pl-k">+=</span> <span class="pl-k">typeof</span> f;
  <span class="pl-en">console</span><span class="pl-c1">.log</span>(y);</pre></div>
<blockquote>
<p>Above code would give output <code>1undefined</code>. If condition statement evaluate using <code>eval</code> so <code>eval(function f(){})</code> which return <code>function f(){}</code> which is true so inside if statement code execute. <code>typeof f</code> return undefined because if statement code execute at run time, so statement inside <code>if</code> condition evaluated at run time.  </p>
</blockquote>
<div class="highlight highlight-source-js"><pre> <span class="pl-k">var</span> k <span class="pl-k">=</span> <span class="pl-c1">1</span>;
  <span class="pl-k">if</span> (<span class="pl-c1">1</span>) {
    <span class="pl-c1">eval</span>(<span class="pl-k">function</span> <span class="pl-en">foo</span>(){});
    k <span class="pl-k">+=</span> <span class="pl-k">typeof</span> foo;
  <span class="pl-en">console</span><span class="pl-c1">.log</span>(k); </pre></div>
<p>Above code will also output <code>1undefined</code>.</p>
<div class="highlight highlight-source-js"><pre> <span class="pl-k">var</span> k <span class="pl-k">=</span> <span class="pl-c1">1</span>;
  <span class="pl-k">if</span> (<span class="pl-c1">1</span>) {
    <span class="pl-k">function</span> <span class="pl-en">foo</span>(){};
    k <span class="pl-k">+=</span> <span class="pl-k">typeof</span> foo;
  <span class="pl-en">console</span><span class="pl-c1">.log</span>(k); <span class="pl-c">// output 1function</span></pre></div>
<a id="3-what-is-drawback-of-creating-true-private-in-javascript" class="anchor" href="#3-what-is-drawback-of-creating-true-private-in-javascript" aria-hidden="true"><span class="octicon octicon-link"></span></a>3. What is drawback of creating true private in JavaScript?</h5>
<blockquote>
<p>One of the drawback of creating true private method in JavaScript is that they are very memory inefficient because a new copy of the method would be created for each instance.</p>
</blockquote>
<div class="highlight highlight-source-js"><pre><span class="pl-k">var</span> <span class="pl-en">Employee</span> <span class="pl-k">=</span> <span class="pl-k">function</span> (<span class="pl-smi">name</span>, <span class="pl-smi">company</span>, <span class="pl-smi">salary</span>) {
    <span class="pl-v">this</span>.<span class="pl-c1">name</span> <span class="pl-k">=</span> name <span class="pl-k">||</span> <span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span>;       <span class="pl-c">//Public attribute default value is null</span>
    <span class="pl-v">this</span>.company <span class="pl-k">=</span> company <span class="pl-k">||</span> <span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span>; <span class="pl-c">//Public attribute default value is null</span>
    <span class="pl-v">this</span>.salary <span class="pl-k">=</span> salary <span class="pl-k">||</span> <span class="pl-c1">5000</span>; <span class="pl-c">//Public attribute default value is null</span>
    <span class="pl-c">// Private method</span>
    <span class="pl-k">var</span> <span class="pl-en">increaseSlary</span> <span class="pl-k">=</span> <span class="pl-k">function</span> () {
        <span class="pl-v">this</span>.salary <span class="pl-k">=</span> <span class="pl-v">this</span>.salary <span class="pl-k">+</span> <span class="pl-c1">1000</span>;
    <span class="pl-c">// Public method</span>
    <span class="pl-c1">this</span>.<span class="pl-en">dispalyIncreasedSalary</span> <span class="pl-k">=</span> <span class="pl-k">function</span>() {
        increaseSlary();
        <span class="pl-en">console</span><span class="pl-c1">.log</span>(<span class="pl-v">this</span>.salary);
<span class="pl-c">// Create Employee class object</span>
<span class="pl-k">var</span> emp1 <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">Employee</span>(<span class="pl-s"><span class="pl-pds">"</span>John<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">"</span>Pluto<span class="pl-pds">"</span></span>,<span class="pl-c1">3000</span>);
<span class="pl-c">// Create Employee class object</span>
<span class="pl-k">var</span> emp2 <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">Employee</span>(<span class="pl-s"><span class="pl-pds">"</span>Merry<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">"</span>Pluto<span class="pl-pds">"</span></span>,<span class="pl-c1">2000</span>);
<span class="pl-c">// Create Employee class object</span>
<span class="pl-k">var</span> emp3 <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">Employee</span>(<span class="pl-s"><span class="pl-pds">"</span>Ren<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">"</span>Pluto<span class="pl-pds">"</span></span>,<span class="pl-c1">2500</span>);</pre></div>
<p>Here each instance variable <code>emp1</code>, <code>emp2</code>, <code>emp3</code> has own copy of increaseSalary private method.</p>
<p>So as recommendation don’t go for private method unless it’s necessary.</p>
<a id="4what-is-closure-in-javascript-provide-an-example-" class="anchor" href="#4what-is-closure-in-javascript-provide-an-example-" aria-hidden="true"><span class="octicon octicon-link"></span></a>4.What is “closure” in javascript? Provide an example ?</h5>
<blockquote>
<p>A closure is a function defined inside another function (called parent function) and has access to variable which is declared and defined in parent function scope.</p>
</blockquote>
<p>The closure has access to variable in three scopes:</p>
<li>Variable declared in his own scope </li>
<li>Variable declared in parent function scope </li>
<li>Variable declared in global namespace</li>
<div class="highlight highlight-source-js"><pre><span class="pl-k">var</span> globalVar <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>abc<span class="pl-pds">"</span></span>; 
<span class="pl-c">// Parent self invoking function </span>
(<span class="pl-k">function</span> <span class="pl-en">outerFunction</span> (<span class="pl-smi">outerArg</span>) { <span class="pl-c">// begin of scope outerFunction</span>
    <span class="pl-c">// Variable declared in outerFunction function scope </span>
    <span class="pl-k">var</span> outerFuncVar <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">'</span>x<span class="pl-pds">'</span></span>;    
    <span class="pl-c">// Closure self-invoking function </span>
    (<span class="pl-k">function</span> <span class="pl-en">innerFunction</span> (<span class="pl-smi">innerArg</span>) { <span class="pl-c">// begin of scope innerFunction</span>
        <span class="pl-c">// variable declared in innerFunction function scope</span>
        <span class="pl-k">var</span> innerFuncVar <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>y<span class="pl-pds">"</span></span>; 
        <span class="pl-en">console</span><span class="pl-c1">.log</span>(          
            <span class="pl-s"><span class="pl-pds">"</span>outerArg = <span class="pl-pds">"</span></span> <span class="pl-k">+</span> outerArg <span class="pl-k">+</span> <span class="pl-s"><span class="pl-pds">"</span><span class="pl-cce">\n</span><span class="pl-pds">"</span></span> <span class="pl-k">+</span>
            <span class="pl-s"><span class="pl-pds">"</span>outerFuncVar = <span class="pl-pds">"</span></span> <span class="pl-k">+</span> outerFuncVar <span class="pl-k">+</span> <span class="pl-s"><span class="pl-pds">"</span><span class="pl-cce">\n</span><span class="pl-pds">"</span></span> <span class="pl-k">+</span>
            <span class="pl-s"><span class="pl-pds">"</span>innerArg = <span class="pl-pds">"</span></span> <span class="pl-k">+</span> innerArg <span class="pl-k">+</span> <span class="pl-s"><span class="pl-pds">"</span><span class="pl-cce">\n</span><span class="pl-pds">"</span></span> <span class="pl-k">+</span>
            <span class="pl-s"><span class="pl-pds">"</span>innerFuncVar = <span class="pl-pds">"</span></span> <span class="pl-k">+</span> innerFuncVar <span class="pl-k">+</span> <span class="pl-s"><span class="pl-pds">"</span><span class="pl-cce">\n</span><span class="pl-pds">"</span></span> <span class="pl-k">+</span>
            <span class="pl-s"><span class="pl-pds">"</span>globalVar = <span class="pl-pds">"</span></span> <span class="pl-k">+</span> globalVar);
    }<span class="pl-c">// end of scope innerFunction)(5); // Pass 5 as parameter </span>
}<span class="pl-c">// end of scope outerFunction )(7); // Pass 7 as parameter </span></pre></div>
<p><code>innerFunction</code> is closure which is defined inside <code>outerFunction</code> and has access to all variable which is declared and defined in outerFunction scope. In addition to this function defined inside function as closure has access to variable which is declared in <code>global namespace</code>.</p>
<p>Output of above code would be:</p>
<div class="highlight highlight-source-js"><pre>outerArg <span class="pl-k">=</span> <span class="pl-c1">7</span>
outerFuncVar <span class="pl-k">=</span> x
innerArg <span class="pl-k">=</span> <span class="pl-c1">5</span>
innerFuncVar <span class="pl-k">=</span> y
globalVar <span class="pl-k">=</span> abc
</pre></div>
<a id="5-write-a-mul-function-which-will-properly-when-invoked-as-below-syntax" class="anchor" href="#5-write-a-mul-function-which-will-properly-when-invoked-as-below-syntax" aria-hidden="true"><span class="octicon octicon-link"></span></a>5. Write a mul function which will properly when invoked as below syntax.</h5>
<div class="highlight highlight-source-js"><pre>  <span class="pl-en">console</span><span class="pl-c1">.log</span>(mul(<span class="pl-c1">2</span>)(<span class="pl-c1">3</span>)(<span class="pl-c1">4</span>)); <span class="pl-c">// output : 24 </span>
  <span class="pl-en">console</span><span class="pl-c1">.log</span>(mul(<span class="pl-c1">4</span>)(<span class="pl-c1">3</span>)(<span class="pl-c1">4</span>)); <span class="pl-c">// output : 48</span></pre></div>
<blockquote>
<p>Below is code followed by an explanation how it works:</p>
</blockquote>
<div class="highlight highlight-source-js"><pre><span class="pl-k">function</span> <span class="pl-en">mul</span> (<span class="pl-smi">x</span>) {
    <span class="pl-k">return</span> <span class="pl-k">function</span> (<span class="pl-smi">y</span>) { <span class="pl-c">// anonymous function </span>
        <span class="pl-k">return</span> <span class="pl-k">function</span> (<span class="pl-smi">z</span>) { <span class="pl-c">// anonymous function </span>
            <span class="pl-k">return</span> x <span class="pl-k">*</span> y <span class="pl-k">*</span> z; 
}</pre></div>
<p>Here <code>mul</code> function accept first argument and return anonymous function which take second parameter and return anonymous function which take third parameter and return multiplication of arguments which is being passed in successive </p>
<p>In Javascript function defined inside has access to outer function variable and function is first class object so it can be returned by function as well and passed as argument in another function.</p>
<li>A function is an instance of the Object type</li>
<li>A function can have properties and has a link back to its constructor method</li>
<li>Function can be stored as variable </li>
<li>Function can be pass as a parameter to another function</li>
<li>Function can be return from function</li>
<a id="6-how-to-empty-an-array-in-javascript-" class="anchor" href="#6-how-to-empty-an-array-in-javascript-" aria-hidden="true"><span class="octicon octicon-link"></span></a>6. How to empty an array in JavaScript ?</h4>
<p>For instance,</p>
<div class="highlight highlight-source-js"><pre> <span class="pl-k">var</span> arrayList <span class="pl-k">=</span>  [<span class="pl-s"><span class="pl-pds">'</span>a<span class="pl-pds">'</span></span>,<span class="pl-s"><span class="pl-pds">'</span>b<span class="pl-pds">'</span></span>,<span class="pl-s"><span class="pl-pds">'</span>c<span class="pl-pds">'</span></span>,<span class="pl-s"><span class="pl-pds">'</span>d<span class="pl-pds">'</span></span>,<span class="pl-s"><span class="pl-pds">'</span>e<span class="pl-pds">'</span></span>,<span class="pl-s"><span class="pl-pds">'</span>f<span class="pl-pds">'</span></span>];</pre></div>
<p>How can we empty above array ?</p>
<blockquote>
<p>There are couple of ways by which we can empty an array, So let's discuss all the possible way by which we can empty an array.</p>
</blockquote>
<a id="method-1" class="anchor" href="#method-1" aria-hidden="true"><span class="octicon octicon-link"></span></a>Method 1</h4>
<div class="highlight highlight-source-js"><pre>arrayList <span class="pl-k">=</span> []</pre></div>
<p>Above code will set the variable <code>arrayList</code> to a new empty array. This is recommended if you don't have <strong>references to the original array</strong> <code>arrayList</code> anywhere else because It will actually create 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 reference the array by it's original variable <code>arrayList</code>.</p>
<p>For Instance,</p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">var</span> arrayList <span class="pl-k">=</span> [<span class="pl-s"><span class="pl-pds">'</span>a<span class="pl-pds">'</span></span>,<span class="pl-s"><span class="pl-pds">'</span>b<span class="pl-pds">'</span></span>,<span class="pl-s"><span class="pl-pds">'</span>c<span class="pl-pds">'</span></span>,<span class="pl-s"><span class="pl-pds">'</span>d<span class="pl-pds">'</span></span>,<span class="pl-s"><span class="pl-pds">'</span>e<span class="pl-pds">'</span></span>,<span class="pl-s"><span class="pl-pds">'</span>f<span class="pl-pds">'</span></span>]; <span class="pl-c">// Created array </span>
<span class="pl-k">var</span> anotherArrayList <span class="pl-k">=</span> arrayList;  <span class="pl-c">// Referenced arrayList by another variable </span>
arrayList <span class="pl-k">=</span> []; <span class="pl-c">// Empty the array </span>
<span class="pl-en">console</span><span class="pl-c1">.log</span>(anotherArrayList); <span class="pl-c">// Output ['a','b','c','d','e','f']</span></pre></div>
<a id="method-2" class="anchor" href="#method-2" aria-hidden="true"><span class="octicon octicon-link"></span></a>Method 2</h4>
<div class="highlight highlight-source-js"><pre>arrayList.<span class="pl-c1">length</span> <span class="pl-k">=</span> <span class="pl-c1">0</span>;</pre></div>
<p>Above code will clear the existing array by setting it's 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 <code>arrayList</code>.</p>
<p>For Instance,</p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">var</span> arrayList <span class="pl-k">=</span> [<span class="pl-s"><span class="pl-pds">'</span>a<span class="pl-pds">'</span></span>,<span class="pl-s"><span class="pl-pds">'</span>b<span class="pl-pds">'</span></span>,<span class="pl-s"><span class="pl-pds">'</span>c<span class="pl-pds">'</span></span>,<span class="pl-s"><span class="pl-pds">'</span>d<span class="pl-pds">'</span></span>,<span class="pl-s"><span class="pl-pds">'</span>e<span class="pl-pds">'</span></span>,<span class="pl-s"><span class="pl-pds">'</span>f<span class="pl-pds">'</span></span>]; <span class="pl-c">// Created array </span>
<span class="pl-k">var</span> anotherArrayList <span class="pl-k">=</span> arrayList;  <span class="pl-c">// Referenced arrayList by another variable </span>
arrayList.<span class="pl-c1">length</span> <span class="pl-k">=</span> <span class="pl-c1">0</span>; <span class="pl-c">// Empty the array by setting length to 0</span>
<span class="pl-en">console</span><span class="pl-c1">.log</span>(anotherArrayList); <span class="pl-c">// Output []</span></pre></div>
<a id="method-3" class="anchor" href="#method-3" aria-hidden="true"><span class="octicon octicon-link"></span></a>Method 3</h4>
<div class="highlight highlight-source-js"><pre>arrayList.<span class="pl-c1">splice</span>(<span class="pl-c1">0</span>, arrayList.<span class="pl-c1">length</span>);</pre></div>
<p>Above implementation will also work perfectly. This way of empty the array will also update all the references of original array.</p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">var</span> arrayList <span class="pl-k">=</span> [<span class="pl-s"><span class="pl-pds">'</span>a<span class="pl-pds">'</span></span>,<span class="pl-s"><span class="pl-pds">'</span>b<span class="pl-pds">'</span></span>,<span class="pl-s"><span class="pl-pds">'</span>c<span class="pl-pds">'</span></span>,<span class="pl-s"><span class="pl-pds">'</span>d<span class="pl-pds">'</span></span>,<span class="pl-s"><span class="pl-pds">'</span>e<span class="pl-pds">'</span></span>,<span class="pl-s"><span class="pl-pds">'</span>f<span class="pl-pds">'</span></span>]; <span class="pl-c">// Created array </span>
<span class="pl-k">var</span> anotherArrayList <span class="pl-k">=</span> arrayList;  <span class="pl-c">// Referenced arrayList by another variable </span>
arrayList.<span class="pl-c1">splice</span>(<span class="pl-c1">0</span>, arrayList.<span class="pl-c1">length</span>); <span class="pl-c">// Empty the array by setting length to 0</span>
<span class="pl-en">console</span><span class="pl-c1">.log</span>(anotherArrayList); <span class="pl-c">// Output []</span></pre></div>
<a id="method-4" class="anchor" href="#method-4" aria-hidden="true"><span class="octicon octicon-link"></span></a>Method 4</h4>
<div class="highlight highlight-source-js"><pre><span class="pl-k">while</span>(arrayList.<span class="pl-c1">length</span>){
    arrayList.<span class="pl-c1">pop</span>();
}</pre></div>
<p>Above implementation can also empty the array. But not recommended to use often. </p>
<a id="7-how-to-check-if-an-object-is-an-array-or-not-" class="anchor" href="#7-how-to-check-if-an-object-is-an-array-or-not-" aria-hidden="true"><span class="octicon octicon-link"></span></a>7. How to check if an object is an array or not ?</h4>
<blockquote>
<p>The best way to find whether a object is instance of a particular class or not using <code>toString</code> method from <code>Object.prototype</code></p>
</blockquote>
<div class="highlight highlight-source-js"><pre>  <span class="pl-k">var</span> arrayList <span class="pl-k">=</span> [<span class="pl-c1">1</span>,<span class="pl-c1">2</span>,<span class="pl-c1">3</span>];</pre></div>
<p>One of the best use cases of type checking of object is when we do method overloading in JavaScript. For understanding this let sat we have a method called <code>greet</code> which take one single string and also list of string, so making our greet method workable in both situation we need to know what kind of parameter is being passed, is it single value or list of value ?</p>
<div class="highlight highlight-source-js"><pre> <span class="pl-k">function</span> <span class="pl-en">greet</span>(<span class="pl-smi">param</span>){
    <span class="pl-k">if</span>(){ <span class="pl-c">// here have to check whether param is array or not </span>
    }<span class="pl-k">else</span>{
 }</pre></div>
<p>However in above implementation it might not necessary to check type for array, we can check for single value string and put array logic code in else block, let see below code for the same.</p>
<div class="highlight highlight-source-js"><pre> <span class="pl-k">function</span> <span class="pl-en">greet</span>(<span class="pl-smi">param</span>){
    <span class="pl-k">if</span>(<span class="pl-k">typeof</span> param <span class="pl-k">===</span> <span class="pl-s"><span class="pl-pds">'</span>string<span class="pl-pds">'</span></span>){ 
    }<span class="pl-k">else</span>{
      <span class="pl-c">// If param is of type array then this block of code would execute</span>
 }</pre></div>
<p>Now It's fine we can go with above two implementation, but when we have situation like parameter can be <code>single value</code>, <code>array</code>, and <code>object</code> type then we will be in trouble. </p>
<p>Coming back to checking type of object, As we mentioned that we can use 
<code>Object.prototype.toString</code> </p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">if</span>( <span class="pl-c1">Object</span>.<span class="pl-c1">prototype</span>.toString.<span class="pl-c1">call</span>( arrayList ) <span class="pl-k">===</span> <span class="pl-s"><span class="pl-pds">'</span>[object Array]<span class="pl-pds">'</span></span> ) {
    <span class="pl-en">console</span><span class="pl-c1">.log</span>(<span class="pl-s"><span class="pl-pds">'</span>Array!<span class="pl-pds">'</span></span>);
}</pre></div>
<p>If you are using <code>jQuery</code> then you can also used jQuery <code>isArray</code> method:</p>
<div class="highlight highlight-source-js"><pre>  <span class="pl-k">if</span>($.isArray(arrayList)){
    <span class="pl-en">console</span><span class="pl-c1">.log</span>(<span class="pl-s"><span class="pl-pds">'</span>Array<span class="pl-pds">'</span></span>);
  }<span class="pl-k">else</span>{
    <span class="pl-en">console</span><span class="pl-c1">.log</span>(<span class="pl-s"><span class="pl-pds">'</span>Not an array<span class="pl-pds">'</span></span>);
  }</pre></div>
<p>FYI jQuery uses <code>Object.prototype.toString.call</code> internally to check whether object is an array or not.</p>
<p>In Modern browser you can also use </p>
<div class="highlight highlight-source-js"><pre><span class="pl-c1">Array</span>.isArray(arrayList);</pre></div>
<p><code>Array.isArray</code> is supported by Chrome 5, Firefox 4.0, IE 9, Opera 10.5 and Safari 5</p>
<a id="8-what-will-be-the-output-of-below-code-" class="anchor" href="#8-what-will-be-the-output-of-below-code-" aria-hidden="true"><span class="octicon octicon-link"></span></a>8. What will be the output of below code ?</h5>
<div class="highlight highlight-source-js"><pre><span class="pl-k">var</span> output <span class="pl-k">=</span> (<span class="pl-k">function</span>(<span class="pl-smi">x</span>){
    <span class="pl-k">delete</span> x;
    <span class="pl-k">return</span> x;
  })(<span class="pl-c1">0</span>);
  <span class="pl-en">console</span><span class="pl-c1">.log</span>(output);</pre></div>
<blockquote>
<p>Above code will output <code>0</code> as output. <code>delete</code> operator is used to delete property from object. Here <code>x</code> is not an object it's <strong>local variable</strong>. <code>delete</code> operator doesn't affect local variable.</p>
</blockquote>
<a id="9-what-will-be-the-output-of-below-code-" class="anchor" href="#9-what-will-be-the-output-of-below-code-" aria-hidden="true"><span class="octicon octicon-link"></span></a>9. What will be the output of below code ?</h5>
<div class="highlight highlight-source-js"><pre><span class="pl-k">var</span> x <span class="pl-k">=</span> <span class="pl-c1">1</span>;
<span class="pl-k">var</span> output <span class="pl-k">=</span> (<span class="pl-k">function</span>(){
    <span class="pl-k">delete</span> x;
    <span class="pl-k">return</span> x;
  <span class="pl-en">console</span><span class="pl-c1">.log</span>(output);</pre></div>
<blockquote>
<p>Above code will output <code>1</code> as output. <code>delete</code> operator is used to delete property from object. Here <code>x</code> is not an object it's <strong>global variable</strong> of type <code>number</code>.</p>
</blockquote>
<a id="10-what-will-be-the-output-of-below-code-" class="anchor" href="#10-what-will-be-the-output-of-below-code-" aria-hidden="true"><span class="octicon octicon-link"></span></a>10. What will be the output of below code ?</h5>
<div class="highlight highlight-source-js"><pre><span class="pl-k">var</span> x <span class="pl-k">=</span> { foo <span class="pl-k">:</span> <span class="pl-c1">1</span>};
<span class="pl-k">var</span> output <span class="pl-k">=</span> (<span class="pl-k">function</span>(){
    <span class="pl-k">delete</span> x.foo;
    <span class="pl-k">return</span> x.foo;
  <span class="pl-en">console</span><span class="pl-c1">.log</span>(output);</pre></div>
<blockquote>
<p>Above code will output <code>undefined</code> as output. <code>delete</code> operator is used to delete property from object. Here <code>x</code> is an object which has foo as a property and from self-invoking function we are deleting foo property of object <code>x</code> and after deletion we are trying to reference deleted property <code>foo</code> which result <code>undefined</code>.</p>
</blockquote>
<a id="11-what-will-be-the-output-of-below-code-" class="anchor" href="#11-what-will-be-the-output-of-below-code-" aria-hidden="true"><span class="octicon octicon-link"></span></a>11. What will be the output of below code ?</h5>
<div class="highlight highlight-source-js"><pre><span class="pl-k">var</span> Employee <span class="pl-k">=</span> {
  company<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>xyz<span class="pl-pds">'</span></span>
<span class="pl-k">var</span> emp1 <span class="pl-k">=</span> <span class="pl-c1">Object</span>.create(Employee);
<span class="pl-k">delete</span> emp1.company
<span class="pl-en">console</span><span class="pl-c1">.log</span>(emp1.company);</pre></div>
<blockquote>
<p>Above code will output <code>xyz</code> as output. Here <code>emp1</code> object got company as <strong>prototype</strong> property. delete operator doesn't delete prototype property. </p>
</blockquote>
<p><code>emp1</code> object doesn't have <strong>company</strong> as it's own property. you can test it <code>console.log(emp1.hasOwnProperty('company')); //output : false</code> However we can delete company property directly from <code>Employee</code> object using <code>delete Employee.company</code> or we can also delete from <code>emp1</code> object using <code>__proto__</code> property <code>delete emp1.__proto__.company</code>.</p>
<a id="12-what-is-undefined-x-1-in-javascript" class="anchor" href="#12-what-is-undefined-x-1-in-javascript" aria-hidden="true"><span class="octicon octicon-link"></span></a>12. What is <code>undefined x 1</code> in JavaScript</h5>
<div class="highlight highlight-source-js"><pre><span class="pl-k">var</span> trees <span class="pl-k">=</span> [<span class="pl-s"><span class="pl-pds">"</span>redwood<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">"</span>bay<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">"</span>cedar<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">"</span>oak<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">"</span>maple<span class="pl-pds">"</span></span>];
<span class="pl-k">delete</span> trees[<span class="pl-c1">3</span>];</pre></div>
<p>when you run above code and do <code>console.log(trees);</code> in chrome developer console then you will get 
<code>["redwood", "bay", "cedar", undefined × 1, "maple"]</code> and when you run above code in Firefox browser console then you will get <code>["redwood", "bay", "cedar", undefined, "maple"]</code> so from these It's cleared that chrome has it's own way of displaying uninitialised index in array. But when you check <code>trees[3] === undefined</code> in both of the browser you will get similar output as <code>true</code>. </p>
<p><strong>Note:</strong> Please remember you need not check for uninitialised index of array in  <code>trees[3] === 'undefined × 1'</code> it will give error, Because <code>'undefined × 1'</code> this is just way of displaying uninitialised index of array in chrome.</p>
<a id="13-what-will-be-the-output-of-below-code-" class="anchor" href="#13-what-will-be-the-output-of-below-code-" aria-hidden="true"><span class="octicon octicon-link"></span></a>13. What will be the output of below code ?</h5>
<div class="highlight highlight-source-js"><pre><span class="pl-k">var</span> trees <span class="pl-k">=</span> [<span class="pl-s"><span class="pl-pds">"</span>xyz<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">"</span>xxxx<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">"</span>test<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">"</span>ryan<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">"</span>apple<span class="pl-pds">"</span></span>];
<span class="pl-k">delete</span> trees[<span class="pl-c1">3</span>];
  <span class="pl-en">console</span><span class="pl-c1">.log</span>(trees.<span class="pl-c1">length</span>);</pre></div>
<blockquote>
<p>Above code will output <code>5</code> as output. When we used <code>delete</code> operator for deleting an array element then, the array length is not affected from this. This holds even if you deleted all the element of array using <code>delete</code> operator.</p>
</blockquote>
<p>So when delete operator removes an array element that deleted element is not longer present in array. In place of value at deleted index <code>undefiend x 1</code> in <strong>chrome</strong> and <code>undefiend</code> is placed at the index. If you do <code>console.log(trees)</code> output <code>["xyz", "xxxx", "test", undefined × 1, "apple"]</code> in Chrome and in Firefox <code>["xyz", "xxxx", "test", undefined, "apple"]</code>.</p>
<a id="14-what-will-be-the-output-of-below-code-" class="anchor" href="#14-what-will-be-the-output-of-below-code-" aria-hidden="true"><span class="octicon octicon-link"></span></a>14. What will be the output of below code ?</h5>
<div class="highlight highlight-source-js"><pre><span class="pl-k">var</span> bar <span class="pl-k">=</span> <span class="pl-c1">true</span>;
<span class="pl-en">console</span><span class="pl-c1">.log</span>(bar <span class="pl-k">+</span> <span class="pl-c1">0</span>);   
<span class="pl-en">console</span><span class="pl-c1">.log</span>(bar <span class="pl-k">+</span> <span class="pl-s"><span class="pl-pds">"</span>xyz<span class="pl-pds">"</span></span>);  
<span class="pl-en">console</span><span class="pl-c1">.log</span>(bar <span class="pl-k">+</span> <span class="pl-c1">true</span>);  
<span class="pl-en">console</span><span class="pl-c1">.log</span>(bar <span class="pl-k">+</span> <span class="pl-c1">false</span>);   </pre></div>
<blockquote>
<p>Above code will output <code>1, "truexyz", 2, 1</code> as output. General guideline  for addition of operator: </p>
<li>Number + Number  -&gt; Addition </li>
<li>Boolean + Number -&gt; Addition </li>
<li>Boolean + Number -&gt; Addition </li>
<li>Number + String  -&gt; Concatenation</li>
<li>String + Boolean -&gt; Concatenation</li>
<li>String + String     -&gt; Concatenation</li>
</blockquote>
<a id="15-what-will-be-the-output-of-below-code-" class="anchor" href="#15-what-will-be-the-output-of-below-code-" aria-hidden="true"><span class="octicon octicon-link"></span></a>15. What will be the output of below code ?</h5>
<div class="highlight highlight-source-js"><pre><span class="pl-k">var</span> z <span class="pl-k">=</span> <span class="pl-c1">1</span>, y <span class="pl-k">=</span> z <span class="pl-k">=</span> <span class="pl-k">typeof</span> y;
<span class="pl-en">console</span><span class="pl-c1">.log</span>(y);  </pre></div>
<blockquote>
<p>Above code will output <code>undefined</code> as output. According to <code>associativity</code> rule operator with same precedence are processed based on there associativity property of operator. Here associativity of assignment operator is <code>Right to Left</code> so first <code>typeof y</code> will evaluate first which is <code>undefined</code> and assigned to <code>z</code> and then <code>y</code> would be assigned value of z and then <code>z</code> would be assign value <code>1</code>.</p>
</blockquote>
<a id="16-what-will-be-the-output-of-below-code-" class="anchor" href="#16-what-will-be-the-output-of-below-code-" aria-hidden="true"><span class="octicon octicon-link"></span></a>16. What will be the output of below code ?</h5>
<div class="highlight highlight-source-js"><pre> <span class="pl-c">// NFE (Named Function Expression </span>
 <span class="pl-k">var</span> <span class="pl-en">foo</span> <span class="pl-k">=</span> <span class="pl-k">function</span> <span class="pl-en">bar</span>(){ <span class="pl-k">return</span> <span class="pl-c1">12</span>; };
 <span class="pl-k">typeof</span> bar();  </pre></div>
<blockquote>
<p>Above code will output <code>Reference Error</code> as output. For making above code work you can re-write above code as follow: </p>
</blockquote>
<p><strong>Sample 1</strong></p>
<div class="highlight highlight-source-js"><pre> <span class="pl-k">var</span> <span class="pl-en">bar</span> <span class="pl-k">=</span> <span class="pl-k">function</span>(){ <span class="pl-k">return</span> <span class="pl-c1">12</span>; };
 <span class="pl-k">typeof</span> bar();  </pre></div>
<p><strong>Sample 2</strong></p>
<div class="highlight highlight-source-js"><pre> <span class="pl-k">function</span> <span class="pl-en">bar</span>(){ <span class="pl-k">return</span> <span class="pl-c1">12</span>; };
 <span class="pl-k">typeof</span> bar();  </pre></div>
<p>function definition can have only one reference variable as a function name, In above code <strong>sample 1</strong> bar is reference variable which is pointing to <code>anonymous function</code> and in <strong>sample 2</strong> function definition is name function.</p>
<div class="highlight highlight-source-js"><pre> <span class="pl-k">var</span> <span class="pl-en">foo</span> <span class="pl-k">=</span> <span class="pl-k">function</span> <span class="pl-en">bar</span>(){ 
    <span class="pl-c">// foo is visible here </span>
    <span class="pl-c">// bar is visible here</span>
    <span class="pl-en">console</span><span class="pl-c1">.log</span>(<span class="pl-k">typeof</span> bar()); <span class="pl-c">// Work here :)</span>
 <span class="pl-c">// foo is visible here</span>
 <span class="pl-c">// bar is undefined here</span>
</pre></div>
<a id="17-what-is-difference-between-declaring-function-in-below-format-" class="anchor" href="#17-what-is-difference-between-declaring-function-in-below-format-" aria-hidden="true"><span class="octicon octicon-link"></span></a>17. what is difference between declaring function in below format ?</h5>
<div class="highlight highlight-source-js"><pre> <span class="pl-k">var</span> <span class="pl-en">foo</span> <span class="pl-k">=</span> <span class="pl-k">function</span>(){ 
    <span class="pl-c">// Some code</span>
 }; </pre></div>
<div class="highlight highlight-source-js"><pre> <span class="pl-k">function</span> <span class="pl-en">bar</span>(){ 
    <span class="pl-c">// Some code</span>
 }; </pre></div>
<p>The main difference is function <code>foo</code> is defined at <code>run-time</code> whereas function <code>bar</code> is defined at parse time. For understanding It in better way let see below code : </p>
<div class="highlight highlight-source-js"><pre>Run<span class="pl-k">-</span>Time <span class="pl-k">function</span> declaration 
<span class="pl-k">&lt;</span>script<span class="pl-k">&gt;</span>
foo(); <span class="pl-c">// Call foo function here, It will give Error</span>
 <span class="pl-k">var</span> <span class="pl-en">foo</span> <span class="pl-k">=</span> <span class="pl-k">function</span>(){ 
        <span class="pl-en">console</span><span class="pl-c1">.log</span>(<span class="pl-s"><span class="pl-pds">"</span>Hi I am inside Foo<span class="pl-pds">"</span></span>);
 <span class="pl-k">&lt;/</span>script<span class="pl-k">&gt;</span></pre></div>
<div class="highlight highlight-source-js"><pre><span class="pl-k">&lt;</span>script<span class="pl-k">&gt;</span>
Parse<span class="pl-k">-</span>Time <span class="pl-k">function</span> declaration 
bar(); <span class="pl-c">// Call foo function here, It will not give Error</span>
 <span class="pl-k">function</span> <span class="pl-en">bar</span>(){ 
    <span class="pl-en">console</span><span class="pl-c1">.log</span>(<span class="pl-s"><span class="pl-pds">"</span>Hi I am inside Foo<span class="pl-pds">"</span></span>);
 <span class="pl-k">&lt;/</span>script<span class="pl-k">&gt;</span></pre></div>
<p>The another advantage of first-one way of declaration that you can declare function based on certain condition for example: </p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">&lt;</span>script<span class="pl-k">&gt;</span>
<span class="pl-k">if</span>(testCondition) {<span class="pl-c">// If testCondition is true then </span>
     <span class="pl-k">var</span> <span class="pl-en">foo</span> <span class="pl-k">=</span> <span class="pl-k">function</span>(){ 
        <span class="pl-en">console</span><span class="pl-c1">.log</span>(<span class="pl-s"><span class="pl-pds">"</span>inside Foo with testCondition True value<span class="pl-pds">"</span></span>);
 }<span class="pl-k">else</span>{
     <span class="pl-k">var</span> <span class="pl-en">foo</span> <span class="pl-k">=</span> <span class="pl-k">function</span>(){ 
        <span class="pl-en">console</span><span class="pl-c1">.log</span>(<span class="pl-s"><span class="pl-pds">"</span>inside Foo with testCondition false value<span class="pl-pds">"</span></span>);
 <span class="pl-k">&lt;/</span>script<span class="pl-k">&gt;</span></pre></div>
<p>But If you try to run similar code in below format It would give error </p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">&lt;</span>script<span class="pl-k">&gt;</span>
<span class="pl-k">if</span>(testCondition) {<span class="pl-c">// If testCondition is true then </span>
     <span class="pl-k">function</span> <span class="pl-en">foo</span>(){ 
        <span class="pl-en">console</span><span class="pl-c1">.log</span>(<span class="pl-s"><span class="pl-pds">"</span>inside Foo with testCondition True value<span class="pl-pds">"</span></span>);
 }<span class="pl-k">else</span>{
     <span class="pl-k">function</span> <span class="pl-en">foo</span>(){ 
        <span class="pl-en">console</span><span class="pl-c1">.log</span>(<span class="pl-s"><span class="pl-pds">"</span>inside Foo with testCondition false value<span class="pl-pds">"</span></span>);
 <span class="pl-k">&lt;/</span>script<span class="pl-k">&gt;</span></pre></div>
<a id="18-what-is-function-hoisting-in-javascript" class="anchor" href="#18-what-is-function-hoisting-in-javascript" aria-hidden="true"><span class="octicon octicon-link"></span></a>18. what is function hoisting in JavaScript?</h5>
<p><strong>Function Expression</strong></p>
<div class="highlight highlight-source-js"><pre> <span class="pl-k">var</span> <span class="pl-en">foo</span> <span class="pl-k">=</span> <span class="pl-k">function</span> <span class="pl-en">foo</span>(){ 
    <span class="pl-k">return</span> <span class="pl-c1">12</span>; 
 }; </pre></div>
<blockquote>
<p>In JavaScript variable and functions are <code>hoisted</code>. Let's take function <code>hoisting</code> first. Basically, the JavaScript interpreter looks ahead to find all the variable declaration and hoists them to the top of the function where it's declared. For Example:</p>
</blockquote>
<div class="highlight highlight-source-js"><pre> foo(); <span class="pl-c">// Here foo is still undefined </span>
 <span class="pl-k">var</span> <span class="pl-en">foo</span> <span class="pl-k">=</span> <span class="pl-k">function</span> <span class="pl-en">foo</span>(){ 
    <span class="pl-k">return</span> <span class="pl-c1">12</span>; 
 }; </pre></div>
<p>Above code behind the scene look something like below code: </p>
<div class="highlight highlight-source-js"><pre>   <span class="pl-k">var</span> foo <span class="pl-k">=</span> <span class="pl-c1">undefined</span>;
      foo(); <span class="pl-c">// Here foo is undefined </span>
       <span class="pl-en">foo</span> <span class="pl-k">=</span> <span class="pl-k">function</span> <span class="pl-en">foo</span>(){
          <span class="pl-k">/</span> Some code stuff
       }</pre></div>
<div class="highlight highlight-source-js"><pre>   <span class="pl-k">var</span> foo <span class="pl-k">=</span> <span class="pl-c1">undefined</span>;
       <span class="pl-en">foo</span> <span class="pl-k">=</span> <span class="pl-k">function</span> <span class="pl-en">foo</span>(){
          <span class="pl-k">/</span> Some code stuff
       foo(); <span class="pl-c">// Now foo is defined here</span></pre></div>
<p>##### 19. What will be the output of below code ? </p>
<div class="highlight highlight-source-js"><pre> <span class="pl-k">var</span> salary <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>1000$<span class="pl-pds">"</span></span>;
 (<span class="pl-k">function</span> () {
     <span class="pl-en">console</span><span class="pl-c1">.log</span>(<span class="pl-s"><span class="pl-pds">"</span>Original salary was <span class="pl-pds">"</span></span> <span class="pl-k">+</span> salary);
     <span class="pl-k">var</span> salary <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>5000$<span class="pl-pds">"</span></span>;
     <span class="pl-en">console</span><span class="pl-c1">.log</span>(<span class="pl-s"><span class="pl-pds">"</span>My New Salary <span class="pl-pds">"</span></span> <span class="pl-k">+</span> salary);
 })();</pre></div>
<blockquote>
<p>Above code will output: <code>undefined, 5000$</code>. JavaScript has hoisting concept where newbie get tricked. In above code, you might be expecting <code>salary</code> to retain it's value from outer scope until the point that <code>salary</code> was re-declared in the inner scope. But due to <code>hoisting</code> salary value was <code>undefined</code> instead. To understand It better have a look of below code, here <code>salary</code> variable is hoisted and declared at the top in function scope and while doing console.log it's result <code>undefined</code> and after that it's been redeclare and assigned <code>5000$</code>.</p>
</blockquote>
<div class="highlight highlight-source-js"><pre> <span class="pl-k">var</span> salary <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>1000$<span class="pl-pds">"</span></span>;
 (<span class="pl-k">function</span> () {
     <span class="pl-k">var</span> salary <span class="pl-k">=</span> <span class="pl-c1">undefined</span>;
     <span class="pl-en">console</span><span class="pl-c1">.log</span>(<span class="pl-s"><span class="pl-pds">"</span>Original salary was <span class="pl-pds">"</span></span> <span class="pl-k">+</span> salary);
     salary <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>5000$<span class="pl-pds">"</span></span>;
     <span class="pl-en">console</span><span class="pl-c1">.log</span>(<span class="pl-s"><span class="pl-pds">"</span>My New Salary <span class="pl-pds">"</span></span> <span class="pl-k">+</span> salary);
 })();</pre></div>
<p>##### 20. What is the <code>instanceof</code> operator in JavaScript? what would be the output of below code ? </p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">function</span> <span class="pl-en">foo</span>(){ 
    <span class="pl-k">return</span> foo; 
<span class="pl-k">new</span> <span class="pl-en">foo</span>() <span class="pl-k">instanceof</span> foo;</pre></div>
<blockquote>
<p><code>instanceof</code> operator checks the current object and return true if the object is of the the specified type.</p>
</blockquote>
<p>For Example: </p>
<div class="highlight highlight-source-js"><pre> <span class="pl-k">var</span> dog <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">Animal</span>();
 dog <span class="pl-k">instanceof</span> Animal <span class="pl-c">// Output : true</span></pre></div>
<p>Here <code>dog instanceof Animal</code> is true since <code>dog</code> inherits from <code>Animal.prototype</code></p>
<div class="highlight highlight-source-js"><pre> <span class="pl-k">var</span> name <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">String</span>(<span class="pl-s"><span class="pl-pds">"</span>xyz<span class="pl-pds">"</span></span>);
 name <span class="pl-k">instanceof</span> <span class="pl-c1">String</span> <span class="pl-c">// Output : true</span></pre></div>
<p>Here <code>name instanceof String</code> is true since <code>dog</code> inherits from <code>String.prototype</code>. Now let's understand the working of below code </p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">function</span> <span class="pl-en">foo</span>(){ 
    <span class="pl-k">return</span> foo; 
<span class="pl-k">new</span> <span class="pl-en">foo</span>() <span class="pl-k">instanceof</span> foo;</pre></div>
<p>Here function <code>foo</code> is returning <code>foo</code> which is again pointer to function <code>foo</code></p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">function</span> <span class="pl-en">foo</span>(){ 
    <span class="pl-k">return</span> foo; 
<span class="pl-k">var</span> bar <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">foo</span>();
<span class="pl-c">// here bar is pointer to function foo(){return foo}.</span></pre></div>
<p>So the <code>new foo() instanceof foo</code> return <code>false</code>;</p>
<p>Ref Link: <a href="http://stackoverflow.com/questions/2449254/what-is-the-instanceof-operator-in-javascript">http://stackoverflow.com/questions/2449254/what-is-the-instanceof-operator-in-javascript</a></p>
<a id="21-if-we-have-javascript-associative-array-as-below-code-" class="anchor" href="#21-if-we-have-javascript-associative-array-as-below-code-" aria-hidden="true"><span class="octicon octicon-link"></span></a>21. If we have JavaScript associative array as below code :</h5>
<div class="highlight highlight-source-js"><pre>  <span class="pl-k">var</span> counterArray <span class="pl-k">=</span> {
         A <span class="pl-k">:</span> <span class="pl-c1">3</span>,
         B <span class="pl-k">:</span> <span class="pl-c1">4</span>
  counterArray[<span class="pl-s"><span class="pl-pds">"</span>C<span class="pl-pds">"</span></span>] <span class="pl-k">=</span> <span class="pl-c1">1</span>;</pre></div>
<a id="how-we-will-calculate-length-of-the-above-associative-array-counterarray" class="anchor" href="#how-we-will-calculate-length-of-the-above-associative-array-counterarray" aria-hidden="true"><span class="octicon octicon-link"></span></a>How we will calculate length of the above associative array <code>counterArray</code>
<blockquote>
<p>There are no in-built function and property available to calculate length of associative array object, However there are ways by which we can calculate the length of associative array object, In addition to this we can also extend <code>Object</code> by adding method or property on prototype for calculate length but extending object might break enumeration in various libraries or might create cross-browser issue, so It's not recommended unless it's necessary. There are various way by which we can calculate length.</p>
</blockquote>
<p><code>Object</code> has <code>keys</code> method which can we used to calculate the length of object.</p>
<pre><code> Object.keys(counterArray).length // Output 2 
</code></pre>
<p>We can also calculate length of object by iterating through object and by doing count of own property of object.  </p>
<pre><code>function getSize(object){
    var count = 0;
    for(key in object){
      // hasOwnProperty method check own property of object
      if(object.hasOwnProperty(key)) count++;
    return count;
</code></pre>
<blockquote>
<p>We can also add <code>length</code> method directly on <code>Object</code> see below code.</p>
</blockquote>
<pre><code>  Object.length = function(){
    var count = 0;
    for(key in object){
      // hasOwnProperty method check own property of object
      if(object.hasOwnProperty(key)) count++;
    return count;
  //Get the size of any object using
  console.log(Object.length(counterArray))
</code></pre>
<p><strong>Bonus</strong>: We can also use <code>Underscore</code> (recommended, As it's lightweight) to calculate object length.</p>
      </section>
    <!--[if !IE]><script>fixScale(document);</script><![endif]-->
FilesExpand file tree

index.html

Latest commit

History

index.html

File metadata and controls
