STEMTrainingGrounds

Lesson 3 of 16

Lesson Progress: 0%

Code Example

let name = "Alice";
console.log(name);

let age = 25;
console.log(age);

Instructions

▲ ← Click the triangle to hide or reveal instructions.

The code editor is below.
The left side of the code editor is where you type your input code.
The right side of the code editor is where you see the output of your code.

Practice by typing the code example above, in the left side of the code editor below.
Then click the "Run Code" button, to run the code.
You will see the output of your code in the output section.

JavaScript Code Editor

Task Incomplete

Editor Input:

Editor Output:

Click "Run Code" to see the output here

Strings and numbers, like "Alice" and 25, are called primitive data types.
Primitive values store simple information, like text or numbers.
When you copy a primitive value, JavaScript makes a completely separate copy.
Reference types are different because they share the same stored data instead of making a full copy.

Primitive data types store simple values like numbers, text, and true/false.
They are stored directly in memory.
When you copy a primitive value, you get a completely separate copy.
Reference data types store more complex values like objects and arrays.
They store a reference, which is like a shared address in memory.
This means two variables can point to the same data and affect each other.

Code Example

let isOnline = true;
console.log(isOnline));

let emptyValue = null;
console.log(emptyValue);

Instructions

▲ ← Click the triangle to hide or reveal instructions.

The code editor is below.
The left side of the code editor is where you type your input code.
The right side of the code editor is where you see the output of your code.

Practice by typing the code example above, in the left side of the code editor below.
Then click the "Run Code" button, to run the code.
You will see the output of your code in the output section.

JavaScript Code Editor

Task Incomplete

Editor Input:

Editor Output:

Click "Run Code" to see the output here

Simple values like true, numbers, or null are called primitive data types.
Primitive values are stored directly inside the variable, like putting one LEGO brick straight into a box.
Bigger things like arrays and objects are called reference data types because they can hold many pieces of information.
For reference types, the variable does not store all the data itself.
Instead, it stores a small “address” or pointer that tells the computer where the full data is kept in memory.
This means two variables can point to the same big data and affect each other.

Code Example

let x = 10;
let y = x;

y = 20;

console.log(x); // 10
console.log(y); // 20

Instructions

▲ ← Click the triangle to hide or reveal instructions.

The code editor is below.
The left side of the code editor is where you type your input code.
The right side of the code editor is where you see the output of your code.

Practice by typing the code example above, in the left side of the code editor below.
Then click the "Run Code" button, to run the code.
You will see the output of your code in the output section.

JavaScript Code Editor

Task Incomplete

Editor Input:

Editor Output:

Click "Run Code" to see the output here

The numbers 10 and 20 are primitive data types in JavaScript.
Primitive values store simple data like numbers, text, or true/false.
When y is set equal to x, it gets its own copy of the number.
Changing y does not change x because primitive values do not share the same memory.

Code Example

let colors = ["red", "green", "blue"];
console.log(colors);

let person = { name: "John", age: 30 };
console.log(person);

let student = {
  name: "Sam",
  grades: [90, 85],
  active: true
};
console.log(student);

Instructions

▲ ← Click the triangle to hide or reveal instructions.

The code editor is below.
The left side of the code editor is where you type your input code.
The right side of the code editor is where you see the output of your code.

Practice by typing the code example above, in the left side of the code editor below.
Then click the "Run Code" button, to run the code.
You will see the output of your code in the output section.

JavaScript Code Editor

Task Incomplete

Editor Input:

Editor Output:

Click "Run Code" to see the output here

The arrays and objects in this example are called reference data types.
They can store many pieces of information grouped together, like a list or a folder.
When you create them, the full data is stored in a special place in memory.
The variable does not hold all the data directly, but instead holds a reference (like a map or address) to it.
This means if two variables point to the same object or array, changes to one can affect the other.

Code Example

let today = new Date();

Instructions

▲ ← Click the triangle to hide or reveal instructions.

The code editor is below.
The left side of the code editor is where you type your input code.
The right side of the code editor is where you see the output of your code.

Practice by typing the code example above, in the left side of the code editor below.
Then click the "Run Code" button, to run the code.
You will see the output of your code in the output section.

JavaScript Code Editor

Task Incomplete

Editor Input:

Editor Output:

Click "Run Code" to see the output here

When we create a big item like a calendar using new Date(), it is too large to fit inside a normal variable box.
Instead of squishing the whole calendar in there, the computer places it safely inside a giant storage room.
Then, it puts a secret map inside your today variable that points exactly to where the calendar is hiding!
Again the variable does not hold all the data directly, but instead holds a reference to it.

Code Example

let a = { value: 10 };
let b = a;

b.value = 20;

console.log(a.value); // 20
console.log(b.value); // 20

Instructions

▲ ← Click the triangle to hide or reveal instructions.

The code editor is below.
The left side of the code editor is where you type your input code.
The right side of the code editor is where you see the output of your code.

Practice by typing the code example above, in the left side of the code editor below.
Then click the "Run Code" button, to run the code.
You will see the output of your code in the output section.

JavaScript Code Editor

Task Incomplete

Editor Input:

Editor Output:

Click "Run Code" to see the output here

The object a in this example is a reference data type because it stores grouped information.
When b is set equal to a, it does not make a copy, but points to the same place in memory.
That is why changing b.value also changes a.value, since they share the same object.

This last example shows a shared reference, where two variables point to the same object.
When b is set equal to a, it does not make a new copy.
Both variables are connected to the same data in memory.
If you change b, you might accidentally change a too.
This can cause confusing bugs because the data changes in places you did not expect.
This alone can cause problems in a programming challenges and tests.
To avoid this problem, you must make a real copy using special copy methods instead of simple assignment.
This will be discussed further in an a lesson about Data copying and data cloning.

Lesson Progress: 0%

Lesson Incomplete

← Previous: Variables

Lesson 3 of 16

Next: Operators →

let colors = ["red", "green", "blue"]; console.log(colors); let person = { name: "John", age: 30 }; console.log(person); let student = { name: "Sam", grades: [90, 85], active: true }; console.log(student);