Array update operations (arrayUnion, arrayRemove) in Firebase - Commands & Configuration

Introduction

When you store lists in a database, you often need to add or remove items without replacing the whole list. Firebase provides simple commands to add or remove items from arrays safely, even if many users update at the same time.

When you want to add a new tag to a list of tags on a document without overwriting existing tags.

When you need to remove a specific user ID from a list of participants in a chat room.

When multiple users can add their favorite items to a shared list without conflicts.

When you want to update a list field atomically to avoid race conditions.

When you want to keep a history of unique actions by adding only new entries to an array.

Commands

This command adds the item "apple" to the favorites array in the user123 document without removing existing items.

Terminal

firebase firestore:update --project example-project --collection users --doc user123 --data '{"favorites": FieldValue.arrayUnion("apple")}'

Expected Output

Updated document user123 in collection users.

→

--project - Specifies the Firebase project to use.

→

--collection - Specifies the Firestore collection.

→

--doc - Specifies the document ID to update.

This command removes the item "banana" from the favorites array in the user123 document if it exists.

Terminal

firebase firestore:update --project example-project --collection users --doc user123 --data '{"favorites": FieldValue.arrayRemove("banana")}'

Expected Output

Updated document user123 in collection users.

→

--project - Specifies the Firebase project to use.

→

--collection - Specifies the Firestore collection.

→

--doc - Specifies the document ID to update.

This command retrieves the current data of the user123 document to verify the array updates.

Terminal

firebase firestore:get --project example-project --collection users --doc user123

Expected Output

{

  "favorites": ["apple", "orange"]

}

→

--project - Specifies the Firebase project to use.

→

--collection - Specifies the Firestore collection.

→

--doc - Specifies the document ID to retrieve.

Key Concept

If you remember nothing else from this pattern, remember: use arrayUnion to add items safely without duplicates and arrayRemove to delete items from arrays atomically.

Common Mistakes

Trying to update arrays by replacing the whole array instead of using arrayUnion or arrayRemove.

This can overwrite other users' changes and cause data loss.

Use arrayUnion and arrayRemove to update arrays atomically without overwriting.

Using arrayUnion with items that are already in the array expecting duplicates.

arrayUnion prevents duplicates, so the item won't be added again.

Understand that arrayUnion only adds unique items; duplicates are ignored.

Using arrayRemove with an item not present in the array and expecting an error.

arrayRemove silently does nothing if the item is not found.

Know that arrayRemove is safe to use even if the item is missing.

Summary

Use arrayUnion to add new unique items to an array field without overwriting existing data.

Use arrayRemove to delete specific items from an array field safely.

Verify updates by retrieving the document after applying array operations.

Practice

1. What does the arrayUnion operation do in Firebase Firestore?

easy

A. Removes all elements from an array field

B. Adds unique elements to an array field without duplicates

C. Replaces the entire array with a new one

D. Sorts the array elements in ascending order

Solution

1. Step 1: Understand arrayUnion purpose

   The arrayUnion operation adds elements to an array field only if they are not already present, ensuring no duplicates.

2. Step 2: Compare with other options

   The other options describe removing all elements, replacing the array, or sorting, which are not what arrayUnion does.

3. Final Answer:

   Adds unique elements to an array field without duplicates -> Option B

4. Quick Check:

   arrayUnion adds unique items without duplicates [OK]

Hint: arrayUnion only adds new unique items to arrays [OK]

Common Mistakes:

• Thinking arrayUnion removes items
• Confusing arrayUnion with replacing arrays
• Assuming arrayUnion sorts the array

2. Which of the following is the correct syntax to add an element 'blue' to an array field 'colors' using arrayUnion in Firestore?

easy

A. docRef.update({ colors: arrayUnion('blue') })

B. docRef.update({ colors: arrayRemove('blue') })

C. docRef.set({ colors: arrayUnion('blue') })

D. docRef.add({ colors: arrayUnion('blue') })

Solution

1. Step 1: Identify correct method for updating fields

   To update an existing document's field, update() is used, not set() or add().

2. Step 2: Use arrayUnion to add element

   The syntax arrayUnion('blue') correctly adds 'blue' to the array without duplicates.

3. Final Answer:

   docRef.update({ colors: arrayUnion('blue') }) -> Option A

4. Quick Check:

   Use update() with arrayUnion() to add items [OK]

Hint: Use update() with arrayUnion() to add array items [OK]

Common Mistakes:

• Using arrayRemove instead of arrayUnion
• Using set() which overwrites the whole document
• Using add() which is for collections, not fields

3. Given the Firestore document field tags: ['news', 'tech'], what will be the value of tags after this update?

docRef.update({ tags: arrayUnion('tech', 'science') })

medium

A. ['news', 'tech', 'science']

B. ['news', 'science']

C. ['tech', 'science']

D. ['news', 'tech', 'tech', 'science']

Solution

1. Step 1: Understand arrayUnion behavior with existing elements

   arrayUnion adds only new unique elements. 'tech' already exists, so it won't be duplicated.

2. Step 2: Add new element 'science'

   'science' is new, so it will be added to the array.

3. Final Answer:

   ['news', 'tech', 'science'] -> Option A

4. Quick Check:

   arrayUnion adds only new unique items [OK]

Hint: arrayUnion skips duplicates, adds only new items [OK]

Common Mistakes:

• Expecting duplicates to be added
• Thinking arrayUnion removes items
• Confusing arrayUnion with arrayRemove

4. You want to remove the string 'urgent' from the array field 'labels' in a Firestore document. Which code snippet contains an error?

medium

A. docRef.update({ labels: arrayRemove('urgent', 'important') })

B. docRef.update({ labels: arrayRemove(['urgent']) })

C. docRef.update({ labels: arrayRemove() })

D. docRef.update({ labels: arrayRemove('urgent') })

Solution

1. Step 1: Check valid usage of arrayRemove

   arrayRemove requires at least one argument specifying which elements to remove.

2. Step 2: Analyze each option

   docRef.update({ labels: arrayRemove() }) calls arrayRemove with no arguments, which is invalid and causes an error.
   docRef.update({ labels: arrayRemove(['urgent']) }) attempts to remove the array ['urgent'] (won't match/remove string 'urgent').
   docRef.update({ labels: arrayRemove('urgent', 'important') }) removes both if present.
   docRef.update({ labels: arrayRemove('urgent') }) correctly removes 'urgent'.

3. Final Answer:

   docRef.update({ labels: arrayRemove() }) -> Option C

4. Quick Check:

   arrayRemove needs at least one element argument [OK]

Hint: arrayRemove must have at least one element argument [OK]

Common Mistakes:

• Calling arrayRemove with no arguments
• Passing an array inside arrayRemove instead of elements
• Confusing arrayRemove with arrayUnion

5. You have a Firestore document with an array field participants: ['alice', 'bob', 'carol']. You want to update it so that 'bob' is removed and 'dave' is added, ensuring no duplicates. Which update code achieves this?

hard

A. docRef.update({ participants: arrayRemove('bob'), participants: arrayUnion('dave') })

B. docRef.update({ participants: arrayRemove('bob', 'dave') })

C. docRef.update({ participants: arrayUnion('dave') })

D. docRef.update({ participants: arrayRemove('bob') }); docRef.update({ participants: arrayUnion('dave') })

Solution

1. Step 1: Understand Firestore update limitations

   You cannot apply both arrayRemove and arrayUnion to the same field in a single update object (duplicate keys overwrite, only last applies).

2. Step 2: Analyze options

   docRef.update({ participants: arrayRemove('bob'), participants: arrayUnion('dave') }): duplicate keys, only arrayUnion('dave') applies (adds 'dave', keeps 'bob').
   docRef.update({ participants: arrayRemove('bob', 'dave') }): removes 'bob' ('dave' ignored since absent), no add.
   docRef.update({ participants: arrayUnion('dave') }): adds 'dave', no remove.
   docRef.update({ participants: arrayRemove('bob') }); docRef.update({ participants: arrayUnion('dave') }): first removes 'bob', then adds 'dave' -> ['alice', 'carol', 'dave'].

3. Final Answer:

   docRef.update({ participants: arrayRemove('bob') }); docRef.update({ participants: arrayUnion('dave') }) -> Option D

4. Quick Check:

   Repeated keys overwrite; combine operations carefully [OK]

Hint: Firestore update keys must be unique; combine operations carefully [OK]

Common Mistakes:

• Using duplicate keys in update object
• Expecting multiple updates in one call with repeated keys
• Not using transactions for complex updates