feat: Arrays and Loops The Odin Project (#54409)

Co-authored-by: Naomi <accounts+github@nhcarrigan.com> Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>
2026-05-28 18:26:54 +00:00 · 2024-06-06 19:18:29 +02:00
parent ae757b446f
commit 20a750370c
10 changed files with 520 additions and 0 deletions
@@ -1255,6 +1255,10 @@
        "intro": [
          "Put your JavaScript skills to the test by building basic functions."
        ]
+      },
+      "top-learn-arrays-and-loops": {
+        "title": "Learn Arrays and Loops",
+        "intro": ["Learn about arrays and loops in JavaScript."]
      }
    }
  },
@@ -0,0 +1,42 @@
+{
+  "name": "TOP Learn Arrays and Loops",
+  "isUpcomingChange": true,
+  "dashedName": "top-learn-arrays-and-loops",
+  "helpCategory": "Odin",
+  "order": 14,
+  "superBlock": "the-odin-project",
+  "challengeOrder": [
+    {
+      "id": "661e27508602567c118451d1",
+      "title": "Learn Arrays and Loops Question A"
+    },
+    {
+      "id": "661e27568602567c118451d2",
+      "title": "Learn Arrays and Loops Question B"
+    },
+    {
+      "id": "661e27578602567c118451d3",
+      "title": "Learn Arrays and Loops Question C"
+    },
+    {
+      "id": "661e27588602567c118451d4",
+      "title": "Learn Arrays and Loops Question D"
+    },
+    {
+      "id": "661e27588602567c118451d5",
+      "title": "Learn Arrays and Loops Question E"
+    },
+    {
+      "id": "661e27598602567c118451d6",
+      "title": "Learn Arrays and Loops Question F"
+    },
+    {
+      "id": "661e275a8602567c118451d7",
+      "title": "Learn Arrays and Loops Question G"
+    },
+    {
+      "id": "661e275a8602567c118451d8",
+      "title": "Learn Arrays and Loops Question H"
+    }
+  ]
+}
@@ -0,0 +1,43 @@
+---
+id: 661e27508602567c118451d1
+title: Learn Arrays and Loops Question A
+challengeType: 15
+dashedName: learn-arrays-and-loops-question-a
+---
+# --description--
+
+Strings and numbers may be our building blocks, but as your scripts get more complex, you're going to need a way to deal with large quantities of them. Luckily, JavaScript has a couple of data types that are used for just that. An Array is an ordered collection of items (Strings, numbers, or other things).
+
+Arrays are a way to store multiple values in a single variable. They are a special type of object that has a length property and a series of numbered properties. Each numbered property is called an element, and each element can store a value of any type.
+
+An Example of an array is:
+
+```javascript
+const fruits = ['apple', 'banana', 'orange'];
+```
+
+# --question--
+
+## --text--
+
+What is an array in JavaScript?
+
+## --answers--
+
+A function that stores multiple strings and numbers.
+
+---
+
+A data type used exclusively for numerical operations.
+
+---
+
+An ordered collection of items that can store values of any type, including strings and numbers.
+
+---
+
+A variable that can only store string values.
+
+## --video-solution--
+
+3
@@ -0,0 +1,46 @@
+---
+id: 661e27568602567c118451d2
+title: Learn Arrays and Loops Question B
+challengeType: 15
+dashedName: learn-arrays-and-loops-question-b
+---
+# --description--
+
+To access the elements of an array, you can use the index number. The index number starts from 0, so the first element of an array is at index 0, the second element is at index 1, and so on.
+
+For example, to access the first element of the `fruits` array, you can use the following code:
+
+```javascript
+const fruits = ['apple', 'banana', 'orange'];
+console.log(fruits[0]); // Output: apple
+console.log(fruits[2]); // Output: orange
+```
+
+If the index is out of range, JavaScript will return `undefined`. Meaning that if you try to access `fruits[3]` in the above example, it will return `undefined`.
+
+
+# --question--
+
+## --text--
+
+What is the element at the fourth index of the `fruits` array?
+
+## --answers--
+
+`orange`
+
+---
+
+`apple`
+
+---
+
+`pineapple`
+
+---
+
+`undefined`
+
+## --video-solution--
+
+4
@@ -0,0 +1,63 @@
+---
+id: 661e27578602567c118451d3
+title: Learn Arrays and Loops Question C
+challengeType: 15
+dashedName: learn-arrays-and-loops-question-c
+---
+# --description--
+
+One of the most common ways to add a new element to an array is by using the `push()` method. The `push()` method adds one or more elements to the end of an array and returns the new length of the array.
+
+For example, to add a new element to the `pet` array, you can use the following code:
+
+```javascript
+const pet = ['cat', 'dog', 'bunny'];
+pet.push('parrot');
+console.log(pet); // Output: ['cat', 'dog', 'bunny', 'parrot']
+```
+
+To remove the last element of an array, you can use the `pop()` method. The `pop()` method removes the last element from an array and returns that element.
+
+For example, to remove the last element from the `pet` array, you can use the following code:
+
+```javascript
+const pet = ['cat', 'dog', 'tiger'];
+pet.pop();
+console.log(pet); // Output: ['cat', 'dog']
+```
+
+
+# --question--
+
+## --text--
+
+Given the following JavaScript code, what will be the output after executing the code snippet?
+
+```javascript
+const animals = ['deer', 'whale', 'frog'];
+animals.push('shark', 'bear');
+const removed = animals.pop();
+
+console.log(animals);
+console.log(removed);
+```
+
+## --answers--
+
+`['deer', 'whale', 'frog', 'shark', 'bear']` and `'bear'`
+
+---
+
+`['deer', 'whale', 'frog', 'shark']` and `'bear'`
+
+---
+
+`['deer', 'whale', 'frog', 'shark', 'bear']` and `null`
+
+---
+
+`['deer', 'whale', 'frog', 'shark', 'bear']` and `['deer', 'whale', 'frog', 'shark']`
+
+## --video-solution--
+
+2
@@ -0,0 +1,66 @@
+---
+id: 661e27588602567c118451d4
+title: Learn Arrays and Loops Question D
+challengeType: 15
+dashedName: learn-arrays-and-loops-question-d
+---
+# --description--
+
+One of the more complex methods used with arrays are the `splice()` and `slice()` methods. The `splice()` method changes the contents of an array by removing or replacing an element in the array. The `slice()` method returns a shallow copy of a portion of an array into a new array object selected from `begin` to `end` (`end` not included). The original array will not be modified.
+
+For example, to remove the second element from the `characters` array, you can use the following code:
+
+```javascript
+const characters = ['Harry', 'Ron', 'Hermione'];
+characters.splice(1, 1);
+console.log(characters); // Output: ['Harry', 'Hermione']
+```
+
+The above element removes the second element from the `characters` array. The `splice()` method takes two arguments: the index of the element to remove and the number of elements to remove.
+
+
+To create a new array with the second element from the `character` array, you can use the following code:
+
+```javascript
+const characters = ['Harry', 'Ron', 'Hermione'];
+const newCharacters = characters.slice(1, 2);
+console.log(newCharacters); // Output: ['Ron']
+```
+
+The above code creates a new array `newCharacters` with the second element from the `characters` array. The `slice()` method takes two arguments: the index of the element to start the slice and the index of the element to end the slice (not included).
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+
+```javascript
+const numbers = [10, 20, 30, 40, 50];
+numbers.splice(3, 1);
+const slicedNumbers = numbers.slice(2, 4);
+
+console.log(numbers);
+console.log(slicedNumbers);
+```
+
+## --answers--
+
+`numbers` output: `[10, 20, 30, 50]` and `slicedNumbers` output: `[30, 50]`
+
+---
+
+`numbers` output: `[10, 20, 30, 40]` and `slicedNumbers` output: `[30, 40]`
+
+---
+
+`numbers` output: `[10, 20, 50, 40]` and `slicedNumbers` output: `[20, 50]`
+
+---
+
+`numbers` output: `[10, 20, 30, 50, 40]` and `slicedNumbers` output: `[30, 50]`
+
+## --video-solution--
+
+1
@@ -0,0 +1,62 @@
+---
+id: 661e27588602567c118451d5
+title: Learn Arrays and Loops Question E
+challengeType: 15
+dashedName: learn-arrays-and-loops-question-e
+---
+# --description--
+
+Now that you have a basic understanding about arrays, let's talk about loops. Loops are used to execute a block of code multiple times. One of those loops is the `while` loop. The `while` loop executes a block of code as long as the condition is true. The syntax of the `while` loop is as follows:
+
+```javascript
+while (condition) {
+  // code block to be executed
+}
+```
+
+For example, the following code snippet prints the numbers from 1 to 5:
+
+```javascript
+let i = 1;
+while (i <= 5) {
+  console.log(i);
+  i++;
+}
+```
+
+The above code snippet initializes a variable `i` with the value `1`. The `while` loop executes the block of code as long as the value of `i` is less than or equal to `5`. The value of `i` is incremented by `1` in each iteration.
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+let i = 5;
+while (i >= 0) {
+  console.log(i);
+  i--;
+}
+```
+
+
+## --answers--
+
+`5`, `4`, `3`, `2`, `1`, `0`
+
+---
+
+`5`, `4`, `3`, `2`, `1`
+
+---
+
+`5`, `4`, `3`, `2`, `1`, `0`, `-1`
+
+---
+
+`1`, `2`, `3`, `4`, `5`
+
+## --video-solution--
+
+1
@@ -0,0 +1,81 @@
+---
+id: 661e27598602567c118451d6
+title: Learn Arrays and Loops Question F
+challengeType: 15
+dashedName: learn-arrays-and-loops-question-f
+---
+# --description--
+
+The `for` loop is another type of loop that is used to execute a block of code multiple times. The `for` loop is used when the number of iterations is known. The syntax of the `for` loop is as follows:
+
+```javascript
+for (initialization; condition; increment/decrement) {
+  // code block to be executed
+}
+```
+
+For example, the following code snippet prints the numbers from 1 to 5:
+
+```javascript
+for (let i = 1; i <= 5; i++) {
+  console.log(i);
+}
+```
+
+To iterate over an array using a `for` loop, you can use the array's length property. For example, the following code snippet prints the elements of an array:
+
+```javascript
+const arr = [1, 2, 3, 4, 5];
+for (let i = 0; i < arr.length; i++) {
+  console.log(arr[i]);
+}
+```
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+const items = ['apple', 'banana', 'cherry', 'date'];
+for (let i = 1; i < items.length; i++) {
+  console.log(items[i]);
+}
+```
+
+## --answers--
+
+```bash
+apple
+banana
+cherry
+date
+```
+
+---
+
+```bash
+banana
+cherry
+```
+
+---
+
+```bash
+apple
+banana
+cherry
+```
+
+---
+
+```bash
+banana
+cherry
+date
+```
+
+## --video-solution--
+
+4
@@ -0,0 +1,56 @@
+---
+id: 661e275a8602567c118451d7
+title: Learn Arrays and Loops Question G
+challengeType: 15
+dashedName: learn-arrays-and-loops-question-g
+---
+# --description--
+
+Now that you know about the most common ways to iterate over values and arrays, there are a few more ways to iterate over arrays. Arrays have a built-in method called `map()`, which is used to create a new array by applying a function to each element of the original array. The `map()` method does not change the original array. The syntax of the `map()` method is as follows:
+
+```javascript
+const array = [1, 2, 3, 4, 5];
+
+const newArray = array.map((arrayValue) => {
+  return arrayValue * 2;
+});
+
+console.log(newArray); // Output: [2, 4, 6, 8, 10]
+```
+
+The `map()` method creates a new array by applying the function `(arrayValue) => { return arrayValue * 2;` to each element of the original array. This is particularly useful when you want to transform the elements of an array without changing the original array.
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+const numbers = [1, 2, 3, 4, 5];
+const newNumbers = numbers.map((number) => {
+  return number * 3;
+});
+
+console.log(newNumbers);
+```
+
+## --answers--
+
+`[1, 2, 3, 4, 5]`
+
+---
+
+`[3, 6, 9, 12, 15]`
+
+---
+
+`[1, 3, 5, 7, 9]`
+
+---
+
+`[3, 6, 9, 12, 15, 18]`
+
+## --video-solution--
+
+2
@@ -0,0 +1,57 @@
+---
+id: 661e275a8602567c118451d8
+title: Learn Arrays and Loops Question H
+challengeType: 15
+dashedName: learn-arrays-and-loops-question-h
+---
+# --description--
+
+One other useful array method is the `filter()` method. The `filter()` method creates a new array with all elements that pass the test implemented by the provided function. The syntax of the `filter()` method is as follows:
+
+```javascript
+const numbers = [2, 5, 6, 1, 9, -1]
+
+const newNumbers = numbers.filter((number) => {
+  return number > 2;
+});
+
+console.log(newNumbers); // Output: [5, 6, 9]
+```
+
+The `filter()` method creates a new array with all elements that are greater than 2. The `filter()` method does not change the original array.
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+const strings = ['apple', 'banana', 'cherry', 'orange', 'kiwi', 'mango'];
+const newStrings = strings.filter((string) => {
+  return string.length > 5;
+});
+
+console.log(newStrings);
+```
+
+## --answers--
+
+`['apple', 'banana', 'cherry', 'orange', 'kiwi', 'mango']`
+
+---
+
+`['apple', 'banana', 'cherry', 'orange', 'kiwi']`
+
+---
+
+`['banana, 'cherry', 'orange']`
+
+---
+
+`['apple', 'banana', 'cherry', 'orange', 'kiwi']`
+
+
+## --video-solution--
+
+3