JAVASCRIPT - Part 11
The Codex (from Beginner to Pro)
JAVASCRIPT - Part 11
The Codex (from Beginner to Pro)
JavaScript Asynchronous Programming
JavaScript is a single-threaded language, which means it executes one task at a time. However, some operations take time, such as:
- Fetching data from a server
- Reading files
- Waiting for user actions
- Timers (
setTimeout)
To prevent the application from freezing while waiting, JavaScript uses asynchronous programming.
What is Asynchronous Programming?
Asynchronous programming allows JavaScript to continue running other code while waiting for a task to finish.
Synchronous Example
console.log("Start");
console.log("Middle");
console.log("End");The code runs line by line.
Understanding Callbacks
A callback is a function passed into another function to run later.
Example
function greet(name, callback) {
console.log("Hello " + name);
callback();
}
function sayBye() {
console.log("Goodbye!");
}
greet("John", sayBye);Output
Hello John
Goodbye!Here:
sayByeis passed as a callback- It runs after greeting the user
Understanding Events
Events happen when users interact with a webpage.
Examples:
- Clicking a button
- Typing in an input
- Moving the mouse
Example
<button id="btn">Click Me</button>let button = document.getElementById("btn");
button.addEventListener("click", function () {
console.log("Button Clicked");
});When the button is clicked, the callback function runs.
Understanding Promises
A Promise represents a future value.
It has 3 states:
- Pending
- Resolved
- Rejected
Promise Example
let promise = new Promise(function (resolve, reject) {
let success = true;
if (success) {
resolve("Operation Successful");
} else {
reject("Operation Failed");
}
});
promise
.then(function (message) {
console.log(message);
})
.catch(function (error) {
console.log(error);
});Output
Operation SuccessfulChaining Promises
Promise chaining allows multiple asynchronous tasks to run in sequence.
Example
fetch("https://jsonplaceholder.typicode.com/users")
.then(function (response) {
return response.json();
})
.then(function (data) {
console.log(data);
})
.catch(function (error) {
console.log("Error:", error);
});Explanation
fetch()sends a requestresponse.json()converts the response to JavaScript.then()handles success.catch()handles errors
Async and Await
async and await make asynchronous code easier to read.
Instead of chaining .then(), we can write cleaner code.
Async Function Example
async function getUsers() {
let response = await fetch(
"https://jsonplaceholder.typicode.com/users"
);
let data = await response.json();
console.log(data);
}
getUsers();Error Handling with try…catch
try...catch helps handle errors in asynchronous code.
Example
async function getData() {
try {
let response = await fetch(
"https://jsonplaceholder.typicode.com/users"
);
let data = await response.json();
console.log(data);
} catch (error) {
console.log("Something went wrong");
}
}
getData();Understanding fetch()
fetch() is used to make network requests.
It is commonly used to get data from APIs.
Basic Syntax
fetch("API_URL")It returns a Promise.
What is a RESTful API?
A RESTful API allows applications to communicate over the internet.
APIs provide data in JSON format.
Examples:
- Weather apps
- Social media apps
- Banking apps
Common HTTP Methods
MethodPurposeGETRetrieve dataPOSTSend dataPUTUpdate dataDELETERemove data
Weather App Assignment
Objective
Build a weather app that displays current weather information.
The app should:
- Take a city name from the user
- Fetch weather data from an API
- Display:
- Temperature
- Weather condition
- Humidity
- Wind speed
HTML Structure
<!DOCTYPE html>
<html>
<head>
<title>Weather App</title>
</head>
<body>
<h1>Weather App</h1>
<input type="text" id="city" placeholder="Enter city name">
<button id="searchBtn">Search</button>
<div id="weatherResult"></div>
<script src="script.js"></script>
</body>
</html>JavaScript Code
const apiKey = "YOUR_API_KEY";
const button = document.getElementById("searchBtn");
button.addEventListener("click", async function () {
const city = document.getElementById("city").value;
const result = document.getElementById("weatherResult");
try {
const response = await fetch(
`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`
);
const data = await response.json();
result.innerHTML = `
<h2>${data.name}</h2>
<p>Temperature: ${data.main.temp}°C</p>
<p>Weather: ${data.weather[0].description}</p>
<p>Humidity: ${data.main.humidity}%</p>
<p>Wind Speed: ${data.wind.speed} m/s</p>
`;
} catch (error) {
result.innerHTML = "Error fetching weather data";
}
});How the Weather App Works
- User enters a city name
- User clicks the search button
fetch()sends a request to the weather API- The API returns weather data
- The app displays the result on the screen
Conclusion
Asynchronous programming is one of the most important concepts in JavaScript.
You learned:
- Callbacks
- Events
- Promises
- Promise chaining
- Async and await
- Error handling
- Fetch API
- RESTful APIs
These concepts are used in real-world applications like:
- Weather apps
- Chat applications
- E-commerce websites
- Social media platforms
Mastering asynchronous JavaScript will help you build faster and more interactive web applications.
Next up: Part 12- Introduction to Cookies, FileReader Object, and Local Storage in JavaScript
메타데이터
- post_id
- dfd9a17eb1bb
- slug
- javascript-part-11-dfd9a17eb1bb
- url
- https://medium.com/@teejaymezue/javascript-part-11-dfd9a17eb1bb
- canonical_url
- https://medium.com/@teejaymezue/javascript-part-11-dfd9a17eb1bb
- author_url
- https://medium.com/@teejaymezue
- status
- ok
- fetched_at
- 2026-07-23 03:07:13
