Let's visit a restaurant.
Restaurant A has a very strange waiter. He comes to your table and takes your order. Then he walks to the kitchen and stands there, staring at the chef, for 20 minutes while your food cooks. Meanwhile, every other customer in the restaurant is waving their arms, trying to order. He ignores them all. When your food is finally ready, he brings it to you, and only then goes to the next table.
Restaurant B has a normal waiter. She takes your order, passes it to the kitchen, and then goes off to take other orders, refill drinks and clear tables. When the chef rings the bell to say your food is ready, she brings it over.
Restaurant A is synchronous: it does one thing at a time, and waits for each thing to finish completely before starting the next. Restaurant B is asynchronous: it starts a slow task, carries on with other work, and comes back when the slow task is done.
So far, all the code we've written has been synchronous. Each line runs, finishes, and then the next line runs. That's fine for quick things like math. But some things are slow:
- Loading data from a server on the other side of the world
- Waiting for a timer
- Reading a big file
- Waiting for the user to click something
JavaScript can only do one thing at a time (programmers say it's single-threaded). If it waited for every slow task like the Restaurant A waiter, your whole web page would freeze: no scrolling, no clicking, nothing, until the data arrived. That would be terrible.
So JavaScript works like the Restaurant B waiter. It hands slow tasks off to the browser (or Node.js), carries on running the rest of your code, and comes back to deal with the result when it's ready. That's asynchronous programming, and it's what this whole year is about.
You've actually seen this already! Event listeners (Grade 12) are asynchronous: you say "when this button is clicked, run this function," and your code carries on. The function runs later, whenever the click happens.