JavaScript Language Features
Section 1: Intermediate JavaScript Language Features
Lesson 1: Arrays and Array Methods
JavaScript arrays are powerful data structures that allow you to store and manipulate collections of elements. Let's explore some advanced array features.
1.1 Exploring Array Methods
// Mapping array elements
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(num => num * 2);
// Filtering array elements
const evenNumbers = numbers.filter(num => num % 2 === 0);
// Reducing array to a single value
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]
console.log(evenNumbers); // Output: [2, 4]
console.log(sum); // Output: 15
1.2 Understanding Array Destructuring and Spread/Rest Operators
// Array destructuring
const [first, second, ...rest] = numbers;
console.log(first); // Output: 1
console.log(second); // Output: 2
console.log(rest); // Output: [3, 4, 5]
// Spread operator
const newNumbers = [...numbers, 6, 7, 8];
console.log(newNumbers); // Output: [1, 2, 3, 4, 5, 6, 7, 8]
Lesson 2: Object-Oriented JavaScript
JavaScript supports object-oriented programming concepts. Let's explore how to work with objects and prototypes.
2.1 Creating and Working with Objects
// Object creation
const person = {
name: 'Alice',
age: 30,
greet: function() {
console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
}
};
// Accessing object properties
console.log(person.name); // Output: Alice
// Calling object method
person.greet(); // Output: Hello, my name is Alice and I'm 30 years old.
2.2 Introduction to Constructor Functions and Classes
// Constructor function
function Car(make, model) {
this.make = make;
this.model = model;
}
// Creating instances
const myCar = new Car('Toyota', 'Camry');
const anotherCar = new Car('Honda', 'Civic');
// Class syntax (ES6+)
class Animal {
constructor(name) {
this.name = name;
}
makeSound() {
console.log('Some generic sound.');
}
}
// Creating instances of a class
const dog = new Animal('Buddy');
dog.makeSound(); // Output: Some generic sound.
Lesson 3: Error Handling and Debugging
JavaScript provides mechanisms for error handling and debugging. Let's explore how to handle errors and debug your code effectively.
3.1 Implementing Try-Catch Blocks for Error Handling
// Error handling with try-catch
try {
// Code that might throw an error
throw new Error('This is a custom error.');
} catch (error) {
console.error(`Caught an error: ${error.message}`);
}
3.2 Debugging Techniques Using Console Statements and Breakpoints
// Debugging with console statements
const variable = 'Hello, debugging!';
console.log(variable);
// Debugging with breakpoints
function complexFunction(a, b) {
const result = a * b;
debugger; // Set a breakpoint here
return result;
}
complexFunction(5, 10); // Use browser developer tools to step through code
In the next section, we'll delve into asynchronous JavaScript and explore how to handle promises and async/await.