Posted in JS Crash Course

JavaScript Crash Course – Lesson 2: Functions, Arrays, and Objects

   October 4, 2024  Leave a Comment on JavaScript Crash Course – Lesson 2: Functions, Arrays, and Objects

Functions

Functions are reusable blocks of code that perform specific tasks. They help organize code and make it more modular.

Declaring and Calling Functions

JavaScript
function greet(name) {
    return "Hello, " + name + "!";
}

console.log(greet("Alice")); // Outputs: Hello, Alice!

Arrow Functions

ES6 introduced a shorter syntax for writing functions:

JavaScript
const greet = (name) => {
    return "Hello, " + name + "!";
};

// For single expressions, you can shorten it further:
const greetShort = name => `Hello, ${name}!`;

Arrays

Arrays are ordered lists of values. They can contain any type of data.

Creating and Accessing Arrays

JavaScript
let fruits = ["apple", "banana", "cherry"];
console.log(fruits[0]); // Outputs: apple

// Adding elements
fruits.push("date");
console.log(fruits); // Outputs: ["apple", "banana", "cherry", "date"]

Common Array Methods

  1. forEach(): Executes a function for each array element
JavaScript
   fruits.forEach(fruit => console.log(fruit));
  1. map(): Creates a new array with the results of calling a function for every array element
JavaScript
   let upperFruits = fruits.map(fruit => fruit.toUpperCase());
  1. filter(): Creates a new array with all elements that pass the test implemented by the provided function
JavaScript
   let longFruits = fruits.filter(fruit => fruit.length > 5);

Objects

Objects are collections of key-value pairs. They’re used to store and organize related data.

Creating and Accessing Objects

JavaScript
let person = {
    name: "John",
    age: 30,
    isStudent: false
};

console.log(person.name); // Outputs: John
console.log(person["age"]); // Outputs: 30

Methods in Objects

Objects can also contain functions (methods):

JavaScript
let car = {
    brand: "Toyota",
    model: "Corolla",
    start: function() {
        console.log("The car is starting!");
    }
};

car.start(); // Outputs: The car is starting!

Putting It All Together

Let’s combine functions, arrays, and objects in a practical example:

JavaScript
let library = {
    books: [
        {title: "1984", author: "George Orwell"},
        {title: "To Kill a Mockingbird", author: "Harper Lee"},
        {title: "The Great Gatsby", author: "F. Scott Fitzgerald"}
    ],
    listBooks: function() {
        this.books.forEach(book => {
            console.log(`${book.title} by ${book.author}`);
        });
    },
    addBook: function(title, author) {
        this.books.push({title: title, author: author});
    }
};

library.listBooks();
library.addBook("The Catcher in the Rye", "J.D. Salinger");
library.listBooks();

Practice Exercise

Create an object representing a shopping cart. It should have an array to store items, a method to add items, and a method to calculate the total price. Each item should be an object with a name and price.

Conclusion

This lesson covered three crucial concepts in JavaScript: functions, arrays, and objects. These form the building blocks of more complex JavaScript programs. In the next lesson, we’ll explore more advanced topics like DOM manipulation and event handling.

Remember to practice these concepts by creating your own examples and experimenting with different combinations!