Javascript FAQ with examples

-

 Here is a comprehensive list of JavaScript FAQs with answers and examples. These cover key concepts, features, and common scenarios that developers often encounter.

1. What is JavaScript?

JavaScript is a high-level, interpreted programming language that is primarily used for creating interactive effects within web browsers. It enables developers to create dynamic content, such as interactive forms, animations, and games.

Example:

html
<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Example</title>
</head>
<body>
  <h1>Hello, JavaScript!</h1>
  <script>
    alert("Welcome to JavaScript!");
  </script>
</body>
</html>

2. What are variables in JavaScript?

Variables in JavaScript are used to store data that can be accessed and manipulated later. You declare variables using var, let, or const.

  • var is function-scoped (older way of declaring variables).
  • let is block-scoped and allows reassignment.
  • const is also block-scoped but does not allow reassignment.

Example:

javascript
let name = "John";  // String type variable
const age = 30;     // Constant variable

name = "Jane";      // Reassignable (let)

console.log(name);  // Output: Jane
console.log(age);   // Output: 30

3. What is the difference between var, let, and const?

  • var: Function-scoped, can be re-assigned and redeclared.
  • let: Block-scoped, can be re-assigned but not redeclared.
  • const: Block-scoped, cannot be re-assigned or redeclared.

Example:

javascript
var x = 10;  // function-scoped
let y = 20;  // block-scoped
const z = 30; // block-scoped, immutable

// x, y, and z can be modified (except const z, which cannot be reassigned)
x = 15;
y = 25;

4. What are functions in JavaScript?

Functions are reusable blocks of code that perform a specific task. They are defined using the function keyword or as an arrow function.

Example (Function Declaration):

javascript
function greet(name) {
  return "Hello, " + name;
}

console.log(greet("Alice")); // Output: Hello, Alice

Example (Arrow Function):

javascript
const greet = (name) => `Hello, ${name}`;

console.log(greet("Bob")); // Output: Hello, Bob

5. What is a callback function?

A callback function is a function passed as an argument to another function, which is executed at a later time, usually after an event or operation is completed.

Example:

javascript
function fetchData(callback) {
  setTimeout(() => {
    console.log("Data fetched");
    callback();
  }, 2000);
}

fetchData(() => {
  console.log("Callback function executed");
});

6. What is a closure in JavaScript?

A closure is a function that "remembers" its lexical environment (i.e., the scope in which it was defined), even when the function is executed outside that scope.

Example:

javascript
function outerFunction() {
  let count = 0;
  return function innerFunction() {
    count++;
    console.log(count);
  };
}

const counter = outerFunction();
counter();  // Output: 1
counter();  // Output: 2

7. What is event delegation?

Event delegation is a technique in JavaScript where a single event listener is added to a parent element instead of multiple listeners for child elements. This helps improve performance and ensures that dynamically added elements are also covered by the event listener.

Example:

html
<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
  document.getElementById('list').addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
      alert(event.target.textContent);
    }
  });
</script>

8. What are promises in JavaScript?

A Promise is an object representing the eventual completion or failure of an asynchronous operation. It allows you to handle asynchronous code more effectively using .then() for success and .catch() for errors.

Example:

javascript
const promise = new Promise((resolve, reject) => {
  let success = true;

  if (success) {
    resolve("Operation successful!");
  } else {
    reject("Something went wrong!");
  }
});

promise
  .then(result => console.log(result))  // Output: Operation successful!
  .catch(error => console.log(error));

9. What is async/await?

async and await are syntactic sugar for working with promises. async is used to declare a function that returns a promise, and await is used inside the async function to wait for the promise to resolve.

Example:

javascript
function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("Data fetched successfully");
    }, 2000);
  });
}

async function getData() {
  const result = await fetchData();
  console.log(result);  // Output: Data fetched successfully
}

getData();

10. What is the difference between == and === in JavaScript?

  • == performs a type coercion (it converts the operands to the same type before comparing).
  • === performs a strict comparison (it does not convert types).

Example:

javascript
console.log(5 == '5');   // true (type coercion happens)
console.log(5 === '5');  // false (no type coercion)

11. What are JavaScript data types?

JavaScript has several data types, including:

  • Primitive Types: string, number, boolean, undefined, null, symbol, bigint.
  • Reference Types: object, array, function.

Example:

javascript
let name = "Alice";    // string
let age = 25;          // number
let isActive = true;   // boolean
let person = null;     // null
let obj = { name: "John", age: 30 }; // object
let arr = [1, 2, 3];   // array

12. What is the difference between null and undefined?

  • null is an intentional assignment of "no value" and is explicitly set by the programmer.
  • undefined means a variable has been declared but has not been assigned a value.

Example:

javascript
let a;      // undefined (variable declared, no value assigned)
let b = null; // null (explicitly set to "no value")

console.log(a);  // Output: undefined
console.log(b);  // Output: null

13. What is the this keyword in JavaScript?

this refers to the context in which a function is executed. It can vary based on where and how a function is called.

Example:

javascript
function showThis() {
  console.log(this);
}

const obj = {
  name: "Alice",
  show: showThis
};

obj.show();  // Output: { name: 'Alice', show: [Function: showThis] }

In the global context, this refers to the global object (window in browsers).

14. What is the difference between setTimeout() and setInterval()?

  • setTimeout() executes a function once after a specified delay.
  • setInterval() executes a function repeatedly with a specified interval.

Example:

javascript
// setTimeout example:
setTimeout(() => {
  console.log("This runs after 2 seconds");
}, 2000);

// setInterval example:
setInterval(() => {
  console.log("This runs every 2 seconds");
}, 2000);

15. What are higher-order functions in JavaScript?

Higher-order functions are functions that take other functions as arguments or return functions. They enable more abstract and reusable code.

Example:

javascript
function multiply(a, b) {
  return a * b;
}

function higherOrderFunc(fn) {
  return fn(5, 10);
}

console.log(higherOrderFunc(multiply));  // Output: 50

16. What is destructuring in JavaScript?

Destructuring is a shorthand way of unpacking values from arrays or properties from objects into distinct variables.

Example (Array Destructuring):

javascript
const arr = [1, 2, 3];
const [a, b] = arr;
console.log(a, b);  // Output: 1 2

Example (Object Destructuring):

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

Conclusion

These FAQs cover essential concepts of JavaScript that every developer should understand. From basic syntax, variables, and functions, to more advanced topics like promises, closures,

Comments

Post a Comment

Popular posts from this blog

PrimeNG tutorial with examples using frequently used classes

-
  PrimeNG Tutorial: Frequently Used Classes and Components PrimeNG is a comprehensive and flexible UI component library for Angular applications. It provides a wide range of ready-to-use components like forms, data tables, dialogs, buttons, and many others, all styled using Material Design principles. In this tutorial, we will explore some of the frequently used components and classes in PrimeNG , along with examples for creating interactive, modern, and responsive UIs. 1. Setting Up PrimeNG Before using PrimeNG components, you need to install PrimeNG in your Angular project. If you haven’t done so, follow these steps: Step 1: Install PrimeNG and PrimeIcons Run the following commands to install PrimeNG and PrimeIcons: bash Copy code npm install primeng npm install primeicons Step 2: Import Required Modules After installation, you need to import the relevant PrimeNG modules in your app.module.ts . Example of importing commonly used modules: typescript Copy code import { NgModule ...
Read more

Docker and Kubernetes Tutorials and QnA

-
 Docker and Kubernetes Tutorials: Detailed Guide Let's dive into detailed tutorials for Docker and Kubernetes, starting with their core concepts and progressing to hands-on examples. These tutorials are designed for both beginners and intermediate learners. Part 1: Docker Tutorial 1. Introduction to Docker Docker is a platform used to develop, ship, and run applications inside containers. Containers are lightweight, portable, and ensure consistent environments across different stages of the application lifecycle. They help solve the "works on my machine" problem. Key Concepts of Docker: Images : A blueprint for containers, containing everything needed to run an application (code, runtime, libraries, etc.). Containers : A runtime instance of an image, running isolated from the host system. Dockerfile : A script with a set of instructions to build Docker images. Docker Hub : A public repository of Docker images. Docker Compose : A tool to define and manage multi-container a...
Read more

Building strong foundational knowledge in frontend development topics

-
 These topics are essential for building strong foundational knowledge, and each comes with a simple solution or code snippet to illustrate the concept. 1. What is the difference between HTML, CSS, and JavaScript? Answer : HTML (Hypertext Markup Language) is used for structuring web content (headings, paragraphs, images, links, etc.). CSS (Cascading Style Sheets) is used for styling the layout, design, and appearance of the web content. JavaScript is used for adding interactivity and dynamic behavior to the website (e.g., form validation, animations, events). html <!-- HTML --> < div class = "box" > </ div > css /* CSS */ .box { width : 100px ; height : 100px ; background-color : blue; } javascript // JavaScript document . querySelector ( '.box' ). addEventListener ( 'click' , function ( ) { alert ( 'Box clicked!' ); }); 2. What are semantic HTML elements and why are they important? Answer : Semantic HTML elements cl...
Read more