Primitive and reference values

JavaScript variables can hold two types of data: primitive values and reference values.

Undefined, Null, Boolean, Number, and String are all accessed by its real value.

Reference values are accessed by its reference. A reference is an address in memory.

Dynamic Properties

You can add, change, or delete properties and methods of reference values.

 
<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script type="text/javascript">
    
        var person = new Object(); 
        person.name = "JavaScript"; 
        document.writeln(person.name); //"JavaScript" 

       
    </script>
</head>
<body>
</body>
</html>

Click to view the demo

Primitive values can't have dynamic properties:

 
<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script type="text/javascript">
        var name = "JavaScript"; 
        name.age = 20; 
        document.writeln(name.age); //undefined 
       
    </script>
</head>
<body>
</body>
</html>

Click to view the demo

Copying Values

When a primitive value is assigned from one variable to another, the value is copied.

 
<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script type="text/javascript">
    
        var num1 = 5; 
        var num2 = num1; 
        document.writeln(num1); // 5
        document.writeln(num2); // 5
        //change the value
        num1 = 3;
        document.writeln(num1); // 3
        document.writeln(num2); // 5

       
    </script>
</head>
<body>
</body>
</html>

Click to view the demo

num2 stays the same.

When a reference value is assigned from one variable to another, the reference is copied. The reference is a pointer to an object stored on the heap. Two references can point to the save object.

 
<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script type="text/javascript">
    
        var obj1 = new Object(); 
        var obj2 = obj1; 
        obj1.name = "JavaScript"; 
        document.writeln(obj2.name); //"JavaScript" 
        obj1.name = "HTML"; 
        document.writeln(obj2.name); //"HTML" 
    </script>
</head>
<body>
</body>
</html>

Click to view the demo

Argument Passing

If the value is primitive, then its value is copied.

 
<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script type="text/javascript">
        function addTen(num) { 
            num += 10; 
            return num; 
        } 
        var count = 20; 
        var result = addTen(count); 
        document.writeln(count); //20 - no change 
        document.writeln(result); //30 
       
    </script>
</head>
<body>
</body>
</html>

Click to view the demo

If the value is a reference, the reference value is passed in(not the actual object).

 
<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script type="text/javascript">
    
        function setName(obj) { 
           obj.name = "JavaScript"; 
        } 
        
        var person = new Object(); 
        setName(person); 
        document.writeln(person.name); //"JavaScript" 
        

       
    </script>
</head>
<body>
</body>
</html>

Click to view the demo

The following code shows only the value of reference (the pointer to the real object) is copy.

 
<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script type="text/javascript">
    
        function setNewName(obj) { 
            obj.name = "JavaScript"; 
            obj = new Object(); // a new value is assigned to the pointer(reference)
            obj.name = "HTML"; 
        } 
        var person = new Object(); 
        person.name = "JavaScript"; 
        document.writeln(person.name); //"JavaScript" 
        setNewName(person); 
        document.writeln(person.name); //"JavaScript" 

       
    </script>
</head>
<body>
</body>
</html>

Click to view the demo

Home
JavaScript Book
Language Basics

Variables: