# One Object with Many Names — narration script

Runtime 6:31. Timecodes are when each chapter starts; the film's animation is keyed to these cue times, so a recorded voice-over should keep each line near its timecode.

## 0:00 · Who changed the student?

- `0:01` Here's a student. You want a copy to work with, so you assign the student to a new variable and change the name on the copy to Thomas. The copy's name is Thomas, as you wanted. But the student's name is also Thomas now, and you never touched the student.

## 0:19 · One object, many pieces

- `0:20` To see why, let's start with what an object is. An object is a collection of data, which we call properties, and functions, which we call methods, in a single package. As an example, here's a student object, with a name, a favorite color, and a home address that is itself another object.
- `0:44` There are two ways to access parts of an object. The first is dot notation, just like Java and Python. JavaScript also supports bracket notation, which is like an array. This approach is quite useful, and you need it when the name you want is held in a variable, or when it has a hyphen in it. You can add or delete a property at any time. When you ask for something that isn't there, JavaScript is permissive: you just get undefined, rather than an error.
- `1:19` There is a wrinkle when you go more than one level at a time. The first access might return undefined, and the next step is an error. For example, ask for a number on a phone property that's not in the object, and you'll get a type error, because you're reading a property of undefined. The question mark dot operator can help, as it stops before that and returns undefined instead.

## 1:51 · A variable holds an arrow

- `1:51` Now for a point that often catches people. When you assign and change values, the behavior depends on the type. Numbers and strings are primitive types. Assign a number to a second variable, and you get a second value. Change one, and the other stays as it was.
- `2:12` Objects, arrays and functions in JavaScript are reference types. Since they can be large, the variable doesn't hold the data. It holds a reference to the value. So assigning student to a second variable copies the reference to the object, and not the object itself. You now have two names for one object. Change the name through either one, and both see the change. That's what happened to our student.
- `2:44` You might expect declaring the object with const to prevent this, but it doesn't. Const only stops the variable from being assigned a different value. The object it refers to can still change. If you want to stop that, use Object.freeze. Changes to a frozen object are ignored, or they're an error in strict mode. It only freezes the one level, though, so the address inside can still change.

## 3:13 · Looks same, but not same

- `3:14` The differences between primitives and reference types are significant, and they even change what equal means. Even if two individual objects have the same contents, they are two distinct objects, so comparing them is false, with double equals or with triple equals. The comparison is true only when both variables refer to the same object. JavaScript has no operator that compares objects by their contents, though you could write a function to do this yourself if needed.

## 3:49 · Handing an object to a function

- `3:49` The same reference type issues apply when you call a function. The parameter gets a copy of what the variable holds. For an object, that's a copy of the reference to the object, so the function can change the object, and the caller will see the change. You'll hear this called pass by reference, though the reference itself was copied. Compare this to when we pass a primitive type. If you change it in the function, the value isn't changed outside. This is pass by value. Note that even though a function can change an object's properties, it can't replace the caller's object. Assign a new object to the parameter, and only the local name changes.

## 4:35 · When you need a real copy

- `4:36` If you want a second object, you need to make a copy. The usual way to accomplish this is spread, three dots inside a new object literal. It copies each property into the new object. Change the copy's name, and you are just affecting the new object. The original object stays the same.
- `4:59` But be careful. In our example, look at the address. That property held a reference, so the reference is what got copied. Change the city through the copy, and the original's city changes too. This is called a shallow copy, because it goes one level deep.
- `5:19` For a deep copy, use structuredClone. It copies the nested objects too. It only works on data, though, and it throws an error on functions.

## 5:31 · Taking the garbage out

- `5:32` You don't free objects yourself. JavaScript has a garbage collector, and an object stays as long as your program can reach it.
- `5:43` Setting a variable to null can indicate you are done with something. When the last reference is gone, the object can be collected, and the memory freed. If you hold on to references you no longer need, you leak memory. In JavaScript we need to be especially careful with timers and event handlers.

## 6:05 · Follow the references

- `6:06` So when an object surprises you, follow the references. Who else is pointing at this object? Is this a copy, or another name?
- `6:15` To explore these ideas further, try the playgrounds on the Objects and Arrays page. Methods, and the keyword this, get a film of their own.