Array Declaration and Initialization in DSA Javascript - Build from Scratch

Array Declaration and Initialization

📖 Scenario: You are helping a small grocery store keep track of the items they have in stock. They want to list their items in an array so they can easily see what they have.

🎯 Goal: Create an array to hold the grocery items, add a few items, and then display the list.

📋 What You'll Learn

Create an array named groceryItems with the exact items: "Milk", "Eggs", "Bread"

Create a variable named newItem and set it to the string "Butter"

Add the newItem to the groceryItems array

Print the groceryItems array to show all items

💡 Why This Matters

🌍 Real World

Arrays are used to store lists of things like grocery items, tasks, or names so you can easily manage and access them.

💼 Career

Knowing how to create and manage arrays is a basic skill for programming jobs, especially when working with collections of data.

1

Create the initial array

Create an array called groceryItems with these exact items: "Milk", "Eggs", "Bread"

DSA Javascript

# Your code here

Hint

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

2

Add a new item variable

Create a variable called newItem and set it to the string "Butter"

DSA Javascript

const groceryItems = ["Milk", "Eggs", "Bread"];
# Your code here

Hint

Use const to create a variable and assign the string "Butter".

3

Add the new item to the array

Add the variable newItem to the end of the groceryItems array using the push method

DSA Javascript

const groceryItems = ["Milk", "Eggs", "Bread"];
const newItem = "Butter";
# Your code here

Hint

Use array.push(item) to add an item to the end of an array.

4

Print the array

Print the groceryItems array using console.log to show all items

DSA Javascript

const groceryItems = ["Milk", "Eggs", "Bread"];
const newItem = "Butter";
groceryItems.push(newItem);
# Your code here

Hint

Use console.log(groceryItems) to print the array.

Practice

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

easy

A. const arr = ();

B. const arr = [];

C. const arr = {};

D. const arr = array();

Solution

1. Step 1: Understand array declaration syntax

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

2. Step 2: Check each option

   const arr = []; uses square brackets which is correct. Options B and C use parentheses and curly braces which are incorrect for arrays. const arr = array(); uses a function call which is not valid.

3. Final Answer:

   const arr = []; -> Option B

4. Quick Check:

   Array declaration uses [] = const arr = []; [OK]

Hint: Arrays use square brackets [] for declaration [OK]

Common Mistakes:

• Using parentheses () instead of square brackets
• Using curly braces {} which declare objects
• Trying to call array() like a function

2. Which of the following is the correct syntax to declare and initialize an array with values 1, 2, and 3?

easy

A. const arr = array[1, 2, 3];

B. const arr = (1, 2, 3);

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

D. const arr = [1, 2, 3];

Solution

1. Step 1: Recall array initialization syntax

   Arrays are initialized with square brackets containing comma-separated values.

2. Step 2: Evaluate each option

   const arr = [1, 2, 3]; correctly uses square brackets with values. Options B and C use parentheses and curly braces which are invalid. const arr = array[1, 2, 3]; uses incorrect syntax with 'array' keyword.

3. Final Answer:

   const arr = [1, 2, 3]; -> Option D

4. Quick Check:

   Array with values uses [] and commas = const arr = [1, 2, 3]; [OK]

Hint: Use square brackets with commas to list values [OK]

Common Mistakes:

• Using parentheses instead of square brackets
• Using curly braces which create objects
• Trying to use 'array' keyword which doesn't exist

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

const arr = new Array(3);
console.log(arr);

medium

A. [undefined, undefined, undefined]

B. [0, 0, 0]

C. [empty x 3]

D. SyntaxError

Solution

1. Step 1: Understand new Array(n) behavior

   Using new Array(3) creates an array with length 3 but no defined values, called a sparse array.

2. Step 2: Check console output for sparse arrays

   Console shows sparse arrays as [empty x 3], not as undefined or zeros.

3. Final Answer:

   [empty x 3] -> Option C

4. Quick Check:

   new Array(3) creates sparse array = [empty x 3] [OK]

Hint: new Array(n) creates empty slots, not undefined values [OK]

Common Mistakes:

• Assuming new Array(n) fills with zeros
• Thinking undefined values appear explicitly
• Expecting a syntax error

4. Identify the error in the following array declaration and fix it:

const arr = new Array[1, 2, 3];

medium

A. Replace square brackets with parentheses: new Array(1, 2, 3);

B. Remove 'new' keyword: Array[1, 2, 3];

C. Use curly braces instead: new Array{1, 2, 3};

D. No error, code is correct

Solution

1. Step 1: Identify correct syntax for new Array()

   The Array constructor requires parentheses, not square brackets, to pass elements.

2. Step 2: Fix the syntax

   Change new Array[1, 2, 3] to new Array(1, 2, 3) to correctly create the array.

3. Final Answer:

   Replace square brackets with parentheses: new Array(1, 2, 3); -> Option A

4. Quick Check:

   Array constructor uses () not [] = Replace square brackets with parentheses: new Array(1, 2, 3); [OK]

Hint: Array constructor needs parentheses, not square brackets [OK]

Common Mistakes:

• Using square brackets with new Array
• Removing 'new' keyword incorrectly
• Using curly braces which are invalid here

5. How can you programmatically create a 2D array (array of arrays) with 3 rows and 2 columns, all initialized to zero in JavaScript?

hard

A. const arr = Array.from({length: 3}, () => Array(2).fill(0));

B. const arr = Array(3).fill(Array(2).fill(0));

C. const arr = [[0,0],[0,0],[0,0]];

D. All of the above

Solution

1. Step 1: Understand 2D array initialization

   Using Array.from with a function creates separate inner arrays to avoid shared references.

2. Step 2: Analyze each option

   const arr = Array(3).fill(Array(2).fill(0)); fills outer array with the same inner array reference, causing changes in one row to affect all. const arr = Array.from({length: 3}, () => Array(2).fill(0)); correctly creates separate inner arrays. const arr = [[0,0],[0,0],[0,0]]; manually creates the array but is less flexible. All of the above is incorrect because only A is fully correct for dynamic initialization.

3. Final Answer:

   const arr = Array.from({length: 3}, () => Array(2).fill(0)); -> Option A

4. Quick Check:

   Use Array.from with function for separate inner arrays = const arr = Array.from({length: 3}, () => Array(2).fill(0)); [OK]

Hint: Use Array.from with function to avoid shared inner arrays [OK]

Common Mistakes:

• Using fill with array causes shared references
• Manually typing arrays is inflexible
• Assuming all options are correct