Accessing array elements in Javascript - Mini Project: Build & Apply

Accessing array elements

📖 Scenario: You are working on a simple shopping list app. You need to store the list of items and then access specific items by their position in the list.

🎯 Goal: Learn how to create an array and access its elements by index in JavaScript.

📋 What You'll Learn

Create an array with exact items

Create a variable to hold the index to access

Access the array element using the index variable

Print the accessed element

💡 Why This Matters

🌍 Real World

Arrays are used everywhere to store lists of things like shopping items, tasks, or names. Accessing elements by position helps you get or change specific items.

💼 Career

Knowing how to work with arrays and access their elements is a basic skill for any programming job, especially in web development and data handling.

1

Create the shopping list array

Create an array called shoppingList with these exact items in order: "milk", "bread", "eggs", "butter", "cheese".

Javascript

// Your code here

Hint

Use square brackets [] to create an array and separate items with commas.

2

Create an index variable

Create a variable called index and set it to 2 to represent the position of the item you want to access in the shoppingList array.

Javascript

const shoppingList = ["milk", "bread", "eggs", "butter", "cheese"];
// Your code here

Hint

Use const to create a variable and assign the number 2 to it.

3

Access the array element using the index

Create a variable called item and set it to the element in shoppingList at position index.

Javascript

const shoppingList = ["milk", "bread", "eggs", "butter", "cheese"];
const index = 2;
// Your code here

Hint

Use square brackets with the variable index to get the element from the array.

4

Print the accessed item

Write a console.log statement to print the value of the variable item.

Javascript

const shoppingList = ["milk", "bread", "eggs", "butter", "cheese"];
const index = 2;
const item = shoppingList[index];
// Your code here

Hint

Use console.log(item); to show the item in the console.

Practice

1. What is the index of the first element in a JavaScript array?

easy

A. -1

B. 1

C. 0

D. Depends on the array length

Solution

1. Step 1: Understand array indexing

   JavaScript arrays start counting elements from 0, not 1.

2. Step 2: Identify the first element's index

   The first element is always at index 0.

3. Final Answer:

   0 -> Option C

4. Quick Check:

   First element index = 0 [OK]

Hint: Remember arrays start at zero, not one [OK]

Common Mistakes:

• Thinking first element index is 1
• Confusing negative indexes
• Assuming index depends on array length

2. Which of the following is the correct syntax to access the third element of an array named colors?

easy

A. colors{2}

B. colors[2]

C. colors[3]

D. colors(3)

Solution

1. Step 1: Recall array access syntax

   JavaScript arrays use square brackets with zero-based index to access elements.

2. Step 2: Calculate index for third element

   The third element is at index 2 (0,1,2).

3. Final Answer:

   colors[2] -> Option B

4. Quick Check:

   Third element index = 2 [OK]

Hint: Use square brackets and zero-based index [OK]

Common Mistakes:

• Using parentheses instead of brackets
• Using curly braces
• Using index 3 for third element

3. What will be the output of the following code?

const fruits = ['apple', 'banana', 'cherry'];
console.log(fruits[1]);

medium

A. undefined

B. apple

C. cherry

D. banana

Solution

1. Step 1: Identify the array elements and indexes

   The array fruits has 'apple' at index 0, 'banana' at index 1, and 'cherry' at index 2.

2. Step 2: Access element at index 1

   fruits[1] returns 'banana'.

3. Final Answer:

   banana -> Option D

4. Quick Check:

   fruits[1] = banana [OK]

Hint: Remember index 1 is second element [OK]

Common Mistakes:

• Choosing first element instead
• Confusing index 1 with 2
• Expecting undefined for valid index

4. Find the error in this code snippet:

const numbers = [10, 20, 30];
console.log(numbers(1));

medium

A. Using parentheses instead of square brackets

B. Array is not declared properly

C. Index 1 is out of range

D. Missing semicolon

Solution

1. Step 1: Check array access syntax

   Arrays must be accessed with square brackets, not parentheses.

2. Step 2: Identify the error in the code

   numbers(1) is invalid syntax; correct is numbers[1].

3. Final Answer:

   Using parentheses instead of square brackets -> Option A

4. Quick Check:

   Array access needs [] not () [OK]

Hint: Use [] to access array elements, not () [OK]

Common Mistakes:

• Using () instead of []
• Thinking index 1 is invalid
• Ignoring syntax errors

5. Given the array const data = [5, 10, 15];, what will console.log(data[3]); output?

hard

A. undefined

B. 15

C. Error

D. 0

Solution

1. Step 1: Understand array length and valid indexes

   The array has elements at indexes 0, 1, and 2 only.

2. Step 2: Access index 3 which does not exist

   Accessing an index outside the array returns undefined in JavaScript.

3. Final Answer:

   undefined -> Option A

4. Quick Check:

   Out-of-range index returns undefined [OK]

Hint: Out-of-range indexes return undefined [OK]

Common Mistakes:

• Expecting error instead of undefined
• Confusing last element with index 3
• Assuming 0 is default value