Every developer knows that computer algorithms are tightly related to data structures. Indeed many of the algorithms depend on a data structures and can be very effective for some data structures and ineffective for others. A typical example of this is the heapsort algorithm, which depends on a data structure called “heap”. In this case although the stack and the queue are data structures instead of pure algorithms it’s imporant to understand their structure and the way they operate over data.

However, before we continue with the concrete realization of the stack and the queue, let’s first take a look on the definition of this term. A data structure is a logical abstraction that “models” the real world and presents (stores) our data in a specific format. The access to this data structure is often predefined thus we can access directly every item containing data. This help us to perform a different kind of tasks and operations over different kind of data structures – insert, delete, search, etc.. A typical data structures are the stack, the queue, the linked list and the tree.

All these structures help us perform specific operations effectively. For instance searching in a balanced tree is faster than searching in a linked list.

It is also very important to note that data structures can be represented in many different ways. We can model them using arrays or pointers, as shown in this post. In fact the most important thing is to represent the logical structure of the data structure you’re modeling. Thus the stack is a structure that follows the LIFO (Last In First Out) principle and it doesn’t matter how it is represented in our program (whether it will be coded with an array or with pointers). The important thing into a stack representation is to follow the LIFO principle correctly. In this case if the stack is an array only its top should be accessible and the only operation must be inserting new top of the stack.

Overview

The stack and the queue are somehow related data structures as they represent two parts of somehow identical logics. Thus they are commonly described in pair.

Stack

The stack data structure models the real-world stack. You can think of it as stack of boxes one above the other. Thus the only way to put another item into the stack is to put it above all other items (on its top). This operation is often called “push”. In the other hand taking an item from the stack is called pop, and also only the highest item can be “poped”. The following image describes better the structure of the stack and its operations – push and pop.

We see here how computer data structures model the real world. The stack data structure indeed makes no exception and models the real-world stacks.

Stack Implementation

As I said a stack can be implemented in some different ways. The first approach is to use an array (using the specific language syntax of the programming language of your choice). Here’s the implementation of a stack using an array in PHP.

$stack = array();

function push($data, &$stack) {
	$stack[] = $data;
}

function pop(&$stack)
{
	$len = count($stack);
	$top = $stack[$len-1];
	
	unset($stack[$len-1]);
	
	return $top;
}

// array()
print_r($stack);

push(1, $stack);
push(2, $stack);
push('some test', $stack);
push(array(25,12,1999), $stack);

// [1, 2, 'some test', [25, 12, 1999]]
print_r($stack);

// [25, 12, 1999]
echo pop($stack);
// 'some test'
echo pop($stack);

// [1, 2]
print_r($stack);

However there are much easier ways to do the same thing with PHP since there are lots of predefined functions that work with stacks.

$stack = array();

function push($data, &$stack) {
	$stack[] = $data;
}

function pop(&$stack)
{
	return array_pop($stack);
}

// array()
print_r($stack);

push(1, $stack);
push(2, $stack);
push('some test', $stack);
push(array(25,12,1999), $stack);

// [1, 2, 'some test', [25, 12, 1999]]
print_r($stack);

// [25, 12, 1999]
echo pop($stack);
// 'some test'
echo pop($stack);

// [1, 2]
print_r($ret);

As in many programming languages here the example makes use of integers but it can be modified to work with more complex data types as objects, mutli dimensional arrays, etc. However we can use a higher level abstraction in order to represent a stack. Here’s a short example of a stack using pointers. The stack class only holds a pointer to the top of the stack. Thus only the top can be “poped”. Also each elements points to its predecessor. Using this abstraction we’re sure that the programmer can perform only these two operations – “pop” and “push”.

class Struct
{
	protected $_data = null;
	protected $_next = null;
	
	public function __construct($data, $next)
	{
		$this->_data = $data;
		$this->_next = $next;
	}
	
	public function getData()
	{
		return $this->_data;
	}
	
	public function setData(&$data)
	{
		$this->_data = $data;
	}
	
	public function getNext()
	{
		return $this->_next;
	}
	
	public function setNext(&$next)
	{
		$this->_next = $next;
	}
}

class Stack
{
	protected $_top = null;
	
	public function push($data)
	{
		$item = new Struct($data, null);
		
		if ($this->_top == null) {
			$this->_top = $item;
		} else {
			$item->setNext($this->_top);
			$this->_top = $item;
		}
	}

	public function pop()
	{
		if ($this->_top) {
			$t = $this->_top;
			$data = $t->getData();
			
			$this->_top = $this->_top->getNext();
			
			$t = null;
			
			return $data;
		}
	}
	
	public function __toString()
	{
		$output = '';
		$t = $this->_top;
		while ($t) {
			$output .= $t->getData() . ' ';
			$t = $t->getNext();
		}
		
		return $output;
	}
}

$s = new Stack();
$s->push(1);
$s->push(2);
$s->push(3);

// 3 2 1
echo $s;

$s->pop();
$s->pop();

// 1
echo $s;

Queue

As mentioned above the queue is somehow related to the stack data structure. However it follows a different principle – FIFO (First In First Out), which means that the item that has been in the queue for the longest time is retrieved first.

This comes again from the real world, where we can think of a queue of people waiting in front of a movie theater. In this case the person that has waited the most takes its ticket first.

Queue Implementation

An array representation of a queue isn’t a difficult task. However the only example of a queue here is using pointers. Indeed the following code syntax is very tightly related to PHP so only the main principles of supporting a queue functionality is important.

class Item
{
	public $data = null;
	public $next = null;
	public $prev = null;
	
	public function __construct($data)
	{
		$this->data = $data;
	}
}

class Queue
{
	protected $_head = null;
	protected $_tail = null;
	
	public function insert($data)
	{
		$item = new Item($data);
		
		if ($this->_head == NULL) {
			$this->_head = $item;
		} else if ($this->_tail == NULL) {
			$this->_tail = $item;
			$this->_head->next = $this->_tail;
			$this->_tail->prev = $this->_head;
		} else {
			$this->_tail->next = $item;
			$item->prev = $this->_tail;
			$this->_tail = $item;
		}
	}
	
	public function delete()
	{
		if (isset($this->_head->data)) {
			
			$temp = $this->_tail;
			$data = $temp->data;
			
			$this->_tail = $this->_tail->prev;
			
			if (isset($this->_tail->next))
				$this->_tail->next = null;
			else 
				$this->_tail = $this->_head = null;
			
			return $data;
		}
		
		return FALSE;
	}
	
	public function __toString()
	{
		$output = '';
		$t = $this->_head;
		while ($t) {
			$output .= $t->data . ' | ';
			$t = $t->next;
		}
		
		return $output;
	}
}


$q = new Queue();

$q->insert(1);
$q->insert(2);
$q->insert(3);

// 1 2 3
echo $q;

$q->delete();
$q->delete();

// 1
echo $q;

$q->insert(15);
$q->insert('hello');
$q->insert('world');
$q->delete();

// 1 15 "hello"
echo $q;

Application

Stacks and queues are widely used in programming. By defining stacks and queues we somehow predefine the way our data structure is accessed, thus we’re sure that our program will access the data in a specific manner. For instance if we code a queue for a list or upcomming commands, we’re sure that the most waited command will be executed first. In this case we predefine the order the commands are processed. In the web programming, especially in JavaScript, every developer knows what’s an event fired in a web browser environemtn. In case of many events, they’re putted into a queue and they are executed consecutively in the order they were fired by the user.

Another example is the execution stack of most of the programming compilers and interpreters. We know that in a OOP languages, such as PHP for instance, there’s a stack of function calls. In case of failure we can easily see the “stack trace”.

You see how many examples of queues and stacks there are in the real-world programming. These two structures are easy to implement yet very important in order to understand other more complex data structures as linked lists and trees.

1. Which loop is faster in JavaScript?

• for
• while correct answer

var str = 'my-'; alert(str.split('-')[1]);

• Error
• An empty string correct answer
• “-“
• “my”

3. What is server-side JavaScript?

• JS scripts files placed on the server that can be publicly accessed by the client
• JS engine running on the server accessible via http correct answer

4. Is it possible to have private and public methods in a JavaScript object

• Yes correct answer
• No

Note that the quiz will remain open, but no results will be published!

It’s weird that bubble sort is the most famous sorting algorithm in practice since it is one of the worst approaches for data sorting. Why is bubble sort so famous? Perhaps because of its exotic name or because it is so easy to implement. First let’s take a look on its nature.

Bubble sort consists of comparing each pair of adjacent items. Then one of those two items is considered smaller (lighter) and if the lighter element is on the right side of its neighbour, they swap places. Thus the lightest element bubbles to the surface and at the end of each iteration it appears on the top. I’ll try to explain this simple principle with some pictures.

1. Each two adjacent elements are compared

Here “2” appears to be less than “4”, so it is considered lighter and it continues to bubble to the surface (the front of the array).

2. Swap with heavier elements

On his way to the surface the currently lightest item meets a heavier element. Then they swap places.

3. Move forward and swap with each heavier item

The problem with bubble sort is that you may have to swap a lot of elements.

4. If there is a lighter element, then this item begins to bubble to the surface

If the currently lightest element meets another item that is lighter, then the newest currently lightest element starts to bubble to the top.

5. Finally the lightest element is on its place

At the end of each iteration we can be sure that the lightest element is on the right place – at the beginning of the list.

The problem is that this algorithm needs a tremendous number of comaprisons and as we know already this can be slow.

We can easily see how ineffective bubble sort is. Now the question remains – why is it so famous? Maybe indeed the answer lies in the simplicity of its implementation. Let’s see how to implement bubble sort.

Implementation

Implementing bubble sort is easy. The question is how easy? Well, obviously after understanding the principles of this algorithm every developer, even a beginner, can implement it. Here’s a PHP implementation of bubble sort.

$input = array(6, 5, 3, 1, 8, 7, 2, 4);

function bubble_sort($arr)
{
	$length = count($arr);
	
	for ($i = 0; $i < $length; $i++) {
		for ($j = $length-1; $j > $i; $j--) {
			if ($arr[$j] < $arr[$j-1]) {
				$t = $arr[$j];
				$arr[$j] = $arr[$j-1];
				$arr[$j-1] = $t;
			}
		}
	}
	
	return $arr;
}

// 1, 2, 3, 4, 5, 6, 7, 8
$output = bubble_sort($input);

Clearly the implementation consists of few lines of code and two nested loops.

Complexity: Where's Bubble Sort Compared to Other Sorting Algorithms

Compared to other sorting algorithm, bubble sort is really slow. Indeed the complexity of this algoritm is O(n²) which can't be worse. It's weird that the most well known sorting algorithm is the slowest one.

Even for small values of n, the number of comparisons and swaps can be tremendous.

Another problem is that most of the languages (libraries) have built-in sorting functions, that they don't make use of bubble sort and are faster for sure. So why a developer should implement bubble sort at all?

Application: 3 Cool Reasons To Use Bubble Sort

We saw that bubble sort is slow and ineffective, yet it is used in practice. Why? Is there any reason to use this slow, ineffective algorithm with weird name? Yes and here are some of them that might be helpful for any developer.

1. It is easy to implement

Definitely bubble sort is easier to implement than other "complex" sorting algorithms as quicksort. Bubble sort is easy to remember and easy to code and that's great instead of learning and remembering tons of code.

2. Because the library can't help

Let's say you work with JavaScript. Great, there you get array.sort() which can help for this: [3, 1, 2].sort(). But what would happen if you'd rather like to sort more "complex" structures like ... some DOM nodes. Here we have three LI nodes and we want to sort them in some order. Obviously you can't compare them with the "<" operator, so we've to come up with some custom solution.

Click here to sort the list

node 3
node 1
node 2

Here sort() can’t help us and we’ve to code our own function. However we have only few elements (three in our case). Why not using bubble sort?

3. The list is almost sorted

One of the problems with bubble sort is that it consists of too much swapping, but what if we know that the list is almost sorted?

// almost sorted
[1, 2, 4, 3, 5]

We have to swap only 3 with 4.

Note that in the best case bubble sort’s complexity is O(n) – faster than quicksort’s best case!

If you have read some preformance tests on JavaScript loops, you may have heard that “while” is faster than “for”. However the question is how faster is “while”? Here are some results, but first let’s take a look on the JavaScript code.

The for experiment

console.time('for');
for (var i = 0; i < 10000000; i++) {
	i / 2;
}
console.timeEnd('for');

The while experiment

console.time('while');
var i = 0;
while (i++ < 10000000) {
	i / 2;
}
console.timeEnd('while');

Note - these tests are performed and measured with Firebug on Firefox.

Results

It's a fact, that you'll get different results as many times as you run this snippet. It depends also on the enviroment and software/hardware specs. That is why I performed them 10 times and then I took the average value. Here are the values of my performance tests. Note that both for and while perform 10,000,000 iterations.

And the Winner Is

While is the winner with an average result of 83.5 milliseconds, while "for" result is 88 average milliseconds.

As the diagram bellow shows, the while loop is slightly faster. However we should be aware that these performance gains are significant for large number of iterations!

As you know sometimes JavaScript can be weird. Let’s see the following example and let’s try to answer the question: does “undefined” equals “undefined”. What do I mean?

First take a look at the following code.

var a;
var b = undefined;

// alerts "false"
alert(b == a);

Both a and b are undefined, but they are NOT equal. Now let’s see where it can become a problem.

We have an object with one member variable that is not defined.

var f1 = function()
{
	this.myvar;
};

var obj1 = new f1();

Now you’d like to know whether the object “b” has the property “myvar”. There are lots of examples online, but what’s the right way?

Wrong

Appearantly the value of b.myvar should be undefined.

alert(obj1.myvar); // undefined

But that doesn’t mean that it is the same value if the object was declared this way:

var f2 = function()
{
	this.myvar = undefined;
};

var obj2 = new f2();

This is a completely different thing. Why? In the first case if we try to check whether the property myvar belongs to obj1 we can go wrong with:

if (obj1.myvar) // false

This is false simply because obj1.myvar is undefined

if (obj2.myvar) // false

Again is false, because obj2.myvar is undefined.

The same thing happen when using the other “famous” approach.

if (typeof obj1['myvar'] != 'undefined') // false
if (typeof obj2['myvar'] != 'undefined') // false

Clearly this is not the right answer, becase even it is undefined myvar belongs to obj2!

Right

Now let’s try with hasOwnProperty supported by almost every modern browser.

if (obj1.hasOwnProperty('myvar')); // false
if (obj2.hasOwnProperty('myvar')); // true

Here you can see that when the member variable is explicitly defined as “undefined” the object “has the property” and hasOwnProperty returns true. Yet again, “undefined” does not always equal to “undefined”.

var a = 5;

function f() { return a; } // returns 5

Thus f will return the value of “a” which equals to 5. You can also change the value of the global variable in the function body.

var a = 5;
function f() { a = 10; return a; }
console.log(a); // equals to 10

Now after we call the function f the value of “a” will equal to 10. This is because we reference the global variable “a” into the function body without using the keyword “var”. This means that if you put the “var” keyword the variable “a” inside the function body is no longer the same variable as the variable defined outside the body. It becames “local” and it’s visible only inside the function.

Objects & JavaScript

Actually in JavaScript functions can be also objects. Any variable defined with the “var” keyword becomes private, because it’s only visible inside the function body, while by using the “this” keyword we can define global variables visible outside the function body. Let’s see na example.

var f = function() 
{
	var a = 10;
	this.b = 5;
}

var myfunc = new f();
myfunc.a; // is undefined because a is private
myfunc.b; // equals to 5 because b is public

Public and Private Methods in JavaScript

As you may know in JS you can define functions inside other functions. Actually this is how you can define classes in JavaScript.

var myClass = function() 
{
	var f = function() {
		return 10;
	}
}

But this in fact defines a local (private) function into myClass and we cannot access it from the outside world. Here’s a fully functional class with one public and one private method.

var myClass = function()
{
	// public method
	this.a = function() {
		return 10;
	}
	
	// private method
	var b = function() {
		return 5;
	}
}

var c = new myClass();
c.a(); // will return 10
c.b(); // is undefined, because is private

Accessing Private Methods from Public Methods

Easily we can access private methods from public ones.

var myClass = function()
{
	// public method
	this.a = function() {
		return b();
	}
	
	// private method
	var b = function() {
		return 5;
	}
}

However accessing public mtehods in private ones is more difficult. That’s because we cannot use “this” into the private methods, just because “this” refers to the private method
itself and not to the global method, which is “myClass” in our case.

var myClass = function()
{
	// public method
	this.a = function() {
		return 10;
	}
	
	// private method
	var b = function() {
		return this.a(); // this will result in an error
	}
}

Accessing Public Methods from Private Methods

To access public methods in private methods you need to define a variable that points to the global “this” object.

var myClass = function()
{
	var self = this; 
	
	// public method
	this.a = function() {
		return 10;
	}
	
	// private method
	var b = function() {
		return self.a(); // this will return 10
	}
}

This variable gives you the bridge between private methods and global “this” pointer.

You should know that in JavaScript you cannot simply write a multilined code chunk, i.e. something like this:

var str = 'hello
world';

This will result in an error, which can be a problem when you deal with large strings. Imagine a string containing some HTML that should be injected via innerHTML. Now one possible solution is to concatenate two or more strings, by splitting the initial string.

var str = 'hello'
        + 'world';

Howerver this solution result in some additional operations like concatenation. It can be very nice if there was something like the PHP multiline string format.

The PHP Example

In PHP you have the same use case with strings. You can have a string concatenated over multiple lines, but you cannot split lines like so:

// the following line is wrong
$str = 'hello
world'; 

// a possible solution to the line above is
$str = 'hello'
     . 'world';
// which is very similar to the js solution in the second example

// ... but in PHP there is the so called HEREDOC
$str = <<
The heredoc gives us the power to write multiline strings. 
The JavaScript Trick
Actually in JavaScript there is something that's exactly what Heredoc is meant to be for PHP. Take a look at the last example:
var text = <>
this 

is
my
multi-line
text
.toString();

document.body.innerHTML = text;

Thus you can write multiline strings in the JavaScript code.

Related posts:

Powerful PHP: Less Known String Manipulation 
JavaScript Flexibility – Regex match() 
Flexible JavaScript – Splitting Strings 
Flexible JavaScript – Replace in a String 


]]>
			/2011/07/12/a-javascript-trick-you-should-know/feed/
		4