Handling asynchronous operations is essential in JavaScript, especially for tasks like fetching data from a server, reading files, or setting timers. JavaScript provides Callbacks, Promises, and async\/await to manage asynchronous behavior efficiently.<\/p>\n
A callback is simply a function passed into another function as an argument, which is then invoked inside the outer function.<\/p>\n
function fetchData(callback) {<\/em> fetchData(function(data) {<\/em> Problems with Callbacks:<\/strong><\/p>\n A Promise represents a value that may be available now, later, or never. It’s an object with three states:<\/p>\n const fetchData = new Promise((resolve, reject) => {<\/em> fetchData.then(data => {<\/em> Advantages of Promises:<\/strong><\/p>\n async\/await is syntactic sugar built on top of Promises, making asynchronous code look synchronous and easier to write.<\/p>\n async function fetchData() {<\/em> fetchData();<\/em><\/p>\n Advantages of async\/await:<\/strong><\/p>\n Quick Summary:<\/strong><\/p>\n JavaScript provides the try…catch statement to gracefully handle errors that might occur during code execution without crashing the program.<\/p>\n try {<\/em> If riskyFunction() throws an error, JavaScript jumps to the catch block and runs the code inside it.<\/p>\n Error Object<\/strong><\/p>\n Example:<\/strong><\/p>\n try {<\/em> Optional finally Block<\/strong><\/p>\n You can add a finally block after try…catch, which always runs, whether an error occurred or not \u2014 useful for cleanup tasks.<\/p>\n try {<\/em> Common Use Cases for try…catch<\/strong><\/p>\n Quick Summary:<\/strong><\/p>\n Event bubbling happens when an event on a specific element starts there and bubbles up through its parent elements in the DOM hierarchy.<\/p>\n It allows parent elements to react to events fired by their children, unless the bubbling is stopped.<\/p>\n Example:<\/strong><\/p>\n <div id=”parent”><\/em> document.getElementById(‘child’).addEventListener(‘click’, () => {<\/em> document.getElementById(‘parent’).addEventListener(‘click’, () => {<\/em> When the button is clicked:<\/strong><\/p>\n Stopping Event Bubbling<\/strong><\/p>\n You can prevent the event from reaching parent elements using event.stopPropagation():<\/p>\n document.getElementById(‘child’).addEventListener(‘click’, (event) => {<\/em> Now only the child’s message will log.<\/p>\n Example:<\/strong><\/p>\n document.getElementById(‘parent’).addEventListener(‘click’, (event) => {<\/em> This way, you don’t need to individually add event listeners to each button.<\/p>\n Benefits of Event Delegation<\/strong><\/p>\n Quick Recap:<\/strong><\/p>\n Example JSON:<\/strong><\/p>\n {<\/em> Working with JSON in JavaScript<\/strong><\/p>\n Convert an object to JSON string (serialization):<\/strong><\/p>\n const user = { name: “Alice”, age: 25 };<\/em> Convert JSON string back to object (deserialization):<\/strong><\/p>\n const parsedUser = JSON.parse(jsonString);<\/em> Basic localStorage methods:<\/strong><\/p>\n Storing and Retrieving JSON with localStorage<\/strong><\/p>\n Since localStorage only stores strings, you usually stringify objects before storing and parse them after retrieving:<\/p>\n \/\/ Saving an object<\/em> \/\/ Getting and parsing the object<\/em> Key Points to Remember<\/strong><\/p>\n Quick Recap:<\/strong><\/p>\n What are ES Modules (ESM)?<\/strong><\/p>\n ES Modules (or ESM) are the official module system introduced in JavaScript to enable the organization and reuse of code.<\/p>\n Prior to ESM, JavaScript used CommonJS and other formats like AMD for modules, but ESM provides a native, modern, and standardized way of working with modules in JavaScript.<\/p>\n Features of ES Modules<\/strong><\/p>\n 1. Exporting Functions, Variables, and Objects<\/strong><\/p>\n \/\/ module.js<\/em> \/\/ utils.js<\/em> 2. Importing in Other Files<\/strong><\/p>\n \/\/ app.js<\/em> \/\/ app.js<\/em> \/\/ app.js<\/em> How to Use ES Modules in the Browser<\/strong><\/p>\n <script type=”module”><\/em> ES Modules in Node.js<\/strong><\/p>\n \/\/ In package.json<\/em> Dynamic Imports<\/strong><\/p>\n
\nsetTimeout(() => {<\/em>
\ncallback(‘Data received!’);<\/em>
\n}, 2000);<\/em>
\n}<\/em><\/p>\n
\nconsole.log(data); \/\/ Output after 2 seconds: Data received!<\/em>
\n});<\/em><\/p>\n\n
Promises<\/h3>\n
\n
\nsetTimeout(() => {<\/em>
\nresolve(‘Data received!’);<\/em>
\n}, 2000);<\/em>
\n});<\/em><\/p>\n
\nconsole.log(data);<\/em>
\n}).catch(error => {<\/em>
\nconsole.error(error);<\/em>
\n});<\/em><\/p>\n\n
Async\/Await<\/h3>\n
\n
\ntry {<\/em>
\nconst data = await new Promise((resolve) => {<\/em>
\nsetTimeout(() => resolve(‘Data received!’), 2000);<\/em>
\n});<\/em>
\nconsole.log(data);<\/em>
\n} catch (error) {<\/em>
\nconsole.error(error);<\/em>
\n}<\/em>
\n}<\/em><\/p>\n\n
\n
Error handling with try…catch<\/h2>\n
How try…catch Works<\/h3>\n
\n
\nlet result = riskyFunction();<\/em>
\nconsole.log(result);<\/em>
\n} catch (error) {<\/em>
\nconsole.error(‘An error occurred:’, error.message);<\/em>
\n}<\/em><\/p>\n\n
\nlet x = y + 1; \/\/ y is not defined<\/em>
\n} catch (err) {<\/em>
\nconsole.log(err.name); \/\/ ReferenceError<\/em>
\nconsole.log(err.message); \/\/ y is not defined<\/em>
\n}<\/em><\/p>\n
\n\/\/ risky code<\/em>
\n} catch (error) {<\/em>
\nconsole.error(error);<\/em>
\n} finally {<\/em>
\nconsole.log(‘This always runs.’);<\/em>
\n}<\/em><\/p>\n\n
\n
Event Bubbling and Delegation<\/h2>\n
What is Event Bubbling?<\/h3>\n
\n<button id=”child”>Click Me<\/button><\/em>
\n<\/div><\/em><\/p>\n
\nconsole.log(‘Child clicked’);<\/em>
\n});<\/em><\/p>\n
\nconsole.log(‘Parent clicked’);<\/em>
\n});<\/em><\/p>\n\n
\nevent.stopPropagation();<\/em>
\nconsole.log(‘Child clicked, bubbling stopped’);<\/em>
\n});<\/em><\/p>\nWhat is Event Delegation?<\/h3>\n
\n
\nif (event.target.tagName === ‘BUTTON’) {<\/em>
\nconsole.log(‘Button clicked:’, event.target.textContent);<\/em>
\n}<\/em>
\n});<\/em><\/p>\n\n
\n
JSON and localStorage<\/h2>\n
What is JSON?<\/h3>\n
\n
\n“name”: “Alice”,<\/em>
\n“age”: 25,<\/em>
\n“isStudent”: true<\/em>
\n}<\/em><\/p>\n
\nconst jsonString = JSON.stringify(user);<\/em>
\nconsole.log(jsonString); \/\/ ‘{“name”:”Alice”,”age”:25}’<\/em><\/p>\n
\nconsole.log(parsedUser.name); \/\/ ‘Alice’<\/em><\/p>\nWhat is localStorage?<\/h3>\n
\n
\n
\nconst settings = { theme: “dark”, fontSize: 14 };<\/em>
\nlocalStorage.setItem(“userSettings”, JSON.stringify(settings));<\/em><\/p>\n
\nconst savedSettings = JSON.parse(localStorage.getItem(“userSettings”));<\/em>
\nconsole.log(savedSettings.theme); \/\/ ‘dark’<\/em><\/p>\n\n
\n
Module systems (ES Modules)<\/h2>\n
\n
Importing and Exporting in ES Modules<\/h3>\n
\n
\nexport const name = ‘Alice’;<\/em>
\nexport function greet() {<\/em>
\nconsole.log(‘Hello, ‘ + name);<\/em>
\n}<\/em><\/p>\n\n
\nexport default function sum(a, b) {<\/em>
\nreturn a + b;<\/em>
\n}<\/em><\/p>\n\n
\nimport { name, greet } from ‘.\/module.js’;<\/em>
\nconsole.log(name); \/\/ Alice<\/em>
\ngreet(); \/\/ Hello, Alice<\/em><\/p>\n\n
\nimport sum from ‘.\/utils.js’;<\/em>
\nconsole.log(sum(2, 3)); \/\/ 5<\/em><\/p>\n\n
\nimport * as utils from ‘.\/utils.js’;<\/em>
\nconsole.log(utils.sum(2, 3)); \/\/ 5<\/em><\/p>\n\n
\nimport { greet } from ‘.\/module.js’;<\/em>
\ngreet();<\/em>
\n<\/script><\/em><\/p>\n\n
\n{<\/em>
\n“type”: “module”<\/em>
\n}<\/em><\/p>\n