Array update operations (arrayUnion, arrayRemove) in Firebase - Step-by-Step Execution

Process Flow - Array update operations (arrayUnion, arrayRemove)

Start with existing array

↓

Choose operation: arrayUnion or arrayRemove

↓

arrayUnion

↓

Update array in database

↓

Done

This flow shows how arrayUnion adds unique elements and arrayRemove deletes matching elements from an array in the database.

Execution Sample

Firebase

docRef.update({ tags: firebase.firestore.FieldValue.arrayUnion('new') });
docRef.update({ tags: firebase.firestore.FieldValue.arrayRemove('old') });

This code adds 'new' to the tags array if not present, and removes 'old' from the tags array if present.

Process Table

Step	Operation	Input Array	Value to Add/Remove	Resulting Array	Action Description
1	Start	['red', 'blue']	-	-	Initial array in document
2	arrayUnion	['red', 'blue']	'green'	['red', 'blue', 'green']	Add 'green' because it is not present
3	arrayUnion	['red', 'blue', 'green']	'blue'	['red', 'blue', 'green']	Do not add 'blue' again, already present
4	arrayRemove	['red', 'blue', 'green']	'blue'	['red', 'green']	Remove 'blue' from array
5	arrayRemove	['red', 'green']	'yellow'	['red', 'green']	No change, 'yellow' not in array
6	End	['red', 'green']	-	-	Final array after updates

💡 No more operations, array updated with union and remove as requested

Status Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	Final
tags	['red', 'blue']	['red', 'blue', 'green']	['red', 'blue', 'green']	['red', 'green']	['red', 'green']	['red', 'green']

Key Moments - 3 Insights

Why doesn't arrayUnion add a duplicate element if it already exists?

arrayUnion only adds elements that are not already in the array, as shown in step 3 where 'blue' is not added again.

What happens if arrayRemove tries to remove an element not in the array?

No change occurs to the array, as shown in step 5 where 'yellow' is not found and the array remains the same.

Does arrayUnion modify the original array or create a new one?

It updates the array in place in the database by adding unique elements, as seen in steps 2 and 3.

Visual Quiz - 3 Questions

Look at the execution table, what is the array after step 2?

A ['red', 'blue']

B ['red', 'blue', 'green']

C ['green']

D ['red', 'blue', 'green', 'blue']

💡 Hint

Check the 'Resulting Array' column in row for step 2

At which step does the array stop changing because the element to add is already present?

A Step 3

B Step 4

C Step 2

D Step 5

💡 Hint

Look at the 'Action Description' for step 3 in the execution table

If we try to remove 'red' instead of 'yellow' at step 5, what would the array be?

A ['red', 'green']

B ['red']

C ['green']

D ['yellow']

💡 Hint

Refer to how arrayRemove works in step 4 and apply it to step 5

Concept Snapshot

arrayUnion(value) adds value only if not already in array
arrayRemove(value) removes all instances of value
Both update the array atomically in the database
Use to safely add or remove elements without duplicates
No duplicates added by arrayUnion
No error if removing non-existent elements

Full Transcript

This lesson shows how Firebase's arrayUnion and arrayRemove update arrays in documents. arrayUnion adds new unique elements, skipping duplicates. arrayRemove deletes all matching elements if present. The execution table traces an example array through adding 'green', skipping duplicate 'blue', removing 'blue', and attempting to remove non-existent 'yellow'. The variable tracker shows the array's state after each operation. Key moments clarify why duplicates are not added and what happens when removing missing elements. The quiz tests understanding of array states at each step. This helps beginners see how these operations safely update arrays in Firestore.