JavaScript Essentials – Part 3
Chapter 14: Functions in Depth Functions are at the heart of JavaScript. They let you
organize and reuse code.
Function Expressions Besides the normal way (function greet() {}), you can also assign
functions to variables:
javascript Copy code let greet = function(name) { return "Hello, " + name; };
console.log(greet("Alice")); Arrow Functions Arrow functions provide a shorter syntax:
javascript Copy code let greet = (name) => "Hello, " + name; console.log(greet("Bob"));
Default Parameters You can give parameters default values:
javascript Copy code function multiply(a, b = 2) { return a * b; } console.log(multiply(5)); //
10 Higher-Order Functions Functions can be passed as arguments or returned from other
functions.
javascript Copy code function operate(a, b, func) { return func(a, b); }
let result = operate(5, 3, (x, y) => x + y); console.log(result); // 8 Chapter 15: Asynchronous
JavaScript JavaScript is single-threaded, which means it runs one thing at a time. But what if
you want to fetch data from the internet without freezing the page? That’s where
asynchronous programming comes in.
Callbacks A callback is a function passed into another function to run later.
javascript Copy code function fetchData(callback) { setTimeout(() => { callback("Data
received!"); }, 2000); }
fetchData((message) => console.log(message)); Here, setTimeout simulates a 2-second
delay.
Promises Promises make async code easier to read.
javascript Copy code let promise = new Promise((resolve, reject) => { let success = true; if
(success) { resolve("Operation successful"); } else { reject("Something went wrong"); } });
promise .then((message) => console.log(message)) .catch((error) => console.log(error));
Async/Await The modern way to handle async code:
javascript Copy code async function getData() { return "Data received!"; }
getData().then((data) => console.log(data)); With await:
javascript Copy code async function fetchInfo() { let data = await getData();
console.log(data); }
fetchInfo(); Chapter 16: Working with APIs APIs (Application Programming Interfaces) allow
JavaScript to communicate with other services. A common way is using the fetch() function.
Example: Fetching data from a placeholder API:
javascript Copy code fetch("https://jsonplaceholder.typicode.com/posts/1") .then((response)
=> response.json()) .then((data) => console.log(data)) .catch((error) => console.log("Error:",
error)); With async/await:
javascript Copy code async function loadPost() { try { let response = await
fetch("https://jsonplaceholder.typicode.com/posts/1"); let post = await response.json();
console.log(post); } catch (error) { console.log("Error:", error); } }
loadPost(); Chapter 17: Mini Projects
1. A Simple Calculator html Copy code
Add
<script> function add() { let a = parseFloat(document.getElementById("num1").value); let b =
parseFloat(document.getElementById("num2").value);
document.getElementById("result").innerHTML = "Result: " + (a + b); } </script> 2. A To-Do
List html Copy code Add Task
<script> function addTask() { let task = document.getElementById("task").value; let li =
document.createElement("li"); li.textContent = task;
document.getElementById("list").appendChild(li); document.getElementById("task").value =
""; } </script> 3. Fetching an API and Showing Data html Copy code Get Post
<script> async function getPost() { let response = await
fetch("https://jsonplaceholder.typicode.com/posts/1"); let post = await response.json();
document.getElementById("output").innerHTML = `
${post.title}
${post.body}
`; } </script> Conclusion of Part 3 In this section, you learned:
More advanced functions and higher-order functions
How asynchronous code works with callbacks, promises, and async/await
How to fetch data from APIs
How to build mini-projects like calculators, to-do lists, and API viewers
With this knowledge, you are now prepared to start building real-world projects. In Part 4,
we’ll explore advanced JavaScript concepts like modules, classes, error handling, and
preparing for frameworks such as React or Vue.
