In-Depth Understanding of Primitive and Reference Types in JavaScript

❮ Git Guide Programming En Cn ❯

In-Depth Understanding of Primitive and Reference Types in JavaScript

Category Programming Techniques

A variable can hold two types of values: primitive values and reference values.

ES6 introduced a new primitive data type Symbol, representing unique values. It is the seventh data type in the JavaScript language, the first six being: Undefined, Null, Boolean, String, Number, and Object.

Primitive Types

There are 6 primitive data types in JavaScript: Undefined, Null, Boolean, Number, String, and Symbol (new in ES6)!

Convention: The terms primitive data type and primitive value are synonymous.

Primitive data type values are accessed by value.

Primitive type values are immutable.

var str = "123hello321";
str.toUpperCase();     // 123HELLO321
console.log(str);      // 123hello321

Comparison of primitive types is a comparison of their values.

var a = 1;
var b = true;
console.log(a == b);    // true
console.log(a === b);   // false

In the above, a and b have different data types, but their values can still be compared because an implicit type conversion is performed before the comparison.

== : Compares only the values

=== : Compares both the values and the data types

Variables of primitive types are stored in the stack memory.

var a, b;
a = "zyj";
b = a;
console.log(a);   // zyj
console.log(b);   // zyj
a = "hehe";       // Changing the value of a does not affect the value of b
console.log(a);   // hehe
console.log(b);   // zyj

The diagram is as follows: The stack memory includes the variable identifier and the value of the variable.

Reference Types

In addition to the above 6 primitive data types, the rest are reference types, collectively referred to as Object types. Specifically, there are: Object type, Array type, Date type, RegExp type, Function type, etc.

Reference type values are accessed by reference.

Reference type values are mutable.

var obj = {name:"zyj"};   // Create an object
obj.name = "percy";       // Change the value of the name property
obj.age = 21;             // Add age property
obj.giveMeAll = function(){
  return this.name + " : " + this.age;
};                        // Add giveMeAll method
obj.giveMeAll();

Comparison of reference types is a comparison of references.

var obj1 = {};    // Create a new empty object obj1
var obj2 = {};    // Create a new empty object obj2
console.log(obj1 == obj2);    // false
console.log(obj1 === obj2);   // false

Since obj1 and obj2 each refer to two different objects stored in the heap memory, the values of variables obj1 and obj2 (reference addresses) are also different!

The values of reference types are objects (Object) stored in the heap memory.

var a = {name:"percy"};
var b;
b = a;
a.name = "zyj";
console.log(b.name);    // zyj
b.age = 22;
console.log(a.age);     // 22
var c = {
  name: "zyj",
  age: 22
};

The diagram is as follows:

The stack memory saves the variable identifier and a pointer to the object in the heap memory.

The heap memory saves the content of the object.

Type Detection

typeof: Often used to detect whether a variable is the most basic data type.

var a;
typeof a;    // undefined

a = null;
typeof a;    // object

a = true;
typeof a;    // boolean

a = 666;
typeof a;    // number

a = "hello";
typeof a;    // string

a = Symbol();
typeof a;    // symbol

a = function(){}
typeof a;    // function

a = [];
typeof a;    // object
a = {};
typeof a;    // object
a = /aaa/g;
typeof a;    // object

instanceof: Used to determine if the object pointed to by the prototype property of a

❮ Git Guide Programming En Cn ❯