advanced-level JavaScript concepts and examples
- 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();
- 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();
- 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!");
});
- 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();
- 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));
- 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!"
- 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
- 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