If you're ever familiar with object oriented programming, you may also known pointer concept - used to make references or point to other variables, functions and properties. And the JavaScript programming language also supports object oriented programming. Obviously, it also have to support pointers, but there's a bit of confuses by the nature differences of the JavaScript programming language to others. Read this full JavaScript article tutorial if you are still interested in pointers in OOP JavaScript.

• Demo
• Enlarge
• Reload
• New window

Pointers can sometimes be a confusing topic. In JavaScript, it is perhaps even moreso than in other languages. The confusion arises because the var keyword is serving double duty. It is used to define variables, as is commonly realized. But it is also used to make references- or point to- other variables, functions and properties.

In most programming languages, for example C, pointers are symbolized with an asterisk. JavaScript relies on the developer to know which vars are references and which aren't. Why is this important? To put it succinctly, it is the difference between a variable being immutable or dynamic.

An example may be in order. Here's a simple script you can paste into Firebug to see how pointers work.

var marxBros = ['Chico', 'Harpo', 'Groucho']
var marxBrosPointer = marxBros;
marxBrosPointer.push('Zeppo');
console.log(marxBros); // ['Chico', 'Harpo', 'Groucho', 'Zeppo']
console.log(marxBrosPointer); // ['Chico', 'Harpo', 'Groucho', 'Zeppo']

As you can see, marxBros and marxBrosPointer are identical. Anything you do to marxBrosPointer will change marxBros and vice versa. You can think of them like aliases which both reference the same thing.

There is actually no difference now. marxBros is the original and marxBrosPointer is the pointer. But, for all intents and purposes, they are identical. One thing to note is that if you reassign one of them to something else, it does not affect the other.

var marxBros = ['Chico', 'Harpo', 'Groucho']
var marxBrosPointer = marxBros;
marxBros = null;
console.log(marxBrosPointer); //  ["Chico", "Harpo", "Groucho"]

Now let's look at a case where we are not dealing with pointers. Let's do the same thing as our first example, but instead of using an array, we'll use strings. Yes, this makes a big difference.

var marxBros = 'Chico, Harpo, Groucho';
var marxBrosCopy = marxBros;
marxBrosCopy += ', Zeppo';
console.log(marxBros); // 'Chico, Harpo, Groucho'
console.log(marxBrosCopy); // 'Chico, Harpo, Groucho, Zeppo'

When using strings instead of arrays, we find that changes to one do not change the other. Whether you change the original or the copy, they are not linked in the same way arrays and objects are. In the first example, changing either the original or the pointer resulted in changes to both variables. In this case, because strings are immutable in JavaScript, the var keyword copies a string instead of referencing it.

The same is true of numbers:

var numberOfMarxBros = 3;
var numberOfMarxBrosCopy = numberOfMarxBros;
++numberOfMarxBrosCopy;
console.log(numberOfMarxBros); // 3
console.log(numberOfMarxBrosCopy); // 4

Compare this to properties and functions, which use pointers:

// First let's make a cleanHouse function which has an action property
var cleanHouse = function() {
 console.log(arguments.callee.action);
}
cleanHouse.action = 'Doing your dishes...';

// Let's test and make sure it works as expected.
cleanHouse(); // 'Doing your dishes'

// So far so good. Now let's make a pointer to this function.
var actionToTake = cleanHouse;
actionToTake(); // 'Doing your dishes...'

// Now actionToTake is identical to cleanHouse. Any changes to one affect the other.
cleanHouse.action = 'Vacauuming the rug...';
actionToTake(); // 'Vacauuming the rug...'

actionToTake.action = 'Watering the plants...';
cleanHouse(); // 'Watering the plants...';

Here's an example where the reference is lost and it does not achieve the goal:

var cleanHouse = function() {
    console.log('Doing your dishes...');
}

var actionToTake = cleanHouse;

actionToTake(); // 'Doing your dishes...'

// Off to a good start, but here's where it goes wrong:

cleanHouse = function() {
    console.log('Vacauuming the rug...');
};

// Now the reference has been broken and actionToTake no longer refers to cleanHouse.
// Instead, actionToTake refers to, literally, the anonymous function that cleanHouse previously referred to.

actionToTake(); // 'Doing your dishes...'

// cleanHouse now refers to a new separate function.
cleanHouse(); // 'Vacuuming the rug...'

As you can see, it's important to know how to use pointers. It will help you decide when you need a copy or something, or when you need a reference to it.

Feel free to post clarifications or other explanations. This topic is certainly important to becoming an advanced JavaScript developer, yet it is not addressed too often. I think we could all benefit from more clarity on the subject, myself included.

I hope this article has helped shine some light on this issue. Happy coding!

• Code
• Print

• Comment (0)
• Write

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
Your site

Comment's title

I assure 100% I am real human
I repeat I am not bot

• Sent (0)
• New