How to Code Asynchronous JavaScript. Callbacks, Promises, and Async-Await

[joshuyah-]

Do the timeout functions have to be in order? and can one step be duplicated?

[tru-borg]

Could both synchronous and asynchronous code programming be used for the same program in different areas?

[klovrockjaw]

It sounds like learning callbacks and synchronous programming is most useful for converting tasks into asynchronous ones. Am I missing something?

[nickc]

So since JavaScript is single threaded, how does it normally achieve multitasking in asynchronous programming? -Dominic Carney Jr

[kvelez]

8:01
Synchronous

13:59
Async Callbacks

14:52
JQuery

18:06
Callback hell

index.ts:
// Synchronous is like single tasking
// or one at a time
// console.log("1. Toast your bread");
// console.log("2. Cook Eggs");
// console.log("3. Cook Bacon");
// console.log("4. Flip some Flapjacks");
// console.log("5. Pour OJ");
// console.log("6. Set the table");
// console.log("7. Eat breakfast");

// Async is like multi-tasking
// or multiple at once
// setTimeout((): void => {
// console.log("1. Toast your bread");
// }, 1000);
// setTimeout((): void => {
// console.log("2. Cook Eggs");
// }, 2000);
// setTimeout((): void => {
// console.log("3. Cook Bacon");
// }, 3000);
// setTimeout((): void => {
// console.log("4. Flip some Flapjacks");
// }, 4000);
// setTimeout((): void => {
// console.log("5. Pour OJ");
// }, 5000);
// setTimeout((): void => {
// console.log("6. Set the table");
// }, 6000);
// setTimeout((): void => {
// console.log("7. Eat breakfast");
// }, 7000);

// Callbacks
// const task1 = (callback: () => void): void => {
// setTimeout((): void => {
// console.log("1. Toast your bread");
// callback();
// }, 1000);
// };

// const task2 = (callback: () => void): void => {
// setTimeout((): void => {
// console.log("2. Cook Eggs");
// callback();
// }, 2000);
// };

// const task3 = (callback: () => void): void => {
// setTimeout((): void => {
// console.log("3. Cook Bacon");
// callback();
// }, 3000);
// };

// const task4 = (callback: () => void): void => {
// setTimeout((): void => {
// console.log("4. Flip some Flapjacks");
// callback();
// }, 4000);
// };

// const task5 = (callback: () => void): void => {
// setTimeout((): void => {
// console.log("5. Pour OJ");
// callback();
// }, 5000);
// };

// const task6 = (callback: () => void): void => {
// setTimeout((): void => {
// console.log("6. Set the table");
// callback();
// }, 6000);
// };

// const task7 = (callback: () => void): void => {
// setTimeout((): void => {
// console.log("7. Eat breakfast");
// callback();
// }, 7000);
// };

// task1(() => task2);
// task3(() => task4);
// task5(() => task6);
// task7(() => task1);
// task2(() => task3);
// task4(() => task5);
// task6(() => task7);

// Promises
// const p = new Promise((resolve, reject) => {
// let a = 1 + 1;
// setTimeout(() => {
// if (a === 2) {
// resolve("Success");
// } else {
// reject("Failure");
// }
// }, 1000);
// })

// p.then((message) => {
// console.log(message);
// }).catch((message) => {
// console.log(message);
// })

// const p2 = new Promise((resolve, reject) => {
// let a = 1 + 1;
// setTimeout(() => {
// if (a === 2) {
// resolve("Success");
// } else {
// reject("Failure");
// }
// }, 1000);
// })

// p2.then((message) => {
// console.log(message);
// }).catch((message) => {
// console.log(message);
// })

// Promise.all([p, p2]).then((messages) => {
// console.log(messages);
// }).catch((message) => {
// console.log(message);
// })

// Async/Await
const doTask1 = async (): Promise<void> => {
console.log("1. Toast your bread");
};

const doTask2 = async (): Promise<void> => {
console.log("2. Cook Eggs");
};

const doTask3 = async (): Promise<void> => {
console.log("3. Cook Bacon");
};

const doTask4 = async (): Promise<void> => {
console.log("4. Flip some Flapjacks");
};

const doTask5 = async (): Promise<void> => {
console.log("5. Pour OJ");
};

const doTask6 = async (): Promise<void> => {
console.log("6. Set the table");
};

const doTask7 = async (): Promise<void> => {
console.log("7. Eat breakfast");
};

const main = async (): Promise<void> => {
await doTask1();
await doTask2();
await doTask3();
await doTask4();
await doTask5();
await doTask6();
await doTask7();
};

main();

index.html:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/index.css">
<script defer
</head>

<body>

</body>

</html>

tsconfig.json:
{
"compilerOptions": {
"module": "commonjs",
"target": "ESNext",
"esModuleInterop": true,
"strict": true,
true,
"skipLibCheck": true,
"sourceRoot": "./src",
"outDir": "./public/js",
"sourceMap": true
},
"exclude": [
"node_modules",
"public"
],
"include": [
"./src/**/*.ts"
]
}

[NathanSchlemeier]

What scenarios in the real world is synchronous programming used?

[calculatedriskgame]

Why would I use synchronous over asynchronous if it allows me to do more?

[RinVinas]

Are there people who still actively use the pyramid even though there are different ways, or when we see that way of programming is it safe to assume it has not been updated in a while?

[officialmoai]

What is used more out in the real world, synchronous or asynchronous programming?

[tacoman]

What's the most challenging asynchronous task you've tackled in your projects?

[jcgodofgames]

What are some common mistakes when using async/await in JavaScript, and how can they be avoided?

[laurenboone]

are there more uses for async programming than synchronous?