Why Array update operations (arrayUnion, arrayRemove) in Firebase? - Purpose & Use Cases

The Big Idea

What if you could update lists in your database with one simple command, no mistakes, no delays?

The Scenario

Imagine you have a list of favorite movies stored in your app's database. You want to add a new movie or remove one without messing up the list or accidentally deleting other movies.

Doing this by hand means fetching the whole list, changing it, and saving it back. This can be tricky and slow, especially if many users do it at the same time.

The Problem

Manually updating lists is slow because you must read the entire list, change it, then write it back.

This causes delays and risks overwriting others' changes if many users update at once.

It's easy to make mistakes like adding duplicates or removing the wrong item.

The Solution

Array update operations like arrayUnion and arrayRemove let you add or remove items directly on the server.

This means you don't have to fetch the whole list or worry about duplicates or conflicts.

The database handles it safely and quickly for you.

Before vs After

✗ Before

let favorites = doc.data().movies;
favorites.push('New Movie');
db.doc('user/123').update({movies: favorites});

✓ After

db.doc('user/123').update({movies: firebase.firestore.FieldValue.arrayUnion('New Movie')});

What It Enables

You can safely and quickly add or remove items from lists in your database without extra code or errors.

Real Life Example

A music app lets users add songs to their playlist. Using arrayUnion, the app adds new songs without duplicates, even if many users add songs at the same time.

Key Takeaways

Manual list updates are slow and error-prone.

arrayUnion and arrayRemove update lists safely on the server.

This makes your app faster and more reliable when changing lists.

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