A developer writes the following code to fetch and display the first color from an API:

let firstColor

fetchColors()
  .then(colors => {
    firstColor = colors[0]
    console.log('inside .then():', firstColor.title)  // logs correctly
  })

console.log('outside .then():', firstColor?.title)

The output is:

outside .then(): undefined
inside .then(): Rad Red

The developer is confused — the assignment firstColor = colors[0] clearly executes. Why does firstColor.title log as undefined outside .then()?