Array creation in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create an empty array.

Javascript

const arr = [1];

Drag options to blanks, or click blank then click option'

A()

B{}

C[]

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Using curly braces {} which create objects, not arrays.

Using parentheses () which are for function calls.

Using null which is not an array.

The correct way to create an empty array in JavaScript is using square brackets [].

2fill in blank

medium

Complete the code to create an array with three numbers: 1, 2, and 3.

Javascript

const numbers = [1];

Drag options to blanks, or click blank then click option'

A[1, 2, 3]

B(1, 2, 3)

C{1, 2, 3}

D1, 2, 3

Attempts:

3 left

💡 Hint

Common Mistakes

Using curly braces which create objects.

Using parentheses which are for grouping or function calls.

Listing values without brackets.

Arrays with elements are created using square brackets with values separated by commas.

3fill in blank

hard

Fix the error in the code to create an array with the string 'hello'.

Javascript

const greetings = [1];

Drag options to blanks, or click blank then click option'

A('hello')

B['hello']

C'hello'

D{'hello'}

Attempts:

3 left

💡 Hint

Common Mistakes

Using curly braces which create objects.

Using parentheses which do not create arrays.

Using just quotes which create a string, not an array.

Arrays must be created with square brackets. Curly braces create objects, parentheses group expressions, and quotes alone create strings.

4fill in blank

hard

Fill both blanks to create an array of squares for numbers 1 to 5.

Javascript

const squares = Array.from({length: 5}, (_, [1]) => ([2] + 1) * ([2] + 1));

Drag options to blanks, or click blank then click option'

Ai

Bindex

Cn

Dx

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names for the index in the two blanks.

Using the first argument which is the element (undefined here).

The callback function receives the index as the second argument. Using index to represent it is clear and common. The square is calculated by multiplying (index + 1) by (index + 1).

5fill in blank

hard

Fill all three blanks to create an array of even numbers from 2 to 10.

Javascript

const evens = Array.from({length: [1], (_, [2]) => ([3] + 1) * 2);

Drag options to blanks, or click blank then click option'

A5

Bi

Cindex

Dn

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong length for the array.

Using the wrong variable name for the index.

Incorrect formula for even numbers.

The array length is 5 for numbers 2,4,6,8,10. The index variable is commonly named index. The formula uses (index + 1) * 2 to get even numbers starting from 2.

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