100 most asked JavaScript Interview Questions and Answers — Part 1

JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB, and Adobe Acrobat. JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles.

JavaScript Interview Questions and Answers Series

Questions

Question 1. What is JavaScript?
Question 2. What are the
primitive types in JavaScript?
or
Explain the various JavaScript
data types?
Question 3. What's the difference between
undefined and null in JavaScript?
Question 4. What are the escape characters in JavaScript?
Question 5. What does the
Logical AND (&&) operator do?
Question 6. What does the
Logical OR (||) operator do?
Question 7. What is the fastest way to convert a string to a number?
Question 8. What are the different types of Error Name values in JavaScript?
Question 9. Please explain
Self Invoking Function
Question 10. Explain the difference between function declaration and function expression.
Question 11. What is the DOM?
Question 12. Please explain the difference between
attributes and property?
Question 13. What are
cookies? How will you create, read, and delete a cookie using JavaScript?
Question 14. What is
Event Propagation?
Question 15. What is Event Bubbling?
Question 16. What is Event Capturing?
Question 17. Explain difference between
event.preventDefault() and event.stopPropagation() methods?
Question 18. How to know if the
event.preventDefault() method was used in an element?
Question 19. What is Closure?
Question 20. How many ways can you create an array in JavaScript?
Question 21. How will you empty an array in JavaScript?

Answers

If you feel lazy to read more text, you can watch a video covering all questions here

1. What is JavaScript?

The high-level definition of JavaScript is:

  • JavaScript is the most popular web scripting language, used for both client-side and server-side development.
  • Supporting object-oriented programming abilities.
  • JavaScript code can be inserted into HTML pages that can be understood and executed by web browsers.

2. What are the primitive types in JavaScript?

The data types supported by JavaScript are:

  • Number
  • Boolean
  • Symbol
  • BigInt
  • Null
  • Undefined

3. What’s the difference between undefined and null in JavaScript?

undefined is the default value of

  • a variable that has not been assigned a specific value.
  • a function that has no explicit return value. for example
console.log(12);
let _undefinedVar;
const doNothing = () => {};
const someObj = {
ab : “Tech Talks”,
bc : “With AK”,
cd : “Subscribe, Link in Bio”,
};
console.log(_undefinedVar); // undefined
console.log(doNothing()); // undefined
console.log(someObj[“d”]); // undefined

null is

  • a value that represents no value.
  • a value that has been explicitly defined to a variable.
  • For example, we get a value of null when the fs.readFile method does not throw an error.
fs.readFile('path/to/file', (err,data) => {
console.log(e); //prints null when no error occurred
if(e){
console.log(e);
}
console.log(data);
}
);

comparing null and undefined

  • When comparing null and undefined we get true when using == and false when using ===.
console.log(null == undefined); // logs true
console.log(null === undefined); // logs false

JavaScript?

  • We use escape characters backslash (\) while working with special characters, such as ampersands (&), apostrophes (‘), double quotes (“ ”), and single quotes (‘ ’).
  • Whatever enclosed within the escape characters gets displayed by the JavaScript.
  • Six additional escape characters are also available in JavaScript:

\b — Backspace

\f — Form feed

\n — Newline

\r — Carriage return

\t — Horizontal tabulator

\v — Vertical tabulator

  • These aren’t in anyway executed in the HTML or JS code.
  • These were originally designed for controlling fax machines, teletypes, and typewriters.

5. What does the Logical AND operator do?

  • The && or Logical AND operator finds the first false expression in its operands and returns it.
  • If it does not find any false expression it returns the last expression.
  • It employs short-circuiting to prevent unnecessary work.
   console.log(false && 10 && []); // false
console.log(" " && true && 10); // 10

6. What does the Logical OR operator do?

  • The || or Logical OR operator finds the first truthy expression in its operands and returns it.
  • This too employs short-circuiting to prevent unnecessary work.
console.log(null || 10 || undefined); //prints 10

function printChannelName(name) {
var n = name || "Tech Talks With AK";
console.log(n);
}

printChannelName(); //prints "Tech Talks With AK"

7. What is the fastest way to convert a string to a number?

According to MDN Documentation the Unary Plus (+) is the fastest way of converting a string to a number because it does not perform any operations on the value if it is already a number.

8. What are the different types of Error Name values in JavaScript?

There are 6 Error Name values in JavaScript.

  • Range Error — Generated when a number outside the specified range is used
  • Reference Error — It comes into play when an undeclared variable is used.
  • Syntax Error — When the incorrect syntax is used, we get this error
  • Type Error — This error is thrown when a value outside the range of data types is tried to be used.
  • URI Error — Generated due to the use of illegal characters

9. Please explain Self Invoking Function.

  • Functions that are automatically invoked are termed as Self Invoking Functions.
  • These are also known as Immediately Invoked Function Expressions and Self Executing Anonymous Functions.
  • The general syntax of a Self Invoking Function is:
// A function is defined and then invoked
(function_name () {
return ()
}) ();

10. Explain the difference between function declaration and function expression.

function declaration and function expression can be differentiated on the basis of

  • Strict Mode
  • Time of Use
  • When to Use
  • When a function is created inside an expression or another syntax construct, it is called a function expression.
  • This isn’t the case for a function expression.
  • A function declaration, on the other hand, can be called before the same is defined.
  • Function expressions are typically restricted to be used when there is a need for a conditional declaration.

11. What is the DOM?

  • DOM stands for Document Object Model is an interface (API) for HTML and XML documents.
  • When the browser first reads (parses) HTML document it creates a big object, a really big object based on the HTML document this is the DOM.
  • It is a tree-like structure that is modeled from the HTML document.
  • The DOM is used for interacting and modifying the DOM structure or specific Elements or Nodes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document Object Model</title>
</head>
<body>
<div>
<p>
<span></span>
</p>
<label></label>
<input> // other elements
</div>
</body>
</html>
  • JavaScript can change all the HTML attributes in the page
  • JavaScript can change all the CSS styles in the page
  • JavaScript can remove existing HTML elements and attributes
  • JavaScript can add new HTML elements and attributes
  • JavaScript can react to all existing HTML events in the page
  • JavaScript can create new HTML events in the page

12. Please explain difference between attributes and property?

  • JS DOM objects have properties that are like instance variables for particular elements.
  • A property can be of various data types.
  • Properties are accessible by interacting with the object in Vanilla JS or using jQuery’s prop() method.
  • Rather than in the DOM, attributes are in the HTML.
  • They are similar to properties but not as capable.
  • It’s recommended to work with properties rather than attributes if the former is available. Unlike a property, an attribute is of the string data type

13. What are cookies? How will you create, read, and delete a cookie using JavaScript?

  • A cookie is simply data, usually small, sent from a website and stored on the user’s computer by the web browser used to access the website.
  • It is a reliable way for websites to remember stateful information and record the user’s browsing activity.
document.cookie = “key1 = value1; key2 = value2; … ; keyN= valueN; expires = date”;
  • Cookie object is the cookie, use this string whenever you wish to access the cookie.
  • The document.cookie string keeps a list of name = value pairs, where a semicolon separates each pair.
  • The name represents a cookie's name, and the value represents the respective cookie’s string value.
  • For breaking the string into key and value, you can use the split() method.
  • Some web browsers don’t let you delete a cookie unless you don’t specify the cookie’s path.
  • Hence, defining the cookie path is important to ensure that the right cookie is deleted.assign a string value to the document.

14. What is Event Propagation?

  • When an event occurs on a DOM element, that event does not entirely occur on that just one element.
  • In the Bubbling Phase, the event bubbles up or it goes to its parent, to its grandparents, to its grandparent’s parent until it reaches all the way to the window while in the Capturing Phase the event starts from the window down to the element that triggered the event or the event.target.
  • This process is called Event Propagation.
  • Target Phase – The event has reached the target element.
  • Bubbling Phase – The event bubbles up from the target element then goes up every element until it reaches the window.

15. What is Event Bubbling?

When an event occurs on a DOM element, that event does not entirely occur on that just one element.

<div class="grandparent">
<div class="parent">
<div class="child">1</div>
</div>
</div>
function addEvent(el, event, callback, isCapture = false) {
if (!el || !event || !callback || typeof callback !== 'function') return;
if (typeof el === 'string') {
el = document.querySelector(el);
};
el.addEventListener(event, callback, isCapture);
}
addEvent(document, 'DOMContentLoaded', () => {

const child = document.querySelector('.child');
const parent = document.querySelector('.parent');
const grandparent = document.querySelector('.grandparent');

addEvent(child, 'click', function (e) {
console.log('child');
});
addEvent(parent, 'click', function (e) {
console.log('parent');
});
addEvent(grandparent, 'click', function (e) {
console.log('grandparent');
});
addEvent(document, 'click', function (e) {
console.log('document');
});
addEvent('html', 'click', function (e) {
console.log('html');
});
addEvent(window, 'click', function (e) {
console.log('window');
});
});
  • If useCapture is true, the event will occur in the Capturing Phase.
  • If we click on the child element it logs child, parent, grandparent, html, document and window respectively on the console.
  • This whole event is Event Bubbling.

16. What is Event Capturing?

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

<div class="grandparent">
<div class="parent">
<div class="child">1</div>
</div>
</div>
function addEvent(el, event, callback, isCapture = false) {
if (!el || !event || !callback || typeof callback !== 'function') return;
if (typeof el === 'string') {
el = document.querySelector(el);
};
el.addEventListener(event, callback, isCapture);
}
addEvent(document, 'DOMContentLoaded', () => {
const child = document.querySelector('.child');
const parent = document.querySelector('.parent');
const grandparent = document.querySelector('.grandparent');

addEvent(child, 'click', function (e) {
console.log('child');
}, true);
addEvent(parent, 'click', function (e) {
console.log('parent');
}, true);
addEvent(grandparent, 'click', function (e) {
console.log('grandparent');
}, true);

addEvent(document, 'click', function (e) {
console.log('document');
}, true);

addEvent('html', 'click', function (e) {
console.log('html');
}, true)

addEvent(window, 'click', function (e) {
console.log('window');
}, true)

});
  • If useCapture is true, the event will occur in the Capturing Phase.
  • If we click on the child element it logs window, document, html, grandparent, parent and child respectively on the console.
  • This is Event Capturing

17. Explain difference between event.preventDefault() and event.stopPropagation() methods?

  • The event.preventDefault() method prevents the default behavior of an element.
  • If used in a form element it prevents it from submitting.
  • If used in an anchor element it prevents it from navigating.
  • If used in a context menu it prevents it from showing or displaying.
  • While the event.stopPropagation() method stops the propagation of an event.
  • It stops the event from occurring in the bubbling or capturing phase.

18. How to know if the event.preventDefault() method was used in an element?

  • We can use the event.defaultPrevented property in the event object.
  • It returns a boolean indicating if the event.preventDefault() was called in a particular element.

19. What is Closure?

  • Closures are created whenever a variable, defined outside the current scope, is accessed from within some inner scope.
  • It gives us access to an outer function’s scope from an inner function.
  • In other words, a closure is a locally declared variable that is related to a function and stays in the memory when the related function has returned.
  • The closure contains all local variables that were in-scope at the time of the closure creation.
  • In JavaScript, closures are created every time a function is created.
    To use a closure, simply define a function inside another function and expose it.
function greet(message) {
console.log(message);
}
function greeter(name, number) {
return name + " says Hey!! He has " + number + " subscribers";
}
var message = greeter("Tech Talks", 1026);
greet(message);
function greeter(name, number) {
var message = name + " says Hey!! He has " + number + " subscribers";
return function greet() {
console.log(message);
};
}
// Generate the closure
var TechTalksGreeter = greeter("Tech Talks", 1026);
// Use the closure
TechTalksGreeter();

20. How many ways can you create an array in JavaScript?

There are three different ways of creating an array in JavaScript, namely:

var someArray = new Array();
var someArray = new Array(‘value1’, ‘value2’,…, ‘valueN’)
var someArray = [value1, value2,…., valueN];

21. How will you empty an array in JavaScript?

There are four ways to empty an array in JavaScript

var array1 = [1, 22, 24, 46];
array1 = [ ];
var array1 = [1, 22, 24, 46];
array1.length=0;
var array1 = [1, 22, 24, 46];
while(array1.length > 0) {
array1.pop();
}
var array1 = [1, 22, 24, 46];
array1.splice(0, array1.length)

Polyglot Fullstack Developer