Introduction to Asynchronous JavaScript

Slide 1

Slide 1 text

Intro to Asynchronous JavaScript Krishna Neupane

Slide 2

Slide 2 text

About Me Working as a software developer for more than 8 years, especially focused around JavaScript and it’s ecosystem. Twitter - @krishneup LinkedIn - https://linkedin.com/feed/krishneup Website - krishneup.com

Slide 3

Slide 3 text

Goal: ● Understand what asynchronous code is and why it works diﬀerently from synchronous code ● Learn how to work with asynchronous JavaScript ● Understand whats happening behind the scene ● Understand callbacks, promises, async/await

Slide 4

Slide 4 text

JavaScript is single threaded ● By Default code is generally synchronous ● It is expected to be non blocking ● Interprets line by line.

Slide 5

Slide 5 text

Guess the result ???

Slide 6

Slide 6 text

Output

Slide 7

Slide 7 text

Why does this happens?

Slide 8

Slide 8 text

How JavaScript works?

Slide 9

Slide 9 text

Callstack ● keeps track of the functions currently being executed

Slide 10

Slide 10 text

Callback Queue ● To manage and execute asynchronous operations

Slide 11

Slide 11 text

Let’s see callback queue use cases

Slide 12

Slide 12 text

1. Handling Asynchronous Events

Slide 13

Slide 13 text

2. SetTimeout and SetInterval

Slide 14

Slide 14 text

3. Promises

Slide 15

Slide 15 text

3. More about promises

Slide 16

Slide 16 text

4. I/O Operations

Slide 17

Slide 17 text

Writing asynchronous code

Slide 18

Slide 18 text

Async/await

Slide 19

Slide 19 text

Promises chaining

Slide 20

Slide 20 text

Error Handling

Slide 21

Slide 21 text

Helpful Tools ● Chrome Devtools ● ESLinter like ESLint and Prettier ● Testing framework like jest, mocha,etc ● Code Proﬁling