javascript Interview Questions

Answer:

JavaScript is a high-level, interpreted programming language.

Answer:

Key features include interpreted and lightweight, object-oriented, prototypal inheritance, first-class functions, dynamic typing, and browser compatibility.

Answer:

null is a value representing intentional absence of any object value. undefined is a variable declared but not assigned any value.

Answer:

JavaScript has six primitive data types: undefined, null, boolean, number, string, and symbol (added in ES6). Objects are also a data type.

const x = 5; // number
const y = 'Hello'; // string
const z = { name: 'John' }; // object

Answer:

== checks for equality after type conversion. === checks for equality without type conversion (strict equality).

0 == '0' // true
0 === '0' // false

Answer:

A closure is a function that retains access to its lexical scope (enclosing function's scope) even when the function is executed outside that lexical scope.

function outer() {
  const outerVar = 'I am outside!';
  function inner() {
    console.log(outerVar); // 'I am outside!'
  }
  return inner;
}
const innerFn = outer();
innerFn();

Answer:

Event delegation refers to the process of using a single event listener on a parent element to manage events for its child elements.

document.getElementById('parent').addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log('List item clicked!');
  }
});

Answer:

JavaScript uses prototypal inheritance where objects can inherit properties and methods from other objects. Each object has a prototype object, and properties/methods are inherited through the prototype chain.

Answer:

The this keyword refers to the object to which a function or method belongs and is typically determined by how a function is called.

const person = {
  name: 'John',
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
};
person.greet(); // 'Hello, my name is John'

Answer:

Promises are objects that represent the eventual completion (or failure) of an asynchronous operation and its resulting value.

Answer:

var has function scope and can be re-declared and updated. let has block scope and can be updated but not re-declared. const has block scope and cannot be updated or re-declared.

var x = 1;
let y = 2;
const z = 3;

Answer:

Arrow functions are a concise way to write function expressions in JavaScript, with a shorter syntax compared to traditional function expressions.

const add = (a, b) => a + b;

Answer:

The spread operator (...) allows an iterable (like an array) to be expanded into individual elements.

const arr = [1, 2, 3];
const newArr = [...arr, 4, 5];

Answer:

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their containing scope during the compile phase.

console.log(x); // undefined
var x = 5;

Answer:

Objects can be created using object literals ({}), constructor functions with new, Object.create() method, and ES6 Classes.

const obj = {};
function Person(name) {
  this.name = name;
}
const john = new Person('John');
const obj = Object.create(null);

Answer:

A callback function is a function passed into another function as an argument to be executed later.

Answer:

Event bubbling is the process where an event propagates from the element that triggered it up to its ancestors in the DOM tree.

document.getElementById('child').addEventListener('click', function(event) {
  console.log('Child clicked!');
  event.stopPropagation();
});
document.getElementById('parent').addEventListener('click', function() {
  console.log('Parent clicked!');
});

Answer:

The bind method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

const person = {
  name: 'John',
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
};
const greet = person.greet;
const greetJohn = greet.bind(person);
greetJohn(); // 'Hello, my name is John'

Answer:

ES6 modules are a way of structuring and organizing JavaScript code by splitting it into multiple files, each having its own module scope.

Answer:

Errors in JavaScript can be handled using try, catch, and finally blocks, or by using Promise chaining with .catch().

try {
  throw new Error('Something went wrong!');
} catch (error) {
  console.error(error.message);
} finally {
  console.log('Done!');
}

Answer:

Operators in JavaScript include arithmetic, assignment, comparison, logical, bitwise, and ternary (conditional) operators.

Answer:

The Event Loop is a mechanism in JavaScript that handles asynchronous operations by placing them in the event queue and executing them in sequence.

console.log('Hello!');
setTimeout(() => console.log('World!'), 0);
console.log('Goodbye!');

Answer:

async and await are keywords used with asynchronous functions (async functions) to simplify writing and handling of asynchronous code, making it look synchronous.

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

Answer:

A closure is a feature in JavaScript where an inner function has access to the outer (enclosing) function’s variables. The inner function has access to its own scope, the outer function’s variables, and the global variables.

Answer:

JavaScript handles asynchronous code using callbacks, promises, async/await, and the event loop mechanism. Callbacks are functions passed as arguments to other functions, and they are executed after the operation they were passed to completes. Promises are objects representing the eventual completion or failure of an asynchronous operation, and they allow chaining multiple asynchronous operations. Async/await is syntactic sugar built on top of promises, allowing asynchronous code to be written in a synchronous-like manner. The event loop is a mechanism that allows JavaScript to perform non-blocking I/O operations by offloading operations to different threads and then queuing them in a task queue (event queue) to be executed in sequence.

Answer:

forEach and map are both methods on the Array prototype in JavaScript used to iterate over arrays. forEach executes a provided function once for each array element, but it does not return a value. map, on the other hand, executes a provided function once for each array element and constructs a new array populated with the results of calling the provided function on every element in the calling array.

Answer:

Higher-order functions are functions that can take other functions as arguments or return them as results.

Answer:

`typeof` is an operator in JavaScript that returns the data type of its operand.

typeof 42; // 'number'
typeof 'Hello'; // 'string'
typeof true; // 'boolean'

Answer:

Function declarations in JavaScript are hoisted to the top of their containing scope during the compile phase, meaning they can be used before they are declared.

sayHello();
function sayHello() {
  console.log('Hello!');
}

Answer:

Function declarations are hoisted and can be used before they are declared, whereas function expressions are not hoisted. Function expressions can be anonymous or named, while function declarations are always named.

Answer:

A generator function is a special type of function in JavaScript that can pause execution and resume it later, allowing them to produce a sequence of values lazily.

Answer:

Template literals are string literals allowing embedded expressions. They are enclosed by backticks (` `) instead of double or single quotes.

Answer:

Currying is a technique of translating the evaluation of a function that takes multiple arguments into evaluating a sequence of functions, each with a single argument.

function multiply(a) {
  return function(b) {
    return a * b;
  };
}
const multiplyByTwo = multiply(2);
console.log(multiplyByTwo(3)); // 6

Answer:

`call` and `apply` are methods that allow invoking a function with a specified `this` context and arguments. `call` accepts arguments individually, while `apply` accepts arguments as an array. `bind` returns a new function with a specified `this` context and initial arguments.

const person = { name: 'John' };
function greet(greeting) {
  console.log(`${greeting}, ${this.name}`);
}
greet.call(person, 'Hello');
greet.apply(person, ['Hello']);
const greetHello = greet.bind(person, 'Hello');
greetHello();

Answer:

ES6 introduced several new features such as let and const for variable declarations, arrow functions, classes, template literals, destructuring assignment, default parameters, rest parameters, spread syntax, and more.

Answer:

Object destructuring is a convenient way to extract multiple values from an object and assign them to variables in a single statement.

const person = { name: 'John', age: 30 };
const { name, age } = person;
console.log(name, age); // 'John', 30

Answer:

Asynchronous code in JavaScript can be handled using callbacks, promises, async/await, and event listeners. Each method has its advantages depending on the use case and complexity of the asynchronous operation.

Answer:

`use strict` is a directive introduced in ES5 that enables strict mode semantics. It helps catch common coding errors and enforces stricter parsing and error handling in JavaScript.

Answer:

Prototypal inheritance in JavaScript involves objects inheriting properties and methods directly from other objects. Classical inheritance typically involves classes inheriting from other classes, often through a hierarchical class structure.

Answer:

You can create a shallow copy of an object using object spread `{ ...obj }`, `Object.assign({}, obj)`, or `Object.create()` for prototype-based copies. For deep copies, you may need to use libraries like lodash or write custom functions.

Answer:

Memoization is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again.

Answer:

`Array.prototype.reduce` is used to apply a function to each element in the array to reduce the array to a single value. It accumulates the results of the function applied to each element.

Answer:

Cross-origin requests can be handled using CORS (Cross-Origin Resource Sharing). Servers can specify who can access their resources using HTTP headers like `Access-Control-Allow-Origin`.

Answer:

`setTimeout` is a function that executes a function or evaluates an expression after a specified period of time. `setInterval` is a function that repeatedly executes a function or evaluates an expression at specified intervals.

setTimeout(() => {
  console.log('Hello!');
}, 1000);
setInterval(() => {
  console.log('World!');
}, 2000);

Answer:

The EventEmitter class in Node.js is a core module that provides an implementation of the observer pattern. It allows objects to emit named events that cause listener functions to be called.

const EventEmitter = require('events');
class MyEmitter extends EventEmitter {}
const myEmitter = new MyEmitter();
myEmitter.on('event', () => {
  console.log('an event occurred!');
});
myEmitter.emit('event');

Answer:

Memory leaks in JavaScript can be handled by removing event listeners when they are no longer needed, avoiding circular references, and using tools like Chrome DevTools for memory profiling.

Answer:

`window.onload` waits for all resources (like images) to be loaded, while `DOMContentLoaded` fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes.

Answer:

Event capturing and event bubbling are two phases of event propagation in the DOM. During event capturing, the event is captured by the outermost element and propagated to the target element. Event bubbling, on the other hand, propagates the event from the target element back up to the outermost element.

Answer:

Function scope refers to the visibility of variables within a function. Variables declared inside a function are not accessible outside that function. Block scope refers to the visibility of variables within curly braces `{ }`, like those used in `if` statements or loops introduced in ES6 with `let` and `const`, which are not accessible outside of the block they are defined in.

Answer:

`setTimeout` executes a function or evaluates an expression after a specified delay, while `setInterval` repeatedly executes a function or evaluates an expression at specified intervals, continuing until `clearInterval` is called or the window is unloaded.

Answer:

`event.preventDefault()` is a method that stops the default action of an event from occurring. It is commonly used to prevent form submissions or anchor clicks from navigating to another URL.

Answer:

Memoization is a technique used to improve performance by caching the results of expensive function calls and returning the cached result when the same inputs occur again. It can be implemented using closures in JavaScript.

Answer:

`null` represents the intentional absence of any object value. `undefined` indicates that a variable has been declared but has not been assigned a value. `NaN` stands for 'Not-a-Number' and is a value returned when a mathematical operation is intended but cannot be performed.

Answer:

An IIFE is a JavaScript function that runs as soon as it is defined. It is executed immediately after being created and is typically used to create local scopes to avoid polluting the global scope.

Answer:

Web Workers are a mechanism in JavaScript that runs scripts in background threads, allowing for long-running scripts that do not interfere with the main execution thread of the web page. They enable multi-threading in web applications.

Answer:

Callback hell refers to the nesting of multiple callbacks within each other, resulting in code that is difficult to read, maintain, and debug. To avoid callback hell, use named functions instead of anonymous functions, modularize code, and utilize promises or async/await for cleaner asynchronous code.

doSomething(function(result) {
  doSomethingElse(result, function(newResult) {
    doAnotherThing(newResult, function(finalResult) {
      console.log(finalResult);
    });
  });
});