Array creation in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of Array.from with mapping function

What is the output of this JavaScript code?

Javascript

const arr = Array.from({ length: 4 }, (_, i) => i * 2);
console.log(arr);

A [2, 4, 6, 8]

B [0, 1, 2, 3]

C [0, 2, 4, 6]

D [undefined, undefined, undefined, undefined]

💡 Hint

Array.from creates an array from an object with length and applies the function to each index.

Array.from creates an array of length 4. The mapping function multiplies each index by 2, so the array is [0, 2, 4, 6].

❓ Predict Output

intermediate

Output of new Array with fill and map

What is the output of this JavaScript code?

Javascript

const arr = new Array(3).fill(1).map((x, i) => x + i);
console.log(arr);

A [1, 2, 3]

B [2, 3, 4]

C [1, 1, 1]

D [NaN, NaN, NaN]

💡 Hint

fill sets all elements to 1, then map adds the index to each element.

new Array(3) creates an array with 3 empty slots. fill(1) sets all to 1. map adds index to each element: 1+0=1, 1+1=2, 1+2=3.

❓ Predict Output

advanced

Output of spread operator with Array constructor

What is the output of this JavaScript code?

Javascript

const arr = [...Array(5).keys()];
console.log(arr);

A []

B [0, 1, 2, 3, 4]

C [undefined, undefined, undefined, undefined, undefined]

D [1, 2, 3, 4, 5]

💡 Hint

Array(5).keys() returns an iterator of indexes from 0 to 4.

Array(5) creates an array with 5 empty slots. keys() returns an iterator over indexes 0 to 4. Spread operator converts iterator to array [0,1,2,3,4].

❓ Predict Output

advanced

Output of Array constructor with string argument

What is the output of this JavaScript code?

Javascript

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

A 1

B 3

C TypeError

D undefined

💡 Hint

A single numeric string argument like '3' to the Array constructor is converted to number 3 and used as the array length.

new Array('3') creates an array with one element '3' because the argument is a string, not a number.

🧠 Conceptual

expert

Which option creates an array of length 4 filled with zeros?

Which of the following JavaScript code snippets creates an array of length 4 where every element is the number 0?

A Array.from({ length: 4 }, () => 0)

B [0, 0, 0, 0]

C new Array(4).map(() => 0)

D Array(4).fill(0)

💡 Hint

map on a new Array with empty slots does not run the function.

Array(4).fill(0) creates an array of length 4 filled with zeros. [0,0,0,0] is also correct but is a literal, not a creation method. new Array(4).map(() => 0) returns an array of 4 empty slots because map does not run on empty slots. Array.from works but the question asks for the method that creates it directly.

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