JavaScript Data Types: Primitive vs Reference
Jul 13, 2025 am 02:43 AMJavaScript's data types are divided into primitive types and reference types. Primitive types include string, number, boolean, null, undefined, and symbol. The values are immutable and copy copies when assigned, so they do not affect each other; reference types such as objects, arrays and functions store memory addresses, and variables pointing to the same object will affect each other. Typeof and instanceof can be used to determine types, but pay attention to the historical problem of typeof null. Understanding these two types of differences can help write more stable and reliable code.
JavaScript data types are divided into two categories: Primitive and Reference. Understanding the difference between them is critical to writing more stable and predictable code.

Primitive types are immutable values
There are six primitive data types in JavaScript: string
, number
, boolean
, null
, undefined
, and symbol
(new in ES6). These types of values are immutable, which means that you cannot change an original value itself, you can only replace it with a new value.
for example:

let name = "Tom"; name.toUpperCase(); // Returns "TOM", but name itself is still "Tom"
This means that the operation of the original type will not modify the original value, but will return a new value. When you assign a primitive type to another variable, you actually copy the copy of this value:
let a = 10; let b = a; b = 20; console.log(a); // Still 10
Therefore, the assignment and operation of the original type are independent and do not affect each other.

The reference type points to the memory address
Reference types mainly include objects (Object), arrays (Array) and functions (Function). They store "references" to a location in memory, not the actual data itself.
See an example:
let obj1 = { name: "Alice" }; let obj2 = obj1; obj2.name = "Bob"; console.log(obj1.name); // Output Bob
Here obj2
does not copy obj1
's content, but points to the same memory address. Therefore, modifying the attributes of obj2
will also affect obj1
.
The same situation will also occur when the function passes arguments:
function changeName(user) { user.name = "Changed"; } let person = { name: "Original" }; changeName(person); console.log(person.name); // Output Changed
Because what is passed in is a reference to the object, modifications to the object inside the function will affect the outside.
Tips for judging types
To determine whether a variable is a primitive type or a reference type, you can use typeof
and instanceof
:
-
typeof
recognizes most primitive types (exceptnull
will return"object"
) -
instanceof
is used to determine the specific constructor of reference type
For example:
typeof 42; // "number" typeof "hello"; // "string" typeof true; // "boolean" typeof null; // "object" (this is a historical issue with JS) typeof {}; // "object" typeof function(){}; // "function" (special reference type)
If you want to accurately judge null
, you can use === null
to handle it separately.
Basically that's it. Understanding the difference between primitive types and reference types can help you avoid many unexpected problems, especially when dealing with complex structures or function parameter passing.
The above is the detailed content of JavaScript Data Types: Primitive vs Reference. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

ReadonlypropertiesinPHP8.2canonlybeassignedonceintheconstructororatdeclarationandcannotbemodifiedafterward,enforcingimmutabilityatthelanguagelevel.2.Toachievedeepimmutability,wrapmutabletypeslikearraysinArrayObjectorusecustomimmutablecollectionssucha

SetupaMaven/GradleprojectwithJAX-RSdependencieslikeJersey;2.CreateaRESTresourceusingannotationssuchas@Pathand@GET;3.ConfiguretheapplicationviaApplicationsubclassorweb.xml;4.AddJacksonforJSONbindingbyincludingjersey-media-json-jackson;5.DeploytoaJakar

Maven is a standard tool for Java project management and construction. The answer lies in the fact that it uses pom.xml to standardize project structure, dependency management, construction lifecycle automation and plug-in extensions; 1. Use pom.xml to define groupId, artifactId, version and dependencies; 2. Master core commands such as mvnclean, compile, test, package, install and deploy; 3. Use dependencyManagement and exclusions to manage dependency versions and conflicts; 4. Organize large applications through multi-module project structure and are managed uniformly by the parent POM; 5.

First, use JavaScript to obtain the user system preferences and locally stored theme settings, and initialize the page theme; 1. The HTML structure contains a button to trigger topic switching; 2. CSS uses: root to define bright theme variables, .dark-mode class defines dark theme variables, and applies these variables through var(); 3. JavaScript detects prefers-color-scheme and reads localStorage to determine the initial theme; 4. Switch the dark-mode class on the html element when clicking the button, and saves the current state to localStorage; 5. All color changes are accompanied by 0.3 seconds transition animation to enhance the user

Yes, a common CSS drop-down menu can be implemented through pure HTML and CSS without JavaScript. 1. Use nested ul and li to build a menu structure; 2. Use the:hover pseudo-class to control the display and hiding of pull-down content; 3. Set position:relative for parent li, and the submenu is positioned using position:absolute; 4. The submenu defaults to display:none, which becomes display:block when hovered; 5. Multi-level pull-down can be achieved through nesting, combined with transition, and add fade-in animations, and adapted to mobile terminals with media queries. The entire solution is simple and does not require JavaScript support, which is suitable for large

To generate hash values using Java, it can be implemented through the MessageDigest class. 1. Get an instance of the specified algorithm, such as MD5 or SHA-256; 2. Call the .update() method to pass in the data to be encrypted; 3. Call the .digest() method to obtain a hash byte array; 4. Convert the byte array into a hexadecimal string for reading; for inputs such as large files, read in chunks and call .update() multiple times; it is recommended to use SHA-256 instead of MD5 or SHA-1 to ensure security.

Use datetime.strptime() to convert date strings into datetime object. 1. Basic usage: parse "2023-10-05" as datetime object through "%Y-%m-%d"; 2. Supports multiple formats such as "%m/%d/%Y" to parse American dates, "%d/%m/%Y" to parse British dates, "%b%d,%Y%I:%M%p" to parse time with AM/PM; 3. Use dateutil.parser.parse() to automatically infer unknown formats; 4. Use .d

The settings.json file is located in the user-level or workspace-level path and is used to customize VSCode settings. 1. User-level path: Windows is C:\Users\\AppData\Roaming\Code\User\settings.json, macOS is /Users//Library/ApplicationSupport/Code/User/settings.json, Linux is /home//.config/Code/User/settings.json; 2. Workspace-level path: .vscode/settings in the project root directory
