Array creation in Javascript - Mini Project: Build & Apply

Array creation

📖 Scenario: You are helping a small shop owner keep track of the products they sell. The owner wants to list the products in an array so they can easily add more later.

🎯 Goal: Create an array of product names and display it.

📋 What You'll Learn

Create an array called products with the exact items: "Apples", "Bananas", "Carrots"

Create a variable called newProduct and set it to "Dates"

Add newProduct to the products array using the push method

Print the products array to the console

💡 Why This Matters

🌍 Real World

Arrays help store lists of items like products, names, or tasks in many apps and websites.

💼 Career

Knowing how to create and manage arrays is a basic skill for any programming job involving data handling.

1

Create the initial array

Create an array called products with these exact items: "Apples", "Bananas", "Carrots"

Javascript

// Create the array called products with "Apples", "Bananas", "Carrots"
// Your code here

Hint

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

2

Add a new product variable

Create a variable called newProduct and set it to the string "Dates"

Javascript

const products = ["Apples", "Bananas", "Carrots"];
// Create a variable newProduct and set it to "Dates"
// Your code here

Hint

Use const newProduct = "Dates"; to create the variable.

3

Add the new product to the array

Use the push method on the products array to add the newProduct variable

Javascript

const products = ["Apples", "Bananas", "Carrots"];
const newProduct = "Dates";
// Add newProduct to products using push
// Your code here

Hint

Use products.push(newProduct); to add the item.

4

Display the final array

Print the products array to the console using console.log

Javascript

const products = ["Apples", "Bananas", "Carrots"];
const newProduct = "Dates";
products.push(newProduct);
// Print products to the console
// Your code here

Hint

Use console.log(products); to show the array.

Practice

1. Which of the following is the correct way to create an empty array in JavaScript?

easy

A. const arr = [];

B. const arr = ();

C. const arr = {};

D. const arr = '';

Solution

1. Step 1: Understand array syntax

   In JavaScript, arrays are created using square brackets [].

2. Step 2: Identify correct empty array creation

   Only [] creates an empty array; parentheses, braces, or quotes create other types.

3. Final Answer:

   const arr = []; -> Option A

4. Quick Check:

   Empty array = [] [OK]

Hint: Remember arrays use square brackets [] to hold items [OK]

Common Mistakes:

• Using parentheses () instead of brackets
• Using curly braces {} which create objects
• Using quotes '' which create strings

2. Which of these is the correct syntax to create an array with three numbers: 1, 2, and 3?

easy

A. const numbers = (1, 2, 3);

B. const numbers = [1, 2, 3];

C. const numbers = {1, 2, 3};

D. const numbers = '1, 2, 3';

Solution

1. Step 1: Recognize array literal syntax

   Arrays use square brackets [] with comma-separated values inside.

2. Step 2: Check each option

   Only const numbers = [1, 2, 3]; uses square brackets with numbers separated by commas.

3. Final Answer:

   const numbers = [1, 2, 3]; -> Option B

4. Quick Check:

   Array with 3 numbers = [1, 2, 3] [OK]

Hint: Arrays always use square brackets with commas [OK]

Common Mistakes:

• Using parentheses which create expressions, not arrays
• Using curly braces which create objects
• Using quotes which create strings

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

const arr = [10, 20, 30];
console.log(arr.length);

medium

A. undefined

B. 30

C. Error

D. 3

Solution

1. Step 1: Understand array length property

   The length property returns the number of elements in the array.

2. Step 2: Count elements in the array

   The array has 3 elements: 10, 20, and 30, so arr.length is 3.

3. Final Answer:

   3 -> Option D

4. Quick Check:

   Array length = 3 [OK]

Hint: Array length counts items, not values [OK]

Common Mistakes:

• Confusing length with last element value
• Expecting length to be undefined
• Thinking length causes an error

4. Find the error in this array creation code:

const fruits = ["apple", "banana", "orange";

medium

A. Missing comma between elements

B. Strings should use single quotes instead of double quotes

C. Missing closing square bracket ]

D. Array elements must be numbers only

Solution

1. Step 1: Check array syntax

   Arrays must start with [ and end with ]. The code misses the closing bracket.

2. Step 2: Verify other parts

   Double quotes are allowed for strings, commas are present between elements.

3. Final Answer:

   Missing closing square bracket ] -> Option C

4. Quick Check:

   Array syntax requires matching brackets [OK]

Hint: Count opening and closing brackets to spot errors [OK]

Common Mistakes:

• Forgetting to close the array with ]
• Thinking quotes style causes error
• Assuming arrays only hold numbers

5. You want to create an array that contains the numbers from 1 to 5 using a loop. Which code correctly creates this array?

hard

A. const arr = [];
for(let i = 0; i < 5; i++) {
arr[i] = i + 1;
}

B. const arr = [];
for(let i = 1; i <= 5; i++) {
arr[i] = i;
}

C. const arr = new Array(5);
for(let i = 1; i <= 5; i++) {
arr[i] = i;
}

D. const arr = [];
for(let i = 1; i < 5; i++) {
arr.push(i);
}

Solution

1. Step 1: Understand array creation with loop

   We want numbers 1 to 5, so loop must run 5 times and add values 1 through 5.

2. Step 2: Analyze each option

   const arr = []; for(let i = 1; i <= 5; i++) { arr[i] = i; } assigns values starting at index 1, leaving index 0 empty. const arr = new Array(5); for(let i = 1; i <= 5; i++) { arr[i] = i; } creates array of length 5 but assigns starting at index 1, leaving index 0 empty. const arr = []; for(let i = 0; i < 5; i++) { arr[i] = i + 1; } assigns values 1 to 5 at indexes 0 to 4 correctly. const arr = []; for(let i = 1; i < 5; i++) { arr.push(i); } loops only to 4, missing 5.

3. Step 3: Choose best correct code

   const arr = []; for(let i = 0; i < 5; i++) { arr[i] = i + 1; } correctly fills array indexes 0 to 4 with values 1 to 5.

4. Final Answer:

   const arr = []; for(let i = 0; i < 5; i++) { arr[i] = i + 1; } -> Option A

5. Quick Check:

   Loop 0-4, assign i+1 = 1-5 [OK]

Hint: Loop from 0 to length-1, assign i+1 for 1 to 5 [OK]

Common Mistakes:

• Starting loop at 1 but assigning to arr[i] leaves arr[0] empty
• Loop ending before 5
• Using new Array(5) without filling all indexes