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.