Array Declaration and Initialization in DSA Javascript - Execution Trace

Concept Flow - Array Declaration and Initialization

Start

↓

Declare Array Variable

↓

Initialize Array with Values

↓

Array Ready to Use

↓

End

The flow shows declaring an array variable, initializing it with values, and then the array is ready for use.

Execution Sample

DSA Javascript

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

Declare an array named arr and initialize it with three numbers, then print the array.

Execution Table

Step	Operation	Array State	Pointer Changes	Visual State
1	Declare variable arr	undefined	arr -> undefined	arr: undefined
2	Initialize arr with [10, 20, 30]	[10, 20, 30]	arr -> array object	arr: [10, 20, 30]
3	Print arr	[10, 20, 30]	arr unchanged	Output: [10, 20, 30]
4	End	[10, 20, 30]	arr unchanged	Final array state: [10, 20, 30]

💡 Array declared and initialized; execution ends after printing.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
arr	undefined	undefined	[10, 20, 30]	[10, 20, 30]	[10, 20, 30]

Key Moments - 3 Insights

Why is the array undefined right after declaration but before initialization?

At Step 1 in the execution_table, the variable arr is declared but not yet assigned a value, so it is undefined until initialization at Step 2.

How does the array visually look after initialization?

At Step 2, the array holds three elements [10, 20, 30], showing the sequence of values stored.

Does printing the array change its state or pointers?

No, at Step 3, printing outputs the array contents but does not modify the array or its pointers, as shown in the unchanged array state.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of arr after Step 1?

A null

B undefined

C [10, 20, 30]

D empty array []

💡 Hint

Check the 'Array State' column at Step 1 in the execution_table.

At which step does arr get assigned the array [10, 20, 30]?

A Step 3

B Step 1

C Step 2

D Step 4

💡 Hint

Look at the 'Operation' and 'Array State' columns in the execution_table.

If we change initialization to an empty array [], what would be the visual state after Step 2?

A arr: []

B arr: null

C arr: 10 -> 20 -> 30 -> null

D arr: undefined

💡 Hint

Refer to the 'Visual State' column and imagine the array with no elements.

Concept Snapshot

Array Declaration and Initialization:
- Declare array variable: let arr;
- Initialize with values: arr = [val1, val2, ...];
- Array stores elements in order
- Access elements by index
- Printing shows all elements
- Uninitialized array is undefined

Full Transcript

This lesson shows how to declare and initialize an array in JavaScript. First, the variable is declared and is undefined. Then, the array is initialized with values, creating a sequence of elements. Printing the array outputs its contents without changing it. The visual state shows the array holding the values [10, 20, 30]. Understanding these steps helps beginners see how arrays hold data and how their state changes during execution.

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