Intermediate Level
Once comfortable with JavaScript basics, dive into more dynamic and efficient coding. Topics here build on fundamentals for real-world applications:
1. 🔹JavaScript Advanced Functions
Functions are the backbone of JavaScript. At this stage, you’ll discover different types and uses.
1.1 Arrow Functions
Introduced in ES6, arrow functions provide a shorter syntax:
// Regular function
function multiply(a, b) {
return a * b;
}
// Arrow function
const multiplyArrow = (a, b) => a * b;
console.log(multiplyArrow(3, 4)); // 12
⚠️ Note: Arrow functions do not have their own this. They use this from their surrounding scope.
1.2 Callbacks
A callback is a function passed into another function as an argument.
function processUserInput(callback) {
let name = "Alice";
callback(name);
}
processUserInput(function(user) {
console.log("Hello " + user);
});
👉 Callbacks are often used in asynchronous code.
1.3 Self-Invoking Functions (IIFE)
Sometimes, you want a function to run immediately after being defined.
(function() {
console.log("I run automatically!");
})();
1.4 Higher-Order Functions
These are functions that accept other functions or return functions.
function createMultiplier(factor) {
return function(num) {
return num * factor;
};
}
let double = createMultiplier(2);
console.log(double(5)); // 10
💡 This is the basis of functional programming.
2. 🔹 Scope, Hoisting, and Closures
2.1 Scope
- Global scope: accessible everywhere
- Function scope: variables inside a function
- Block scope: with
letandconst
let globalVar = "I’m global";
function testScope() {
let localVar = "I’m local";
if (true) {
let blockVar = "I’m block-scoped";
console.log(blockVar); // ✅
}
// console.log(blockVar); ❌ Error
}
2.2 Hoisting
JavaScript moves declarations to the top during compilation.
console.log(x); // undefined
var x = 5;
sayHi(); // Works
function sayHi() {
console.log("Hi!");
}
⚠️ Variables declared with let and const are also hoisted but remain in a “temporal dead zone” until declared.
2.3 Closures
Closures give functions memory.
function counter() {
let count = 0;
return function() {
count++;
return count;
};
}
let increment = counter();
console.log(increment()); // 1
console.log(increment()); // 2
💡 Widely used in data privacy and event handlers.
3. 🔹 Array Methods
Arrays in JavaScript are powerful, especially with functional methods.
let numbers = [1, 2, 3, 4, 5];
// forEach
numbers.forEach(n => console.log("Value:", n));
// map → transforms array
let doubled = numbers.map(n => n * 2);
console.log(doubled);
// filter → keeps some values
let evens = numbers.filter(n => n % 2 === 0);
console.log(evens);
// reduce → combines into single value
let sum = numbers.reduce((total, n) => total + n, 0);
console.log(sum); // 15
4. 🔹 Advanced Objects
4.1 Nested Objects
let user = {
name: "Alice",
address: {
city: "London",
zip: 12345
}
};
console.log(user.address.city);
4.2 The this Keyword
let person = {
name: "Bob",
greet() {
console.log("Hello, I’m " + this.name);
}
};
person.greet(); // Hello, I’m Bob
⚠️ Arrow functions do not bind this.
4.3 Looping Objects with for...in
for (let key in person) {
console.log(key, person[key]);
}
5. 🔹 ES6+ Features
Template Literals
let name = "Alice";
console.log(`Hello, ${name}!`);
Destructuring
let { city, zip } = user.address;
console.log(city, zip);
Spread & Rest
let arr = [1, 2, 3];
let newArr = [...arr, 4, 5];
function sum(...nums) {
return nums.reduce((a, b) => a + b);
}
console.log(sum(1, 2, 3, 4));
Modules
// math.js
export const add = (a, b) => a + b;
// app.js
import { add } from "./math.js";
console.log(add(2, 3));
6. 🔹 Asynchronous JavaScript
Callbacks
setTimeout(() => console.log("Runs after 2s"), 2000);
Promises
let promise = new Promise((resolve, reject) => {
let success = true;
success ? resolve("Done") : reject("Error");
});
promise.then(result => console.log(result))
.catch(err => console.log(err));
Async/Await
async function fetchData() {
return "Data fetched!";
}
fetchData().then(console.log);
7. 🔹 Error Handling
try {
throw new Error("Something went wrong");
} catch (error) {
console.log(error.message);
} finally {
console.log("Always runs");
}
8. 🔹 DOM Manipulation
Selecting Elements
let title = document.querySelector("h1");
Styling Elements
title.style.color = "blue";
Events
document.getElementById("btn")
.addEventListener("click", () => {
alert("Clicked!");
});
Creating/Removing Elements
let div = document.createElement("div");
div.innerText = "New element!";
document.body.appendChild(div);
div.remove();
9. 🔹 Prototypes and Inheritance
Prototypes
function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function() {
console.log(this.name + " makes a sound");
};
let dog = new Animal("Dog");
dog.speak();
ES6 Classes & Inheritance
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a sound`);
}
}
class Dog extends Animal {
speak() {
console.log(`${this.name} barks`);
}
}
let myDog = new Dog("Buddy");
myDog.speak();
10. 🔹 Functional Programming Basics
Pure Functions
function add(a, b) {
return a + b; // no side effects
}
Immutability
let arr = [1, 2, 3];
let newArr = [...arr, 4];
console.log(newArr);
🎯 JavaScript Intermediate Conclusion
At this Intermediate Level, you’ve learned:
✅ Advanced functions (arrow, callbacks, closures, higher-order)
✅ Scope and hoisting
✅ Array methods (map, filter, reduce)
✅ Objects (this, nested, looping)
✅ ES6+ features and modules
✅ Asynchronous JS (callbacks → promises → async/await)
✅ Error handling
✅ DOM manipulation (selectors, styling, events, dynamic elements)
✅ Prototypes & inheritance
✅ Functional programming basics
With these skills, you can build real-world apps like API-powered weather apps, task managers, or simple games.