pointers in javascript

Meet and Tackle pointers in Javascript

Posted on Posted in Blogs, Technology




Javascript, being a high level language does not have pointers, unlike C or C++. One cannot get the value of the memory address where a javascript variable is stored. But the concept of pointers (references) is unavoidable in any programming language. Pointers are so fundamental to programming, that without the proper understanding of pointers, you’ll encounter bizarre bugs in your seemingly perfect program. I’m bringing up this topic because students often find the concept of pointers a bit difficult to understand, and seeing that it is not even present in higher level languages like javascript, they get demotivated to even put an effort. So let us revise our understanding of the concept of pointers/references using Javascript. For a basic discussion on pointers in the C language, refer this.

Let us make an array (array1) of arbitrary integers. Suppose we need a sorted version of this array and also have the exact order retained to be used later. Intuitively we would copy this array by assigning it to another array (array2) before sorting, and use this copied array when we need the array in the original order. But after sorting array1 we see that the values in array2 also gets sorted!!!

pointers in javascript

This happens because fundamentally arrays are pointers!!! The array variable actually points to the first memory location of the chunk of memory used by the array. Read an elaborate discussion about this here. So when we try to copy the array by assigning it to another array variable, a reference to the same array is created. Both the arrays point to the same location of memory, so changing one results in a change in both.

Note: I am using an extension in VS Code (the code editor in the screenshots) called Quokka, which shows the instantaneous values of variable inline. You can verify the values using console.log() statements.

There are multiple ways to fix/avoid this bug, let us take a look at two of them.

  1. Using the slice function. The slice() function on an array returns a shallow copy of a portion of the array into a new array object. The original array will not be modified. If we don’t provide any arguments, the whole array is copied into a new array object. Thus changing one array will not affect the other.
  2. Using the spread operator. The spread operator () was introduced in ES6 specification. Using this you can insert all the values (i.e. spread the array) in a particular place.

Example of both is shown in the adjacent screenshot, and values verified using the Quokka extension.

pointers and spread operator in javascript

As we can see, the copies array2 and array3 are no longer affected by sorting array1, because these are entirely new objects in memory rather than being a reference to the old one. For someone who doesn’t have proper understanding of the concept of pointers and references, this kind of bugs will creep into their high-level-language programs and they will find it very difficult to understand and debug them.

A practical scenario may arise in the sorting visualization shown below. Its embedded in an iframe below, but you can view the actual page here. To correctly compare the time taken by different sorting algorithm, we need to keep a copy of the unsorted array every time we use a sorting algorithm on the original array.

 





If you liked this article please comment and show your support and interest so that I’ll be motivated to continue this effort. Like our facebook page if you haven’t already. And if you have any questions please comment. I’ll try to reply all.

Comments

comments