JavaScript Reference

By:    Updated: January 24,2017

Javascript variables may contain two different types of data: reference values and primitive values. There are five basic simple data types (also called primitive types) and one complex type: object which we dicussed in JavaScript typeof and Javascript Data Types.These variables are said to be accessed by value, because you are manipulating the actual value stored in the variable.

 

Reference values are objects stored in memory.When you manipulate an object, you’re really working on a reference to that object rather than the actual object itself. For this reason, such values are said to be accessed by reference.

Dynamic Setting Properties

Primitive and reference values are defined similarly: assign a value to a variable.When you work with reference values, you can add, change, or delete properties and methods at any time. But primitive values can’t added have any properties.

<script type="text/javascript">
var site = new Object();
site.name = "valinv";
alert(site.name); //valinv

var author = "flasle";
author.age = 28;
alert(author.name); //undefined
</script>

Copying Values

When a primitive value is assigned from one variable to another, the value stored on the variable object is created and copied into the location for the new variable. They have the same value, but completely separate from each other, so they can be used separately with no side effects.

 

When a reference value is assigned from one variable to another, the value stored on the variable object is also copied into the location for the new variable. The difference is that this value is actually a pointer to an object stored on the heap. Once the operation is complete, two variables point to exactly the same object, so changes to one will reflect the other.

<script type="text/javascript">
var main_domain_of_try = "valinv.com";

//get value of "valinv.com" which is a copy of main_domain_of_try's value.
var main_domain_of_www = main_domain_of_try;

alert(main_domain_of_www);


var site_try = new Object();
var site_www = site_try; //now they point to the same object

site_www.author = "flasle";

alert(site_try.author);
</script>

Arguments Passing

Javascript variables are accessed both by value and by reference, but arguments are passed only by value.This means that the value outside of the function (which called actual parameter) is copied into an argument on the inside of the function (which called formal parameter) the same way a value is copied from one variable to another. If the value is primitive, then it acts just like a primitive variable copy, and if the value is a reference, it acts just like a reference variable copy.

<script type="text/javascript">
function setDomain(domain_name)
{
	if("" == domain_name)
	{
		domain_name = "valinv.com";
	}

	return domain_name;
}
var domain_init = "";
var domain_res = setDomain(domain_init);

alert(domain_init); // empty string
alert(domain_res); // valinv.com


function setDeveloper(site_obj)
{
	site_obj.developer = "flasle";
}
var site_my = new Object();
setDeveloper(site_my);

alert(site_my.developer); // flasle
</script>

When a object is overwritten inside the function, it becomes a pointer to a local object. That local object is destroyed as soon as the function finishes executing. So

<script type="text/javascript">
function setDeveloper(site_obj)
{
	site_obj.developer = "flasle";

	site_obj = new Object(); // set to a new object (rewrite)
	site_obj.developer = "valinv";
}

var site_my_other = new Object();
setDeveloper(site_my_other);

alert(site_my_other.developer); // flasle
</script>

Types

How to distinguish primitive and reference values by type ? When you using typeof operator, typeof null will return "Object" and typeof object also return "Object". In this case, wo should use instanceof operator to help us.

<script type="text/javascript">
var fs_undefined = undefined;
var fs_null = null;
var fs_number = 28;
var fs_string = "valinv";
var fs_boolean = true;
var fs_object = new Object();

function distinguishValueByTypes()
{
	var fs_length = arguments.length;
	var fs_tips = "";

	for(var i=0; i<fs_length; i++)
	{
		fs_tips = "arguments[" + i + "] is ";

		if(arguments[i] instanceof Object)
		{
			fs_tips += "reference value";
		}
		else
		{
			fs_tips += "primitive value";
		}

		alert(fs_tips);
	}
}

distinguishValueByTypes(fs_undefined, fs_null, fs_number, fs_string, fs_boolean, fs_object);
</script>

All reference values are instances of Object, but primitives not.

More in Development Center
New on Valinv
Related Articles
Sponsored Links