JavaScript Intermediate Concepts: Building on Your Foundation
JavaScript Intermediate Concepts: Building on Your Foundation
Great job mastering the basics! Now that you understand variables, functions, arrays, objects, and basic operations, let's dive deeper into more powerful JavaScript concepts that will make your code more efficient and professional.
1. Modern Variable Declarations
While let and const are great, there are some important distinctions to understand:
Block Scope with Let
function example() {
if (true) {
let blockScoped = "I'm only available here";
var functionScoped = "I'm available everywhere in this function";
}
// console.log(blockScoped); // This would throw an error!
console.log(functionScoped); // Works fine
}
Const with Objects and Arrays
const person = {
name: "John",
age: 30
};
// You can modify properties, but not reassign the variable
person.name = "Jane"; // This works!
person.age = 25; // This also works!
// person = {}; // This would throw an error!
const numbers = [1, 2, 3];
numbers.push(4); // This works!
// numbers = [5, 6, 7]; // This throws an error
2. Advanced Functions
Arrow Functions (ES6+)
// Traditional function
function add(a, b) {
return a + b;
}
// Arrow function - shorter syntax
const addArrow = (a, b) => a + b;
// More examples
const greet = name => `Hello, ${name}!`;
const square = x => x * x;
const multiply = (a, b) => { return a * b; }; // With explicit return
Default Parameters
function createGreeting(name, greeting = "Hello") {
return `${greeting}, ${name}!`;
}
console.log(createGreeting("John")); // Hello, John!
console.log(createGreeting("Jane", "Hi")); // Hi, Jane!
3. Enhanced Object Syntax (ES6+)
Property Shorthand
const name = "John";
const age = 30;
// Instead of: {name: name, age: age}
const person = {
name,
age,
greet() {
return `Hello, I'm ${this.name}`;
}
};
Object Methods and This
const calculator = {
add(a, b) {
return a + b;
},
multiply(a, b) {
return a * b;
},
calculate(operation, x, y) {
// Using this to refer to the object itself
return this[operation](x, y);
}
};
console.log(calculator.calculate("add", 5, 3)); // 8
console.log(calculator.calculate("multiply", 4, 2)); // 8
4. Array Methods (Higher-Order Functions)
These are powerful tools for working with arrays:
forEach - Loop without return value
const fruits = ["apple", "banana", "orange"];
fruits.forEach((fruit, index) => {
console.log(`${index}: ${fruit}`);
});
// Output:
// 0: apple
// 1: banana
// 2: orange
map - Transform array elements
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(x => x * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
// Transform objects
const users = [
{name: "John", age: 30},
{name: "Jane", age: 25}
];
const userNames = users.map(user => user.name);
console.log(userNames); // ["John", "Jane"]
filter - Create new array with filtered items
const ages = [18, 25, 30, 16, 22];
const adults = ages.filter(age => age >= 18);
console.log(adults); // [18, 25, 30, 22]
find - Get first matching item
const products = [
{id: 1, name: "Laptop", price: 999},
{id: 2, name: "Phone", price: 599}
];
const laptop = products.find(product => product.name === "Laptop");
console.log(laptop); // {id: 1, name: "Laptop", price: 999}
reduce - Accumulate values
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((total, current) => total + current, 0);
console.log(sum); // 15
// Find most expensive product
const maxPrice = products.reduce((max, product) =>
product.price > max ? product.price : max, 0
);
5. String Methods and Template Literals
Template Literals (ES6+)
const name = "John";
const age = 30;
// Instead of: "Hello, my name is " + name + " and I am " + age + " years old"
const message = `Hello, my name is ${name} and I am ${age} years old`;
const multiline = `
This is a
multiline string
with variables like ${name}
`;
Useful String Methods
const text = "JavaScript is awesome";
console.log(text.toUpperCase()); // JAVASCRIPT IS AWESOME
console.log(text.toLowerCase()); // javascript is awesome
console.log(text.slice(0, 10)); // JavaScript
console.log(text.includes("awesome")); // true
console.log(text.split(" ")); // ["JavaScript", "is", "awesome"]
6. Working with Dates
// Current date and time
const now = new Date();
console.log(now); // Thu Dec 07 2023 14:30:45 GMT-0500 (EST)
// Get specific parts
console.log(now.getFullYear()); // 2023
console.log(now.getMonth()); // 11 (December, months start at 0)
console.log(now.getDate()); // 7
// Create custom date
const birthday = new Date("2023-12-25");
7. Error Handling with Try-Catch
function divide(a, b) {
try {
if (b === 0) {
throw new Error("Cannot divide by zero!");
}
return a / b;
} catch (error) {
console.log("Error:", error.message);
return null;
}
}
console.log(divide(10, 2)); // 5
console.log(divide(10, 0)); // Error: Cannot divide by zero!
8. Scope and Closures
function outerFunction(x) {
const outerVariable = "I'm from outer function";
return function innerFunction(y) {
console.log(`x: ${x}, y: ${y}`);
console.log(outerVariable); // Can access outer scope!
return x + y;
};
}
const myClosure = outerFunction(10);
console.log(myClosure(5)); // x: 10, y: 5 → 15
9. Asynchronous JavaScript (Basics)
Promises and Async/Await
// Simple promise example
function fetchUserData(userId) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (userId > 0) {
resolve({id: userId, name: "User" + userId});
} else {
reject("Invalid user ID");
}
}, 1000);
});
}
// Using async/await
async function getUserInfo() {
try {
const user = await fetchUserData(123);
console.log(user); // {id: 123, name: "User123"}
} catch (error) {
console.log(error);
}
}
10. Practical Examples
Simple Calculator
class Calculator {
add(a, b) { return a + b; }
subtract(a, b) { return a - b; }
multiply(a, b) { return a * b; }
calculate(operation, x, y) {
switch (operation) {
case "add": return this.add(x, y);
case "subtract": return this.subtract(x, y);
case "multiply": return this.multiply(x, y);
default: return null;
}
}
}
const calc = new Calculator();
console.log(calc.calculate("add", 5, 3)); // 8
Todo List Manager
class TodoManager {
constructor() {
this.todos = [];
}
addTodo(text) {
const todo = {
id: Date.now(),
text,
completed: false
};
this.todos.push(todo);
}
removeTodo(id) {
this.todos = this.todos.filter(todo => todo.id !== id);
}
toggleComplete(id) {
const todo = this.todos.find(t => t.id === id);
if (todo) {
todo.completed = !todo.completed;
}
}
}
What's Next?
You're now ready to tackle more advanced topics like:
- DOM manipulation for interactive web pages
- Working with APIs and fetching data from the internet
- Event handling and user interactions
- More complex object-oriented programming concepts
- Modern JavaScript frameworks like React or Vue
Keep practicing by building small projects that combine these new concepts. The more you code, the more natural these patterns will become!