2

Most Asked JavaScript Interview Questions for Experienced

javascript interview questions for experienced, javascript interview questions and answers, javascript interview questions coding, javascript interview questions, javascript interview questions jsmount, technical javascript interview questions, top javascript interview questions, advanced javascript interview questions, javascript interview questions for freshers


What is JavaScript? Who invented this?

As per Wikipedia-
Alongside HTML and CSS, JavaScript is one of the core technologies of the World Wide Web. JavaScript enables interactive web pages and is an essential part of web applications.

JavaScript often abbreviated as JS, is a high-level, interpreted scripting language that conforms to the ECMAScript specification. JavaScript has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions.

The terms Vanilla JavaScript and Vanilla JS refers to JavaScript not extended by any frameworks or additional libraries. Scripts written in Vanilla JS are plain JavaScript code.

JavaScript is developed by Netscape.
read more.. https://en.wikipedia.org/wiki/JavaScript


JavaScript is a single-thread or multi-thread language?

JavaScript is a single-thread language. It has one call stack and one memory heap.


What are ASYNC and DEFER in JavaScript?

We load external files in HTML by using a script tag. This <script> tag has two attributes, async & defer. 
These attributes give us more control over fetching external files.

Let's first see Normal execution:  <script src="script.js">       
 In this case, the JavaScript file will interrupt the parsing of the HTML document until it is fetched and executed. After successfully executing the JS file, again start HTML parsing.

Async Execution <script async src="script.js">   
In this case, the HTML parser does not need to pause to fetch external files and when files are fetched successfully, it executes, during file execution html parsing pauses, and after execution, again parsing starts.

Defer execution <script defer src="script.js">    
In this case, HTML Parsing and loading files can work simultaneously. The script is not executed until the parsing is complete. After successfully document parsing is finished, it executes.   


Explain “this” in JavaScript.

In JavaScript ‘this’ represents a scope. ‘this’ can have different values based on where it is used. this can represent a window, an Object, any other object, or any function that is created using new, this is undefined in strict mode, In Event handler this represents that element.


What is Event Bubbling and Event Capturing?

Event Bubbling is a process to move an event from bottom to top. When an event occurred on an element, it runs a handler on this and then on its parent element and then moves to all ancestors.

 <form onclick="alert('clicked on form')">
    <div onclick="alert('clicked on div')">
        <p onclick="alert('clicked on p')">
            Hi this is test
        </p>
    </div>
</form>

So if we click on P element, we see three alerts because of Event Bubbling.

On the other side when an event moves from top to bottom, it is called Event capturing. It starts from HTML element and then moves to the targeted element.
Sequence: HTML > Body > Form > Div > p

Note: To catch Event Capturing, we need to set the handler capture as true.
elem.addEventListener('click', function(e){alert('hi')}, {capture: true});
elem.addEventListener('click', function(e){alert('hi')}, true); // both lines are same


What is Event Delegation?

Event delegation is an Event handling pattern that happens by using Event Bubbling & Capturing. Suppose we have a lot of elements and we have to apply a handler on all items. So instead of putting a handler on each element, we assign a single handler on a common ancestor element. In the handler function, we can get event.target and by this, we can find out where actually event happened.


What are Primitive and Non-Primitives In JavaScript?

There are two different types of data types in JavaScript.
1. Primitive data types
2. Non primitives data types
String, Number, Boolean, Undefined and Null are primitives types. Object and Array are non primitives types. Primitive data types are immutable means we can not change a primitive value once it gets created. Non-Primitives are mutable. Primitives are compared by value while Non-primitives compare by reference.
var empId = 12345; // primitive
var obj = {emp: 123}; OR var arr =[1,2,4,5]; // Non-Primitive 

javascript interview questions for experienced


How variables are stored in JavaScript?

There are two types of allocations.

  1. Static Allocation
  2. Dynamic Allocation.

For Primitives data types (variables for those we know the size at compile time) required memory allocated in stack space. And variables for which we do not know how much memory they will need and size can grow dynamically during run time, these are allocated in heap space.


What are Static Typing and Dynamic Typing?

Static and Dynamic types are two programming approaches. JavaScript is Dynamic Typing Language.
The core difference between them is Static Typed language performs Type checking at compile time or before run time while Dynamically Type checking performs type checking during run time.
Type Script is Static Typing Language.

Below code will throw error during compile time because we are assigning string to number type variable.

Var emp: number  = 123;
emp = 'JS Mount'; // error
IN JavaScript such syntax does not throw any error because of dynamic typing.
 Var emp = 9876;
 emp = 'JS Mount';


What is Strict mode, What are the advantages of it?

Strict mode enables a modern way to write JavaScript. It is introduced in ECMAScript 5.
To enable strict mode we write ‘use strict’ at the top of the body inside the function or as the first line in the whole script. Strict Mode makes it easier to write ‘secure’ JavaScript. Strict Mode throws errors for any unsafe action or unsafe declarations.

  • We can not create a global variable with strict mode.
  • we can not use the delete operator with strict mode.
  • let x = 020; such a statement throws an error in strict mode.
  • delete Object.prototype; // throw error
  • let eval = 1.14; // eval can not be used as a variable name in strict mode.


What is the difference between Function Declaration & Function expression? 

Case 1:
printName(); // output > 'My name is JS Mount'
function printName() {
    console.log('My name is JS Mount');
}

Case 2:
printNewName(); // output > Error
var printNewName = function() {
    console.log('My new name is Master JS Mount');
}

Case 1 works successfully because of a function declaration.
Case 2 gives an error because it is a function expression.

Function declarations move to the top of their scope & load before any code is executed means Function declarations are hoisted. Function expression only runs when the interpreter reaches that line. Function expressions aren’t hoisted.
Function declarations start with the keyword ‘function’. Function expression starts with the keyword ‘var’.


What is Call Bind and Apply?

Call method is used to call a function with a given ‘this’ value & arguments provided. We pass arguments with comma-separated. Apply is used for the same task but with the apply function, we pass arguments with an array. 

 var emp = {
    fName: 'JS Mount',
    lName: 'Master',
    getName() {
        return this.fName + ' ' + this.lName;
    }
}

var empFunction = function(fName, lName) {
    console.log(this.getName());
    console.log('Logged Value ' + fName + ' ' +  lName);
}

empFunction.call(emp, 'John', 'David');
JS Mount Master
Logged Value John David
empFunction.apply(emp, ['Crish', 'Mind']);
JS Mount Master
Logged Value Crish Mind

Bind function create a new function with provided ‘this’ value and that is called the Bound function. We can later call this bound function when required.

var bound = empFunction.bind(emp);
bound('Mine', 'JS');
JS Mount Master
Logged Value Mine JS


Can you please give a real example of using call apply?

Suppose we have created a library to Calculate the circumference of a circle. Inside our library function, we have used PI values like 3.14. We tested the library and freeze it. Now we don’t have any access to update this Library.

var circleLib = {
     pi: 3.14,
     calcCircumference(r) {
         return 2 * this.pi * r;
     }
 }
 circleLib.calcCircumference(4);
 output > 25.12

Later On, someone asked to change the PI value to 3.149. Now we are stuck because we fixed the pie value 3.14. In such situations, JavaScript Call comes into action.

var obj = {pi: 3.149};
 circleLib.calcCircumference.call(obj, 4);
 output > 25.192 

 AND Problem solved !!!!


What is Hoisting?

Hoisting is a JavaScript mechanism that moves all variables and function declarations to the top of its scope before any code execution. The key point is it only moves the declaration to the top, not its value. Let’s see an example.

console.log(name);
var name = 'jsmount';

Output > undefined. // we have used name before it's creation still we do not get any error because of hoisting.


What is Default Binding, Implicit Binding, Explicit Binding, or New Binding?

When we create a function with window scope then ‘this’ represents the window object and it is called Default Binding.

When we create a method within a specific object then ‘this’ represents that particular object only and it is called Implicit Binding.

Explicit Binding we can see with the call or apply methods. Where we pass an outside object into the function and call method.

When we use a new keyword before a function and create an object. It is called New Binding.

// Default Binding
 function getName() {
     console.log(this);
 }
 // Implict Binding
 var obj = {
     myName: 'JS Mount',
     getName: function() {
         console.log(this);
     }
 }
 name.getName();
 //Explicit Binding
 any example of call or apply
 // New Binding
 function Emp() {
     this.name = 'JS Mount';
     this.printName = function(){
         console.log(this);
     }
 }
 var e = new Emp();
 e.printName();


What is Pass By Value and Pass By Reference?

Primitive data types in Javascript like String, Boolean, and Numbers always pass by value whereas Objects are passed by reference.

Call By Value Example: 
var id = 1;
function myprint(id){
     id = id + 2;
 }
 myprint(id);
 console.log(id);  //output is 1

Call By Reference Example:
var obj = {id: 1};
 function myprint(obj){
     obj.id = obj.id + 3; 
 }
 myprint(obj);
 console.log(obj.id); // output 4, so obj has been updated because of reference.


What is Functional Programming?

Read here for functional programming:
https://codeburst.io/a-beginner-friendly-intro-to-functional-programming-4f69aa109569


What is the Pure function in JavaScript?

Read here for pure function:
https://codeburst.io/a-beginner-friendly-intro-to-functional-programming-4f69aa109569


What is the First Class function and Higher Order Function in JavaScript?

Read here for first-class functions and higher-order functions:
https://www.geeksforgeeks.org/functional-programming-paradigm/


What is a Prototype?

Read here for the prototype:
https://www.tutorialsteacher.com/javascript/prototype-in-javascript


What is Prototype Chaining?

Read here to understand complete Prototype Chaining:
https://hackernoon.com/inheritance-in-javascript-21d2b82ffa6f


What is the difference between forEach vs for-of vs for-in loop?

foreach is available only for Array Objects. It allows you to iterate through elements of an array.

for in is used to loop over properties of objects. It can be any object. It returns a key or index.

for of come from ES 6 & also used to iterate over collections. 

var obj = {a: 1, b: 2};
 for (var item in obj) {
     console.log(item);
 }
 output > // return keys of object
 a
 b

for (var item of obj) {
     console.log(item);
}
Output > throw error, for of can not work with Object
_______________________________
 var arr = [1,3,6];
 for (var item in arr) {console.log(item);}
 output > // return index
 0
 1
 2

 for (var item of arr) {console.log(item);} 
output >
1 3 6
_____________________________
 var str = 'This is JS Mount';
 for (var item in str) {
     console.log(item);
 }
 //output > returns index from 0 to 15

 for (var item of str) {
     console.log(item);
 } 
output > 
This
is
JS
Mount


What is the difference between slice vs splice? 

Syntexs:
var arrDeletedItems = array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) >> start is start Index and deleteCount is number of elements 
which have to delete. item1, item2.. these are items which we have to add.

arr.slice([begin[, end]]) >> begin is start Index and end is end Index 
but it does not include end index element.

Splice() method returns removed items & Slice() method returns selected items from an array.
Splice changes the original array but slice() the method does not change.

For more info read here…
https://developer.mozilla.org/enUS/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

var fruits = ['apple', 'orange', 'banana', 'kiwi'];
fruits.splice(0); // it will remove all elements. 
fruits.splice(1,1, 'mango') // it removes 1 element from 1st index and will add 'mango'.
fruits.slice(0,1); // ['apple'] 
fruits.slice(1,2); // ['orange']


Explain the array map, filter, and find method.

The map() method returns a new array of elements after processing logic passed in a callback function.

arr.map(function(currentElement, index, array){ // return new array })

Filter() method returns a new array of elements that passes the test passed in a callback function.

Find() method returns the first element only which passes the test provided in a callback function.

var fruits = ['apple', 'orange', 'banana', 'kiwi'];

 fruits.map(function(element){return element.length});
 output > (4) [5, 6, 6, 4]

 fruits.filter(function(element){ return element.length > 5});
 output > (2) ["orange", "banana"]

 fruits.find(function(element){ return element.length > 5});
 output > orange

javascript interview questions for experienced


Explain the Array reduce and reduceRight method.

The reduce() method executes a callback function on each item of an array and returns output in a single value.

arr.reduce(callback(accumulator, currentValue, index, array) {}, initialValue);

So if we have to return the sum of all elements of an array, we can use reduce method.

var arr = [1,2,3];

arr.reduce(function(accum, currentElement) { return accum + currentElement}); 

output > 6

The reduceRight() method executes a function against an accumulator and each element of the array (from right to left) to reduce it to a single value.
read here for more info…
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce


What happens if we remove the array value by using the DELETE operator?

If we try to remove an element of an array with, the delete operator, it removes only the value not its reference & creates an empty element on the same Index. So the length of that array is always same.

var fr = ["apple", "orange", "banana", "kiwi"];
delete fr[1]
output > true

and if check fr then >
(4) ["apple", empty, "banana", "kiwi"]

fr.length >> 4

javascript interview questions for experienced


What is the difference between function and method?

Method is a function associated with an object. And when there is no Object attached to it that is Function.

// This is function because it does not attached with any Object

function printName(name) {console.log(name);}
var str = 'This is JS';

str.toLowerCase();  // here toLowerCase() is a method because it is related with string.


javascript interview questions for experienced, javascript interview questions and answers, javascript interview questions coding, javascript interview questions, javascript interview questions jsmount, technical javascript interview questions, top javascript interview questions, advanced javascript interview questions, javascript interview questions for freshers

javascript interview questions for experienced

0

2 thoughts on “Most Asked JavaScript Interview Questions for Experienced”

  1. Tristan

    Having read this I believed it was extremely informative.
    I appreciate you finding the time and energy to put this short article together.
    I once again find myself personally spending way too much time both reading
    and posting comments. But so what, it was still
    worthwhile!

    Reply

Leave a Reply

Your email address will not be published.