Interview Questions of JavaScript

Introduction: JavaScript is a very popular and powerful client-side scripting language, which are used by every developer. Initially, the motto to implement it was to make dynamic pages and web components but now the day is used in a wide area of software development on the client-side and on the server-side where the JavaScript Engine is available.

Some of the few frequently asked questions come from an interview

Question 1. What is a higher-order function in JavaScript?

Answer: In JavaScript, the higher-order function is a kind of function that can accept another function as an argument

or returns a function as a return value or both, just like the delegates in .net.

       

     

const varfirstOrderFunction = () => console.log ('HI!! this is first order');

const varHigherOrderFunction = ReturnFirstOrderFunction =>

ReturnFirstOrderFunction();

       varHigherOrderFunction(varfirstOrderFunction);

Question 2. What is Immediately Invoked Function Expression(IIFE) in JavaScript?

Answer: It is a JavaScript function Immediately Invoked Function Expression (IIFE) that runs as soon as it is defined.

the way of writing, the signature of it would be as below,

        (function () {

            // write some code

        } )();

The primary reason to use an Immediately Invoked Function Expression is to obtain data privacy because any variables declared within the Immediately Invoked Function Expression cannot be accessed by the outside world.

If you try to access variables with IIFE then it throws an error as below,

    (function () {

        var objMessage = "Immediately Invoked Function Expression";

        console.log(objMessage);

    } )();

    console.log(objMessage);

   

Question 3. What is the difference between == and === in JavaScript

Answer: Both are the operators and used for the comparison of two values

whereas == is used two compare the only value of the variable but === is used to compare value and type of variable.

Question 4. How to create an object in JavaScript?

Answer: There are several ways to create objects in JavaScript, some of the few we can see here.

   

    Object Constructor: var myObject = new Object()

    Object Create: var myObjectCreate = Object.create(null)

    Object literal: var myObjectLitteral = {}

    Functional Constructor:

    function FunctionalConstructor(name) = { this.name = name,

    this.age = 28}

    var myObject = new FunctionalConstructor("Vishal Thakur")

    Prototype:

    function FunctionPrototype(){}

    FunctionPrototype.prototype.name = "Vishal Thakur"

    var myObject = new FunctionPrototype();

   

ES6 Class:

    class MyClassInitialize{

        constructor(FullName) {

        this.FullName = FullName

        }

    }

    var myObject = new MyClassInitialize("Vishal Thakur");

   

Singleton:

   

    var mySingletonObject = new function(){

    this.fullName = "Vishal Thakur";

    }

   

Question 5. What is the Prototype in JavaScript?

Answer: The prototype is a technique by that JavaScript inherit the feature of one another. it is a very large area and how it is going to work to understand, need to understand the Prototype chain.

Question 6. What is the splice method in JavaScript?

Answer: The splice method is used to remove or delete the index value from the existing array.

Splice is modified to the existing array and return the deleted array.

    let firstArray= [1, 2, 3, 4, 5];

    let firstVariable= firstArray.splice(0,2); // returns [1, 2]; original array:

    //[3, 4, 5]

   

Question 7. What is the call() function in JavaScript?

Answer: The Call function is used to Invoke the method which is used with different objects. it invokes objects one by one as seperate object using this value.

   

    var objectOfEmployee1 = {fName: 'Vishal', lName: 'Thakur'};

    var objectOfEmployee2 = {fName: 'Johny', lName: 'Cruse'};

    function Invoker(obj1, obj2) {

        console.log(obj1 + ' ' + this.fName + ' ' + this.lName+ ', '+ obj2);

    }

    Invoker.call(objectOfEmployee1, 'Good Day!!', 'How are you?');

    Invoker.call(objectOfEmployee2, 'Good Day!!', 'How are you?');

   

Question 8. What is apply() function is used?

Answer: The apply() method is similar to the call() method, only the difference is to apply() takes arguments in an array, whereas call() takes it in separate arguments

    const personalInfo = {

        name: function(mobile, address) {

        return this.fName + " " + this.lName + "," + mobile + "," + address;

        }

    }

    const employee = {

        fName:"Vishal",

        lName: "Thakur"

    }

    personalInfo.name.apply(employee, ["1234567890", "Indore India"]);

    //'Vishal Thakur,1234567890,Indore India'

   

Question 9. What is the bind() method used for?

Answer: bind() method is used to pass n-number of arguments, it will return a new function, it differs from the apply() and call()

    var firstEmployeeDetails = {fullName: 'Vishal Thakur', mobile: '1234567890'};

    var secondEmployeeDetails = {fullName: 'Avtrit Thakur', mobile: '0912345689'};

    function invoker(obj1, obj2) {

        console.log(obj1 + ' ' + this.fullName + ' ,' + this.mobile+ ', '+ obj2);

    }

    var varDetailsEmployee1 = invoker.bind(firstEmployeeDetails);

    var varDetailsEmployee2 = invoker.bind(secondEmployeeDetails);

    varDetailsEmployee1('Hello', 'Hop you are doing great!!');

    // Hello Vishal Thakur ,1234567890, Hop you are doing great!!

    varDetailsEmployee2('Hi', 'Have a great day!!');

    //Hi Avtrit Thakur ,0912345689, Have a great day!!

   

Question 10. What is the Splice() and Slice() method used in JavaScript?

Answer: the difference between both methods are below

Question 11. What is the arrow function or lambda function in modern JavaScript?

Answer: The arrow function or lambda function is the new way of writing the code, it comes after the new standard applied from ES6, the main advantage of the arrow function is to make the code syntax shorter and create the function expression

    public myFunction = () => {

        //do some line of code here

    }

Question 12. What is Hoisting in JavaScript?

Answer: The term Hoisting is used to declare the function and variable at the top of the code above its scope before the code execution

JavaScript only used declaration and skip the initialization at the top

let's take an example:

    var objectMessage;

    console.log(objectMessage);

    objectMessage = 'The Message variable has been hoisted at the top';

Question 13. What do we understand by a term service worker in JavaScript?

Answer: The concept of the service worker is a service that is running in the background and completely separate from web pages and apps,

Question 14. What is web storage in JavaScript?

Answer: Web Storage is the technique used to store the information into the client web browser, it can store info in key/value pairs.

it has two types

Local Storage Techniques: It stores the data with no expiration validation and is stored for a number of months or years.

Session Storage Techniques: this technique uses to store the data for one session and data will be lost if the browser or tab was closed.

Question 15. How many parts are in JavaScript?

Answer: JavaScript consists of 3 main parts

1. ECMAScript

2. JavaScript Engine

3. JavaScript Runtime

Question 16: What is the difference between "undefined" and "null" in JavaScript? Answer: In JavaScript, "undefined" is a primitive value that indicates a variable has been declared but has not been assigned a value. It is the default value for variables. On the other hand, "null" is an assignment value that represents the intentional absence of any object value. It can be assigned to a variable to indicate that it has no value or that it is cleared of its previous value.

Question 17: What are closures in JavaScript and how are they used? Answer: Closures are a powerful feature in JavaScript that allow functions to retain access to variables from the outer scope, even after the outer function has finished executing. This is achieved by creating a function within another function, which forms a closure. Closures are commonly used for encapsulation, data privacy, and creating functions with persistent state.

Question 18: Explain the concept of prototypal inheritance in JavaScript. Answer: Prototypal inheritance is a mechanism in JavaScript where objects can inherit properties and methods from other objects. Every object in JavaScript has an internal property called the prototype, which can be either another object or null. When a property or method is accessed on an object, JavaScript first looks for it in the object itself. If it's not found, it looks in the object's prototype, and continues up the prototype chain until the property or method is found or the end of the chain (null) is reached.

Question 19: What are arrow functions in JavaScript? What are their advantages and limitations? Answer: Arrow functions are a shorthand syntax for writing functions in JavaScript. They provide a concise way to write function expressions and have a lexical scope for the "this" value. The advantages of arrow functions include shorter syntax, implicit return of single expressions, and the binding of "this" to the surrounding context. However, they also have some limitations, such as not having their own "arguments" object and not being suitable for methods that require a dynamic "this" context.

Question 20: What is asynchronous programming in JavaScript? How is it achieved? Answer: Asynchronous programming in JavaScript allows for non-blocking operations, which means that multiple tasks can be executed concurrently without waiting for each other to complete. Asynchronous programming is typically achieved using callbacks, promises, or async/await. Callbacks are the traditional approach, where a function is passed as an argument and called when an asynchronous operation completes. Promises provide a more structured way to handle asynchronous operations and avoid callback hell. Async/await is a syntax introduced in ES2017 that allows writing asynchronous code in a more synchronous-looking manner.

Question 21: Explain the event loop in JavaScript and how it handles asynchronous operations. Answer: The event loop is a critical component of JavaScript's concurrency model. It is responsible for managing the execution of code in a single-threaded environment and handling asynchronous operations. The event loop continuously checks for tasks in the event queue. When the call stack is empty, it takes the next task from the queue and pushes it onto the call stack for execution. This allows JavaScript to handle asynchronous operations, such as callbacks or promises, by deferring their execution until the call stack is clear.

Question 22: What are generators in JavaScript? How are they different from regular functions? Answer: Generators are a special type of function in JavaScript that can be paused and resumed during execution. They are defined using the function* syntax and use the "yield" keyword to pause execution and return a value. Generators provide an iterable interface and can be used to create iterators. Unlike regular functions, generators allow for multiple values to be returned and support two-way communication between the generator and the caller using the "yield" and "next" methods.

Question 23: How does JavaScript handle hoisting? Answer: Hoisting is a JavaScript behavior where variable and function declarations are moved to the top of their respective scopes during the compilation phase. This means that variables and functions can be used before they are declared in the code. However, only the declarations are hoisted, not the initializations or assignments. It's important to be aware of hoisting to avoid unexpected behaviors and declare variables and functions before using them.

Question 24: What is the "this" keyword in JavaScript and how is it determined? Answer: The "this" keyword refers to the context in which a function is executed. It allows accessing properties and methods of the current object. The value of "this" is determined by the way a function is invoked. In the global scope or inside a regular function, "this" refers to the global object (e.g., "window" in a browser). However, in methods, "this" refers to the object on which the method is called. The value of "this" can also be explicitly set using call(), apply(), or bind() methods.

Question 25: What is event delegation in JavaScript? How does it work? Answer: Event delegation is a technique in JavaScript where a single event handler is attached to a parent element to handle events for its child elements. Instead of attaching event handlers to each individual child element, event delegation takes advantage of event bubbling, where events propagate from the target element up through its ancestors. By capturing the event at a higher level, you can handle events for multiple elements with a single event listener. This approach improves performance and simplifies event management, especially for dynamically added or removed elements.

Question 26: What are the differences between ES6 classes and constructor functions in JavaScript? Answer: ES6 classes and constructor functions are both used for creating objects and defining object-oriented patterns in JavaScript, but there are some key differences: Syntax: ES6 classes use the class syntax, making it more concise and similar to class-based languages. Constructor functions, on the other hand, use a function-based syntax with the "new" keyword. Inheritance: ES6 classes support cleaner and more explicit inheritance through the "extends" keyword, while constructor functions use prototypes for inheritance. Methods: ES6 classes allow methods to be defined directly within the class body, while constructor functions define methods on the prototype object. Hoisting: Class declarations are not hoisted, so they cannot be used before they are declared. Constructor functions can be hoisted, allowing them to be used before their actual definition.

Question 27: How can you handle errors and exceptions in asynchronous JavaScript code? Answer: When working with asynchronous JavaScript code, handling errors and exceptions requires specific approaches: Using Promises: Use the ".catch()" method to handle errors in Promise chains. Any error that occurs within the chain will be caught by the closest ".catch()" handler. Using async/await: Within async functions, use the "try/catch" block to catch errors. When awaiting a Promise, any rejected Promise will throw an error that can be caught using the "catch" block. Using event listeners: For asynchronous operations that involve events, you can attach error event listeners to handle errors that occur during the operation. Using the "window.onerror" event: For uncaught errors that escape all other handlers, you can use the "window.onerror" event to catch and log them.

Question 28: What is the "Event Loop" in Node.js, and how does it differ from the browser's event loop? Answer: The "Event Loop" in Node.js is the same concept as the browser's event loop but with some differences due to the environment: Single-threaded vs. Multi-threaded: Node.js is single-threaded, so it uses a single event loop to handle asynchronous operations. In contrast, the browser's event loop runs in the main thread but can offload some tasks to Web APIs (like setTimeout), which run in separate threads. APIs: In the browser, Web APIs handle asynchronous tasks like setTimeout, XMLHttpRequest, and DOM manipulation. In Node.js, similar tasks are managed by the libuv library and the underlying system.

Question 29: What is memoization, and how can it improve the performance of JavaScript functions? Answer: Memoization is an optimization technique used to cache the results of expensive function calls and return the cached result when the same inputs occur again. This avoids redundant calculations, improving the performance of the function. Memoization can be implemented manually using objects or maps to store the cached results, or by using specialized libraries like "lodash.memoize".

Question 30: Explain the different ways of handling "this" in JavaScript functions. Answer: Handling "this" in JavaScript functions can be tricky, especially in different contexts like regular functions, arrow functions, and event handlers. Some common ways to deal with "this" are: Using ".bind()": Use the ".bind()" method to bind the value of "this" explicitly to a function. It creates a new function with a fixed "this" value. Using "self" or "that": In regular functions, you can store the reference to "this" in a variable (e.g., "self" or "that") to access it inside nested functions or event handlers. Using arrow functions: Arrow functions have lexical scoping for "this", meaning they inherit the "this" value from their surrounding context. They are useful when you want to maintain the outer "this" context.

SharePoint SPFx Interview Questions