Array Insertion at End in DSA Typescript - Execution Trace

Concept Flow - Array Insertion at End

Start with array

↓

Create new element

↓

Add element at last index

↓

Update array size

↓

Done

The flow shows starting with an existing array, creating a new element, adding it at the end, updating the size, and finishing.

Execution Sample

DSA Typescript

let arr = [1, 2, 3];
arr.push(4);
console.log(arr);

This code adds the number 4 at the end of the array [1, 2, 3] and prints the updated array.

Execution Table

Step	Operation	Array State Before	Action	Array State After	Size Before	Size After
1	Start with initial array	[1, 2, 3]	None	[1, 2, 3]	3	3
2	Create new element 4	[1, 2, 3]	Prepare element 4	[1, 2, 3]	3	3
3	Insert element at end	[1, 2, 3]	Add 4 at index 3	[1, 2, 3, 4]	3	4
4	Update size	[1, 2, 3, 4]	Size becomes 4	[1, 2, 3, 4]	4	4
5	End	[1, 2, 3, 4]	Insertion complete	[1, 2, 3, 4]	4	4

💡 Insertion done, array size updated to 4

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
arr	[1, 2, 3]	[1, 2, 3]	[1, 2, 3, 4]	[1, 2, 3, 4]	[1, 2, 3, 4]
size	3	3	4	4	4
newElement	undefined	4	4	4	4

Key Moments - 3 Insights

Why does the array size increase only after insertion?

Because the size reflects the number of elements actually stored. Step 3 adds the element, then step 4 updates the size to match the new count, as shown in the execution_table rows 3 and 4.

Is the new element created before or during insertion?

The new element is prepared before insertion (step 2), but it becomes part of the array only at step 3, as the execution_table shows the array state changes after insertion.

What happens if we try to insert without updating size?

The array size would be inconsistent with its contents, causing errors in some languages or logic. Here, step 4 ensures size matches the actual elements.

Visual Quiz - 3 Questions

Look at the execution_table, what is the array state after step 3?

A [1, 2, 3]

B [4, 1, 2, 3]

C [1, 2, 3, 4]

D [1, 2]

💡 Hint

Check the 'Array State After' column in row with Step 3.

At which step does the array size change from 3 to 4?

A Step 3

B Step 4

C Step 2

D Step 5

💡 Hint

Look at the 'Size After' column in execution_table rows 3 and 4.

If we skip step 4 (update size), what will be the size after insertion?

A Undefined

B 3

C 4

D 0

💡 Hint

Refer to variable_tracker for 'size' variable changes after step 3 and 4.

Concept Snapshot

Array Insertion at End:
- Use push() to add element at last index
- Array size increases by 1
- New element is created before insertion
- Size update reflects actual element count
- Insertion appends without shifting elements

Full Transcript

This visual trace shows how to insert an element at the end of an array. We start with an array [1, 2, 3]. First, the new element 4 is created. Then, it is added at the last index, making the array [1, 2, 3, 4]. The size of the array updates from 3 to 4 to reflect the new element. The process ends with the updated array and size. Key points include creating the element before insertion and updating size after insertion to keep data consistent.

Practice

1. What does inserting an element at the end of an array do?

easy

A. Adds the element as the last item in the array

B. Removes the first element of the array

C. Replaces the first element with the new element

D. Sorts the array in ascending order

Solution

1. Step 1: Understand array insertion

   Inserting at the end means adding a new element after the last existing element.

2. Step 2: Effect on array

   The new element becomes the last item, increasing the array size by one.

3. Final Answer:

   Adds the element as the last item in the array -> Option A

4. Quick Check:

   Insertion at end = append last [OK]

Hint: Insertion at end means append after last element [OK]

Common Mistakes:

• Confusing insertion at end with removal
• Thinking insertion replaces elements
• Assuming insertion sorts the array

2. Which of the following is the correct TypeScript syntax to insert an element `5` at the end of array `arr`?

easy

A. arr.insert(5);

B. arr.add(5);

C. arr.push(5);

D. arr.append(5);

Solution

1. Step 1: Identify correct method for insertion at end

   In TypeScript (JavaScript), the method to add at the end is `push()`.

2. Step 2: Check other options

   Methods `add()`, `insert()`, and `append()` do not exist on arrays in TypeScript.

3. Final Answer:

   arr.push(5); -> Option C

4. Quick Check:

   Use push() to add at end [OK]

Hint: Use push() method to add at array end [OK]

Common Mistakes:

• Using non-existent methods like add or append
• Confusing push() with pop()
• Trying to assign directly to arr[arr.length]

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

let arr = [1, 2, 3];
arr.push(4);
console.log(arr);

medium

A. [4, 1, 2, 3]

B. [1, 2, 3, 4]

C. [1, 2, 3]

D. [1, 2, 4, 3]

Solution

1. Step 1: Initial array state

   Array starts as [1, 2, 3].

2. Step 2: Apply push(4)

   push(4) adds 4 at the end, so array becomes [1, 2, 3, 4].

3. Final Answer:

   [1, 2, 3, 4] -> Option B

4. Quick Check:

   push adds element at end [OK]

Hint: push() adds element at array end [OK]

Common Mistakes:

• Thinking push adds at start
• Confusing push with unshift
• Expecting array to remain unchanged

4. Identify the error in the following TypeScript code that tries to insert `10` at the end of array `nums`.

let nums = [1, 2, 3];
nums.push = 10;
console.log(nums);

medium

A. Using assignment instead of calling push method

B. Array nums is not declared properly

C. push method does not exist on arrays

D. Console.log syntax is incorrect

Solution

1. Step 1: Analyze push usage

   The code assigns 10 to nums.push instead of calling nums.push(10).

2. Step 2: Effect of assignment

   This overwrites the push method, so no insertion happens and push is lost.

3. Final Answer:

   Using assignment instead of calling push method -> Option A

4. Quick Check:

   push must be called as a function [OK]

Hint: Call push() as a function, don't assign to it [OK]

Common Mistakes:

• Assigning value to push instead of calling it
• Forgetting parentheses after push
• Assuming push is a property, not a method

5. Given an empty array `let data: number[] = [];`, which code snippet correctly inserts numbers 1 to 3 at the end of the array using a loop?

hard

A. for(let i = 0; i < 3; i++) { data.push(i); }

B. for(let i = 1; i <= 3; i++) { data[i] = i; }

C. for(let i = 1; i < 3; i++) { data.push(i); }

D. for(let i = 1; i <= 3; i++) { data.push(i); }

Solution

1. Step 1: Understand loop range and insertion

   We want to insert 1, 2, 3 at the end, so loop from 1 to 3 inclusive.

2. Step 2: Check each option

   A pushes 0,1,2 instead of 1,2,3.
   B assigns directly to indices 1,2,3 leaving index 0 empty.
   C uses push with i from 1 to 3, correctly adding 1,2,3.
   D loops from 1 to 2 only, missing 3.

3. Final Answer:

   for(let i = 1; i <= 3; i++) { data.push(i); } -> Option D

4. Quick Check:

   Loop 1 to 3 with push() adds correct elements [OK]

Hint: Loop from 1 to 3 and push each value [OK]

Common Mistakes:

• Using wrong loop range
• Assigning to array indices instead of push
• Starting loop at 0 instead of 1