Higher Order Function function greet(name) { return function (message) { console.log(`${message}, ${name}`); }; } const greetRoshini = greet("Roshini"); greetRoshini("Hello"); Callback & Callback Hell Example function step1(callback) { setTimeout(() => { console.log("Step 1 done"); callback(); }, 1000); } function step2(callback) { setTimeout(() => { console.log("Step 2 done"); callback(); }, 1000); } function step3() { console.log("Step 3 done"); } step1(() => { step2(() => { step3(); }); }); XHR: Response const xhr = new XMLHttpRequest(); xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1"); xhr.onload = () => { const data = JSON.parse(xhr.responseText); console.log(data); }; xhr.send(); Promise to Solve Callback Hell function doStep(step) { return new Promise((resolve) => { setTimeout(() => { console.log(step); resolve(); }, 1000); }); } doStep("Step 1") .then(() => doStep("Step 2")) .then(() => doStep("Step 3")); Promise Chaining & Async/Await function task(msg, time) { return new Promise((resolve) => { setTimeout(() => { console.log(msg); resolve(); }, time); }); } task("Start", 500) .then(() => task("Middle", 1000)) .then(() => task("End", 500)); async function run() { await task("Start", 500); await task("Middle", 1000); await task("End", 500); } run();
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter