29 November 2024

Lesson 6

Lesson Objectives:

  1. Understand how to work with arrays and objects.
  2. Learn about JavaScript methods like forEach, map, filter, and reduce.
  3. Explore the differences between true and false values in JavaScript (truthy and falsy).
  4. Apply the knowledge with hands-on tasks.

1. Introduction to Arrays and Objects

Arrays: A way to store multiple values in a single variable. Example:

const fruits = ['apple', 'peach', 'cucumber'];

Objects: A collection of key-value pairs. Example:

const logs = [{group: 'start', value: 'engine'}, {group: 'error', value: 'system'}];

2. Iterating Over Arrays

Using forEach

The forEach method runs a function for each item in an array.

Example:

fruits.forEach(item => {
  console.log(item); // Prints each fruit
});

Using map

The map method transforms each item in an array and returns a new array.

Example:

const uppercaseFruits = fruits.map(item => item.toUpperCase());
console.log(uppercaseFruits); // ['APPLE', 'PEACH', 'CUCUMBER']

Using filter

The filter method creates a new array with only the items that meet a specific condition.

Example:

const fruitsWithA = fruits.filter(item => item.includes('a'));
console.log(fruitsWithA); // ['apple', 'peach']

3. Working with Objects

Objects are often used to group related data. You can access their properties using keys.

Example:

logs.forEach(log => {
  console.log(\`Group: \${log.group}, Value: \${log.value}\`);
});

4. Truthy and Falsy Values in JavaScript

JavaScript has a concept of "truthy" and "falsy" values. Some examples:

  • Numbers: 0 is falsy, other numbers are truthy. Including -1, 100, -100, 0.1, -0.1.
  • Strings: An empty string '' is falsy, other strings are truthy.
  • Arrays and objects: Even empty arrays [] and objects {} are truthy.
  • Empty values: null, undefined, NaN are falsy.
  • Empty strings: '' is falsy.

Example:

console.log(Boolean(0)); // false
console.log(Boolean(1)); // true
console.log(Boolean([])); // true
console.log(Boolean({})); // true

Array Methods articles

5. Array Method Tasks

Tasks for forEach

  1. Print each number in an array.
  • Example: [1, 2, 3] -> 1 2 3
  1. Create an array of words and print their lengths.
  • Example: ['apple', 'banana', 'cherry'] -> 5 6 6
  1. Print the square of each number in an array.
  • Example: [1, 2, 3] -> 1 4 9
  1. Print each character of every word in an array of strings.
  • Example: ['hello', 'world'] -> h e l l o w o r l d
  1. Calculate and print the sum of all numbers in an array.
  • Example: [1, 2, 3] -> 6

Tasks for map

  1. Convert an array of numbers to their squares.
  • Example: [1, 2, 3] -> [1, 4, 9]
  1. Convert all strings in an array to uppercase.
  • Example: ['apple', 'banana', 'cherry'] -> ['APPLE', 'BANANA', 'CHERRY']
  1. Add the string '-done' to every element in an array of tasks.
  • Example: ['task1', 'task2', 'task3'] -> ['task1-done', 'task2-done', 'task3-done']
  1. Convert an array of temperatures in Celsius to Fahrenheit.
  • Example: [0, 10, 20] -> [32, 50, 68]
  1. Extract only the first letters from an array of words.
  • Example: ['apple', 'banana', 'cherry'] -> ['a', 'b', 'c']

Tasks for reduce

  1. Find the sum of an array of numbers.
  • Example: [1, 2, 3] -> 6
  1. Multiply all numbers in an array together.
  • Example: [1, 2, 3] -> 6
  1. Count the number of occurrences of a specific word in an array of strings.
  • Example: ['apple', 'banana', 'apple', 'cherry', 'apple'] -> 3
  1. Create a single string by concatenating all strings in an array.
  • Example: ['apple', 'banana', 'cherry'] -> 'applebananacherry'
  1. Find the largest number in an array using reduce.
  • Example: [1, 2, 3] -> 3