Collections (Array, Dictionary, Set) in iOS Swift - UI Render Trace

Component - Collections (Array, Dictionary, Set)

This UI component shows three sections demonstrating how Array, Dictionary, and Set collections look and behave in a simple iOS app. Each section displays sample data and a button to add a new item, helping beginners see how these collections update on screen.

Widget Tree

VStack
├── Text (Title)
├── VStack (Array Section)
│   ├── Text (Array Label)
│   ├── ForEach (Array Items)
│   └── Button (Add to Array)
├── VStack (Dictionary Section)
│   ├── Text (Dictionary Label)
│   ├── ForEach (Dictionary Items)
│   └── Button (Add to Dictionary)
└── VStack (Set Section)
    ├── Text (Set Label)
    ├── ForEach (Set Items)
    └── Button (Add to Set)

The root VStack stacks all content vertically. The first Text shows the main title. Then three VStacks each show one collection type: a label Text, a list of items using ForEach, and a Button to add new items. This layout visually separates the three collections on the screen.

Render Trace - 11 Steps

Step 1: VStack

Step 2: Text (Title)

Step 3: VStack (Array Section)

Step 4: ForEach (Array Items)

Step 5: Button (Add to Array)

Step 6: VStack (Dictionary Section)

Step 7: ForEach (Dictionary Items)

Step 8: Button (Add to Dictionary)

Step 9: VStack (Set Section)

Step 10: ForEach (Set Items)

Step 11: Button (Add to Set)

State Change - Re-render

Trigger:User taps 'Add to Array' button

Before

Array contains ['Apple', 'Banana']

→

After

Array contains ['Apple', 'Banana', 'Cherry']

Re-renders:Array Section VStack re-renders to show updated list

UI Quiz - 3 Questions

What happens visually when you tap the 'Add to Dictionary' button?

A The dictionary list disappears.

B The array list updates instead.

C A new key-value pair appears in the dictionary list below the button.

D Nothing changes on screen.

Key Insight

Using separate vertical stacks for each collection type helps beginners visually separate and understand how Arrays, Dictionaries, and Sets behave differently. Buttons to add items demonstrate dynamic UI updates, reinforcing the concept of state-driven rendering in mobile apps.

Practice

1. Which Swift collection type keeps the order of items and allows duplicates?

easy

A. Array

B. Dictionary

C. Set

D. Tuple

Solution

1. Step 1: Understand collection types

   Arrays keep the order of elements and allow duplicates, dictionaries store key-value pairs, and sets store unique unordered items.

2. Step 2: Match collection behavior

   Since the question asks for ordered and duplicate-allowed collection, Array fits this description.

3. Final Answer:

   Array -> Option A

4. Quick Check:

   Ordered + duplicates = Array [OK]

Hint: Remember: Arrays keep order and duplicates [OK]

Common Mistakes:

• Confusing sets with arrays because both store multiple items
• Thinking dictionaries keep order like arrays
• Assuming tuples are collections like arrays

2. Which of the following is the correct way to declare an empty dictionary in Swift?

easy

A. var dict = Set<String>()

B. var dict = [Int]()

C. var dict = [String: Int]()

D. var dict = Array<Int>()

Solution

1. Step 1: Identify dictionary syntax

   In Swift, dictionaries are declared with key and value types inside square brackets separated by a colon, e.g., [KeyType: ValueType]().

2. Step 2: Check options

   var dict = [String: Int]() uses [String: Int]() which is correct for an empty dictionary with String keys and Int values. Others are array or set declarations.

3. Final Answer:

   var dict = [String: Int]() -> Option C

4. Quick Check:

   Dictionary syntax = [Key: Value]() [OK]

Hint: Dictionaries use [Key: Value]() syntax [OK]

Common Mistakes:

• Using [Int]() which is an array, not dictionary
• Confusing sets with dictionaries
• Missing colon between key and value types

3. What will be the output of this Swift code?

let fruits: Set<String> = ["apple", "banana", "apple", "orange"]
print(fruits.count)

medium

A. 4

B. Error

C. 2

D. 3

Solution

1. Step 1: Understand Set behavior

   Sets store unique elements only, so duplicates are removed automatically.

2. Step 2: Count unique fruits

   The array has "apple" twice, so unique items are "apple", "banana", "orange" which is 3.

3. Final Answer:

   3 -> Option D

4. Quick Check:

   Set removes duplicates, count = 3 [OK]

Hint: Sets remove duplicates, count unique items only [OK]

Common Mistakes:

• Counting duplicates as separate items
• Thinking sets keep order and duplicates
• Expecting a runtime error for duplicates

4. Identify the error in this Swift dictionary code:

var capitals = ["France": "Paris", "Japan": "Tokyo"]
capitals["France"] = "Lyon"
capitals["Germany"] = "Berlin"
print(capitals["Germany"])

medium

A. Adding new key-value pair is not allowed

B. No error, code runs and prints Optional("Berlin")

C. Cannot assign new value to existing key

D. Dictionary keys must be Int, not String

Solution

1. Step 1: Check dictionary mutation rules

   Dictionaries in Swift are mutable if declared with var, so you can update existing keys and add new ones.

2. Step 2: Analyze code behavior

   Updating "France" to "Lyon" and adding "Germany" with "Berlin" is valid. Printing capitals["Germany"] returns Optional("Berlin") because dictionary lookup returns an optional.

3. Final Answer:

   No error, code runs and prints Optional("Berlin") -> Option B

4. Quick Check:

   Mutable dictionary updates and adds keys [OK]

Hint: Mutable dictionaries allow adding and updating keys [OK]

Common Mistakes:

• Thinking dictionaries are immutable by default
• Expecting print to show value without Optional
• Believing keys must be Int type

5. Given this code, what is the resulting dictionary?

let names = ["Anna", "Bob", "Anna", "Cara"]
var counts = [String: Int]()
for name in names {
  counts[name, default: 0] += 1
}
print(counts)

hard

A. ["Anna": 2, "Bob": 1, "Cara": 1]

B. ["Anna": 1, "Bob": 1, "Cara": 1]

C. ["Anna": 3, "Bob": 1, "Cara": 1]

D. Syntax error due to default value

Solution

1. Step 1: Understand dictionary default value usage

   The syntax counts[name, default: 0] returns the current value for key or 0 if key is missing, allowing safe increment.

2. Step 2: Count occurrences in array

   "Anna" appears twice, "Bob" and "Cara" once each, so counts dictionary will have Anna: 2, Bob: 1, Cara: 1.

3. Final Answer:

   ["Anna": 2, "Bob": 1, "Cara": 1] -> Option A

4. Quick Check:

   Counting duplicates with default 0 increments [OK]

Hint: Use dictionary[key, default: 0] += 1 to count items [OK]

Common Mistakes:

• Expecting syntax error from default value usage
• Counting duplicates as 1 only
• Confusing dictionary keys and values