Advanced-level JavaScript concepts and examples

advanced-level JavaScript concepts and examples

1. Prototypes and Prototypal Inheritance:
   JavaScript uses prototypal inheritance to share properties and methods between objects.

// Constructor Function
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// Prototype Method
Person.prototype.greet = function () {
  console.log("Hello, " + this.name + "!");
};

let person = new Person("John", 25);
person.greet();

2. Closures:
   Closures allow functions to access variables from an outer function, even after the outer function has returned.

function outer() {
  let count = 0;

  function inner() {
    count++;
    console.log(count);
  }

  return inner;
}

let counter = outer();
counter();
counter();

3. Event Handling:
   JavaScript enables you to handle and respond to various events, such as clicks and keypresses, in web applications.

let button = document.querySelector("#myButton");

button.addEventListener("click", function () {
  console.log("Button clicked!");
});

4. Asynchronous Programming:
   JavaScript provides mechanisms to handle asynchronous operations, such as callbacks, promises, and async/await.

// Callbacks
function fetchData(callback) {
  setTimeout(() => {
    callback("Data fetched successfully!");
  }, 2000);
}

fetchData(function (data) {
  console.log(data);
});

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

fetchData().then(function (data) {
  console.log(data);
});

// Async/Await
async function processData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.log("Error:", error);
  }
}

processData();

5. Modules:
   ES6 modules provide a standardized way to organize and share code between JavaScript files.

// Module: math.js
export function add(a, b) {
  return a + b;
}

// Module: main.js
import { add } from "./math.js";

console.log(add(5, 3));

6. Regular Expressions:
   Regular expressions allow for advanced pattern matching and manipulation of strings.

let pattern = /hello/i;
let str = "Hello, World!";

console.log(pattern.test(str)); // true
console.log(pattern.exec(str)); // ["Hello"]
console.log(str.replace(pattern, "Hi")); // "Hi, World!"

7. Error Handling and Debugging:
   JavaScript provides error handling mechanisms like try/catch blocks, as well as debugging tools and techniques.

try {
  // Code that might throw an error
  throw new Error("Something went wrong");
} catch (error) {
  console.log("Error:", error);
}

// Debugging with console
console.log("Debugging message");

// Using breakpoints in browser developer tools

8. Web APIs:
   JavaScript provides access to various Web APIs, enabling interaction with browser features and external services.

// Fetch API
fetch("https://api.example.com/data")
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    console.log(data);
  })
  .catch(function (error) {
    console.log("Error:", error);
  });

// Geolocation API
navigator.geolocation.getCurrentPosition(function (position) {
  console.log(position.coords.latitude, position.coords.longitude);
});

These advanced-level JavaScript concepts and examples will help you tackle complex programming challenges