JavaScript Interview Questions

JavaScript was created by Brendan Eich, a programmer working at Netscape Communications Corporation. He developed the language in just ten days in May 1995, while he was working on the Netscape Navigator web browser. JavaScript was originally named “Mocha,” but it was quickly renamed to “LiveScript” and later to “JavaScript” to capitalize on the popularity of Java, which was gaining traction at the time.

What are the differences between Java and JavaScript?

Java and JavaScript are two distinct programming languages with different origins, purposes, and use cases. Despite their similar names, they have significant differences:

1. Origin and History:

• Java: Java was developed by James Gosling at Sun Microsystems (later acquired by Oracle) in the early 1990s. It was originally designed as a general-purpose programming language for building platform-independent applications.
• JavaScript: JavaScript, originally named LiveScript, was created by Brendan Eich at Netscape in 1995. It was initially developed as a scripting language for web browsers to add interactivity to web pages.

1. Type of Language:

• Java: Java is a strongly typed, statically typed language. Variables must be explicitly declared with a specific data type, and type checking is performed at compile-time.
• JavaScript: JavaScript is a loosely typed, dynamically typed language. Variables do not require explicit type declarations, and type checking is performed at runtime.

1. Usage:

• Java: Java is primarily used for building standalone applications, server-side applications, Android apps, and large-scale enterprise systems.
• JavaScript: JavaScript is mainly used for front-end web development, adding interactivity to web pages, and building web applications. With Node.js, it can also be used for server-side development.

1. Platform:

• Java: Java code is compiled into bytecode, which is executed by the Java Virtual Machine (JVM). This allows Java programs to run on any platform with a compatible JVM.
• JavaScript: JavaScript is executed directly by web browsers or server-side environments like Node.js. It is built into web browsers, so it can run on any device with a web browser.

1. Syntax and Grammar:

• Java: Java has C-style syntax with a focus on object-oriented programming (OOP) principles. It uses classes and objects to structure code.
• JavaScript: JavaScript has a C-style syntax similar to Java, but its programming paradigm is prototype-based OOP, where objects can be directly created without classes.

1. Concurrency:

• Java: Java has built-in support for multithreading and concurrency with features like threads and synchronization.
• JavaScript: JavaScript is single-threaded, but it can leverage asynchronous programming techniques like callbacks, promises, and async/await for non-blocking operations.

1. Libraries and Ecosystem:

• Java: Java has a vast ecosystem with a rich set of libraries and frameworks for various purposes, including Spring, Hibernate, Apache Struts, etc.
• JavaScript: JavaScript has a thriving ecosystem with numerous libraries and frameworks for front-end development (e.g., React, Angular, Vue.js) and server-side development (e.g., Express.js, Koa, Nest.js).

In summary, while Java and JavaScript share a few similarities in syntax, they are distinct languages with different purposes and usage scenarios. Java is a versatile, platform-independent language used for various applications, whereas JavaScript is primarily used for front-end web development and interactivity on web pages.

What are the different data types present in javascript?

In JavaScript, there are several primitive data types and a special data type for handling more complex structures. Here are the main data types in JavaScript:

1. Number: Represents numeric values, including integers and floating-point numbers.

let age = 30;
let pi = 3.14;

2. String: Represents a sequence of characters, enclosed in single quotes (‘ ‘) or double quotes (” “).

let name = 'John';
let message = "Hello, world!";

3. Boolean: Represents a logical value, either true or false.

let isStudent = true;
let isWorking = false;

4. Null: Represents the intentional absence of any value.

let score = null;

5. Undefined: Represents the absence of a defined value. Variables that are declared but not assigned a value are automatically assigned undefined.

let city; // undefined

6. BigInt: Represents integers with arbitrary precision. It is denoted by adding the letter “n” at the end of the number.

let bigNumber = 1234567890123456789012345678901234567890n;

7. Symbol: Represents a unique and immutable value, often used as an identifier for object properties.

const id = Symbol('user-id');

8. Object: Represents a collection of key-value pairs, also known as properties or attributes. Objects can contain primitive data types or other objects.

let person = {
  name: 'Alice',
  age: 25,
  isEmployed: true
};

JavaScript is a dynamically-typed language, which means that variables can change their data type during runtime. Additionally, arrays and functions are special types of objects in JavaScript, providing additional capabilities beyond simple data storage. Understanding these data types is crucial for effectively working with JavaScript variables and values.

Difference between var and let keyword in javascript

In JavaScript, both var and let are used for variable declaration, but they have some important differences in terms of scope and hoisting:

1. Scope:

• var: Variables declared with var are function-scoped. This means that they are only accessible within the function where they are defined or, if not defined within a function, they become global variables accessible throughout the entire script.
• let: Variables declared with let are block-scoped. This means that they are only accessible within the block (enclosed within curly braces {}) where they are defined. Variables declared with let are not visible outside of the block.

Example:

function exampleFunction() {
  if (true) {
    var x = 10; // Function-scoped
    let y = 20; // Block-scoped
  }
  console.log(x); // Output: 10
  console.log(y); // ReferenceError: y is not defined
}

2. Hoisting:

• var: Variables declared with var are hoisted to the top of their containing function or the global scope. This means that you can use a variable before it is declared, but it will have the value undefined.
• let: Variables declared with let are also hoisted, but they are in a “temporal dead zone” until they are formally declared. If you try to use a let variable before its declaration, you will encounter a ReferenceError.

Example:

console.log(x); // Output: undefined (No ReferenceError)
var x = 5;

console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 10;

3. Redeclaration:

• var: Variables declared with var can be redeclared within the same scope without any errors.
• let: Variables declared with let cannot be redeclared within the same block.

Example:

var a = 5;
var a = 10; // No error

let b = 5;
let b = 10; // SyntaxError: Identifier 'b' has already been declared

In modern JavaScript development, it is generally recommended to use let instead of var, as let provides better scoping rules and avoids some of the pitfalls associated with using var. It helps developers write more predictable and maintainable code. Additionally, using const for variables whose value will not change further helps ensure immutability.

Explain passed by value and passed by reference

“Passed by value” and “passed by reference” are two ways in which programming languages handle the passing of variables as arguments to functions or methods. The distinction between the two methods determines how changes made to the parameter inside the function affect the original variable outside the function.

1. Passed by Value:

• In “passed by value” (also known as call by value), a copy of the actual value of the variable is passed to the function as an argument. The function works with this copy, and any changes made to the parameter inside the function do not affect the original variable outside the function.
• This means that the function only has access to the value of the variable, not the original variable itself.
• Most primitive data types, such as numbers, booleans, and strings, are passed by value.

Example:

function incrementByValue(num) {
  num = num + 1;
  console.log(num); // Output: 6
}

let x = 5;
incrementByValue(x);
console.log(x); // Output: 5 (Original variable is not modified)

2. Passed by Reference:

• In “passed by reference,” a reference to the memory location of the variable is passed to the function as an argument. This means that the function can directly access and modify the original variable outside the function.
• This behavior is observed with objects (including arrays) and other non-primitive data types.
• When a reference type is passed to a function, both the original variable and the parameter inside the function point to the same memory location, so changes made to the parameter will also affect the original variable.

Example:

function addToArray(arr, value) {
  arr.push(value);
  console.log(arr); // Output: [1, 2, 3, 4]
}

let myArray = [1, 2, 3];
addToArray(myArray, 4);
console.log(myArray); // Output: [1, 2, 3, 4] (Original array is modified)

In summary, “passed by value” means that the function works with a copy of the original value and cannot modify the original variable, while “passed by reference” means that the function can directly access and modify the original variable. Understanding these concepts is crucial when working with functions and handling data in various programming languages.

What are object prototypes?

In JavaScript, object prototypes are a mechanism for implementing inheritance and sharing properties and methods between objects. Every object in JavaScript has an internal property called [[Prototype]], which references another object, often referred to as its “prototype.” The prototype is used as a fallback for property and method lookup if the property or method is not found directly on the object itself.

In simple terms, when you access a property or method on an object, JavaScript first checks if the property or method exists on the object. If it does not, JavaScript looks for the property or method on the object’s prototype. If it still cannot find the property or method, it looks on the prototype’s prototype, forming a chain known as the “prototype chain.” This chain continues until the property or method is found, or the end of the prototype chain is reached (where the final prototype is usually null).

Prototypes are primarily used to implement inheritance in JavaScript, allowing objects to inherit properties and methods from other objects. If a property or method is not found on the object itself, JavaScript looks up the prototype chain to find it in a higher-level prototype.

The relationship between objects and prototypes is often established using constructor functions or classes. When you create objects using constructor functions or classes, the [[Prototype]] of the created objects is set to the prototype property of the constructor function or class.

Here’s an example of creating object prototypes in JavaScript:

// Constructor function for a Person object
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// Adding a method to the prototype of the Person constructor
Person.prototype.sayHello = function () {
  console.log(`Hello, my name is ${this.name}, and I am ${this.age} years old.`);
};

// Creating a new object using the Person constructor
let john = new Person("John", 30);

// Accessing the method from the prototype
john.sayHello(); // Output: Hello, my name is John, and I am 30 years old.

In this example, the Person constructor has a prototype that contains the sayHello method. When we create a new Person object (in this case, john), the object inherits the sayHello method from its prototype.

Prototypes play a fundamental role in JavaScript’s object-oriented nature and are essential for creating efficient and maintainable code through inheritance and code reuse. However, with the introduction of modern JavaScript features like classes and extends, the concept of prototypes is often abstracted away for easier inheritance syntax. Nevertheless, it is crucial to understand prototypes to fully grasp JavaScript’s inheritance model.

What are callbacks?

Callbacks are a common programming concept in JavaScript and other languages that support asynchronous programming. A callback is a function that is passed as an argument to another function and is executed later, usually after the completion of some asynchronous operation or when a certain event occurs. Callbacks allow you to specify what should happen once a particular operation is completed or a certain event is triggered.

The main purpose of using callbacks is to handle asynchronous tasks and avoid blocking the execution of code. Asynchronous tasks are operations that take time to complete, such as making API calls, reading files, or handling user interactions. Rather than waiting for the task to complete, callbacks allow you to define what should be done when the task is finished without stopping the execution of other code.

Here’s a simple example to illustrate how callbacks work:

function fetchDataFromServer(callback) {
  // Simulating an asynchronous task that takes time to complete
  setTimeout(function() {
    const data = { name: "John", age: 30 };
    callback(data); // The callback function is called once the data is ready
  }, 2000); // Simulating a delay of 2 seconds
}

// Calling the function with a callback to handle the data
fetchDataFromServer(function(data) {
  console.log("Data received:", data);
});

console.log("Fetching data..."); // This line is executed immediately

In this example, fetchDataFromServer is a function that simulates an asynchronous task using setTimeout. It takes a callback function as an argument and calls that callback once the data is ready. When the asynchronous task is initiated, JavaScript doesn’t block the execution of the subsequent code. Instead, it continues to execute the code after the fetchDataFromServer call, printing “Fetching data…”. After the 2-second delay, the data is received, and the callback function is executed, printing “Data received: { name: ‘John’, age: 30 }”.

Callbacks are crucial for handling asynchronous operations in JavaScript, such as AJAX requests, file handling, and event handling. They are widely used in modern JavaScript frameworks and libraries to manage asynchronous tasks effectively. However, with the rise of promises and async/await in modern JavaScript, the use of callbacks has been somewhat supplanted in favor of more elegant and readable asynchronous code structures.