Javascript ES6 — Primitive types vs Objects # 12

There is something you should know before the spread operators lesson, I’m talking here about javascript data types, and this is a requirement before moving into the next lesson of this series of ES6 videos, this not a complete lesson about data types, I’ll explain the difference between two main categories of data types.

// Data Types

When you deal with javascript data, you’re in one of these spectrums, in other words, you’ve got the primitive types and objects, what I mean by that?

// Primitive Types

// Objects

Primitive Types

Primitive types are boolean, what’s a boolean? This is a boolean, true or false.

// Primitive Types (Boolean)

let bool = true || false 

0 or 1

let bool = 0 || 1

you’ve also undefined, yep, undefined can also be stored as a value for a variable

// Primitive Types (Boolean, undefined)

let number = undefined

You’ve null

// Primitive Types (Boolean, undefined, null)

let number = null

And, for the last one, you’ve string, you know them, I know you’re not a beginner, nothing new here

// Primitive Types (Boolean, undefined, null, String)

let firstName = "John"

The specificity of using these kinds of data types is, that they are passed by value, What I mean by that?

// Primitive Types (Boolean, undefined, null, String)
// passed by value

Let’s go for an example because I love examples.
Okay, keep this firstName variable, and, what if you decide to create a copy of this variable? you just go for a copyFirstName variable.
Now, if you console log the copyFirstName the result is John, and a console log of firstName, same here John.

// Primitive Types (Boolean, undefined, null, String)
// passed by value

let firstName = "John";

let copyFirstName = firstName;

console.log(firstName);
console.log(copyFirstName);

And if you update the copyFirstName with a new value Michael, now the value of copyFirstName change, but the value of firstName doesn’t be affected at all, and this is normally what you want, you create a copy, and you don’t want the source of the copy to be affected at all, and this is how primitive types behave when you’re in this kind of situation (select this line let copyFirstName = firstName;)

// Primitive Types (Boolean, undefined, null, String)
// passed by value

let firstName = "John";

let copyFirstName = firstName;

let copyFirstName = "Michael";

console.log(firstName);
console.log(copyFirstName);

To summarize, when you use this assignment operator to copy the value of a variable that has a primitive type (Boolean, undefined, null or string) in this case the value of the variable you’re copying from, did not be affected at all.

Objects

Let’s now move to Objects types, what are objects types?
Objects are array-literal, this is an array literal, or, this is how you create an array using the array-literal syntax aka square brackets.

// Objects (array-literal)

let numbers = [];

Is an array-literal an object? YES
Go for a typeof numbers

// Objects (array-literal)

let numbers = [];

console.log(typeof numbers);

Don’t blame for that, I’m not the one who creates javascript.
What are the other objects? You’ve also object-literal and this is how you create an object.

// Objects (array-literal, object-literal)

let info = {};

And you’ve Map and Set.

// Objects (array-literal, object-literal, Map, Set)

Remove these ones you don’t need them.

// Objects (array-literal, object-literal)

Let’s now go for an array numbers, that have some numbers on it, and if you want to go for the same previous example (select this line let copyFirstName = firstName;) to create a copy of numbers, so, add a new variable numbersCopy and assign to it numbers, and console log booth numbers and numbersCopy.

Logically I’m having a copy of numbers assigned to the numbersCopy variable.

let numbers = [23, 45, 65, 98];
let numbersCopy = numbers;

console.log(numbers);
console.log(numbersCopy);

Let’s comment out this console log(numbers), and, now, if you go and try updating the first index of numbersCopy which it’s normally 23 to a new value 145, nothing fancy.

numbersCopy[0] = 145;

numbersCopy is updated, HOWEVER, I’ve got a question for you, what’s the console.log(numbers) will show? Or, What it’s the value of numbers now? Pause the video, and think a little bit, stay away from the keyboard, think a little bit.

The answer is, that the value of numbers is also updated when you update any index of the numbersCopy variable, because in reality when you assign numbers to numbersCopy, you’re not creating a copy, you’re doing what ?! Data Types Objects are passed by references, not like Primitive types that are passed by values.

// Objects (array-literal, object-literal)
// passed by reference 

let numbers = [23, 45, 65, 98];
let numbersCopy = numbers;
let numbersCopyOfCopy = numbersCopy;


numbersCopy[0] = 145;
numbersCopy[1] = 76;

console.log(numbers);
console.log(numbersCopy);
console.log(numbersCopyOfCopy);

You’re referencing the value of numbers into a new variable copyNumbers, these two variables are linked together, even if you create another copy of a copy, each variable contains a reference to the same array numbers.

let numbers = [23, 45, 65, 98];
let numbersCopy = numbers;
let numbersCopyOfCopy = numbersCopy;

numbersCopy[0] = 145;

console.log(numbers);
console.log(numbersCopy);
console.log(numbersCopyOfCopy);

To summarise this line doesn’t create a copy, you deal with the same problem for object-literal, if you create a studentInfo object, and you go for a copy of this studentInfo, once you update the value of a property of the copy, the source will also be updated, go for a console log to see that.

let studentInfo = {
  firstName: "John",
  age: 33,
};

let studentInfoCopy = studentInfo;

studentInfoCopy.firstName = "Michael";

console.log(studentInfo);
console.log(studentInfoCopy);

To solve this problem follow the next video of this Javascript ES6 Serie.

Leave a Reply

Your email address will not be published. Required fields are marked *