JavaScript Binary Operations – the easy way

Posted on by

Intro:

“There are 10 types of people in this world. Those who understand binary and those who don’t” – Author Unknown

Javascript is loaded with hidden features that can that be used for more than DOM manipulation and event handling. Javascript supports binary operations pretty well, and now I’m going to show you how to master them.
By the end of this tutorial you will learn the following.

  • Base Conversions
  • Bitwise operations
  • Logic Gates

For better comprehension, I recommend that you use a Javascript Console, which is available in Firebug ( a Firefox addon) or in Google Chrome Dev Tools. If you wish, you can even use online editors, like jsbin.com and jsfiddle.net, to follow along.
Note: Negative numbers will not be dealt with in this tutorial, since Javascript doesn’t support signed bits.

Definitions:

For those that are new to the binary concept, watch the following short videos to catch up then continue.

Decimal, Binary, Octal, and Hexadecimal

Hexadecimal – learn it in less than a minute

Boolean Algebra: AND/OR/NOT

Javascipt Code:

Base Conversion: For positive numbers
The toString() and parseInt() functions will be your friends in this section.
(number).toString( [baseTo] ) will change a number to a string type. If a base is provided in the toString argument, then the number gets converted to a new base from 2 – 36.
Example:

1
2
3
4

// number.toString( [ baseTo ] ); returns number in desired base.
(3).toString( 2 ); 		// returns "11"
(54).toString( 2 );		// returns "110110"
(120).toString( 16 );		// returns "78"

Additionally, hexadecimal numbers( base 16) can be represented with a prefix of “0x”.
While a prefix of “0” denotes an Octal number( base 8).
Example:

1
2
3

var hex = 0xFF		// hex is 255 in decimal
hex = 0x01 		// now hex is 1 in decimal
var oct = 013		// oct = 11

Alternatively, parseInt( { number | string }, [baseFrom] ) will parse a number or a string that contains a number, and convert the bases, with the default base set to 10. Please be aware that you the base must be between 2 – 36.
Example:

1
2
3
4
5
6
7
8
9

// parseInt( { number | string }, [ baseFrom ] ); returns decimal number.
num = "110110";
parseInt( num );		// displays 110110 because default base 10.
parseInt( num, 2 );		// displays 54
parseInt( "dad", 16 );		// displays 3501, "dad" is valid hex;
 
var hex = "badDad";	
parseInt( hex, 16 );		// returns 12246445
+("0x"+ hex );			// returns 12246445 (Alternative way to parse hex.)

Ok, so your next question might be how to convert from one base to another, like from Binary to Hexadecimal. To achieve your goal, convert base A to decimal then to base B.
For those seeking a function to encode and decode bases higher than 36, check out this script at Snipplr.com

Example:

1
2
3
4
5
6

// Convert from baseA( Binary ) to baseB( Hexadecimal). 
// Note: Both baseA and baseB must be between 2 and 36.
var baseA = 2, baseB = 16;
var binary = 1010111, hex, dec;
dec = parseInt( binary, baseA );		// dec = 87
hex = dec.toString( baseB );		// hex = 57

Thankfully, you can simplify all the base conversion to one simple function, which I call convertNumToBase.

1
2
3
4
5
6
7
8
9
10
11

// Convert from baseA to baseB
// Note: Both baseA and baseB must be between 2 and 36.
var convertNumToBase = function( num, baseA, baseB ){
	if( !( baseA < 2 || baseB < 2 || isNaN( baseA ) 
		|| isNaN(baseB) || baseA > 36 || baseB > 36) ){
        return parseInt( num, baseA ).toString( baseB );
    }
};	
convertNumToBase( 1111, 2, 10 );		// return "15"
convertNumToBase( 10101111, 2, 16 );		// return "af"
convertNumToBase( "FF", 16, 2 ); 		// return "11111111"

Sometimes, it might be useful to have a binary string with a fixed number of bits.
We can implement this with an extension to the previous example.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

var getStrCopy = function (str, copies) {
	var newStr = str;
	copies = (copies > 0) ? copies : 1;
	while (--copies) {
		newStr += str;
	}
	return newStr;
},
convertDecToBase = function ( dec, base, length, padding ) {
	padding = padding || '0' ;
	var num = dec.toString( base );
	length = length || num.length;
	if (num.length !== length) {
		if (num.length < length) {
			num = getStrCopy( padding, (length - num.length)) + num;
		}
		else {
			throw new Error("convertDecToBase(): num(" + num + ").length > length(" + length + ") too long.");
		}
	}
	return num;
};
 
// Usage
convertDecToBase( 23, 2, 8 );            //returns "00010111"
convertDecToBase( 23, 2, 8, 'x' );       //returns "xxx10111"

Two’s Complement
Javascript designates the character tilde, ~, for the two’s complement, even though in most programming languages tilde represents a bit toggle for the one’s complement.

1
2
3

var num = 70;
~num;			// returns -71
~num.toString(2);	// returns -1000111

I’ve already covered this feature in a previous article titled, “Javascript NOT is not what you expect”.

Proper Binary Format
To make binary easier to read, modify the every four digits by either placing a space after them or converting them to hex.

1
2
3

binaryStr = "1110001100110001";
binaryStr.replace( /\d{4}/g, '$& ' ).replace( /\s$/,'') // return "1110 0011 0011 0001"
parseInt( binaryStr, 2).toString( 16 );                   // returns "e331"

Bitwise operations
Bitwise operations are covered in great details at Wikipedia: Bitwise Operations.
But if you don’t want to read that then watch this video.
Note: Remember Javascript’s tilde, ~, returns the two’s complement.

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

clear();
var a = parseInt( "1010", 2 );	// a = 10
var b = parseInt( "1100", 2 );	// b = 12
 
(a & b).toString(2);		// a AND b returns dec = 8, binary = 1000
(a | b).toString(2);	        // a OR b returns dec = 14, binary = 1110
(a ^ b);    		        // a XOR b returns dec = 6, binary = 0110
 
//Invalid binary number because of the negative sign.
~b.toString(2);     		// a NOT returns dec = -13, binary = "-1101"
(~( a & b )).toString(2); 	// a NAND b returns dec = -7, binary = "-1001"
(~( a | b )).toString(2);	// a NOR b returns dec = -15, binary = "-1111"
~( a ^ b );                	// a NXOR b returns dec = -7, binary = "-1001"
 
var num = 13; 		        // 13 is "1101" in binary;
var position = 3;
 
// access bit position
(num >> position).toString(2)		// returns 1
(num >> position) & 0x01;		// returns 1
num.toString(2).charAt( position );	// Alternative method, returns '1'
 
// set a bit
( 1 << position ).toString(2);		// returns "1000"
num &= ( 1 << position );		// returns  8, binary "1000"
 
// clear a bit
( 0 << position ).toString(2);		// returns "1000"
num &= ( 0 << position );		// returns 0
 
// Toggle a bit
num ^= ( 1 << position );		// returns 8, binary = "1000"
 
// Test a bit
(num >> position) & 1;			//returns 1
 
// left shift with 0's
num >>> position;			// returns 1
 
// right shift with 0's
num << position;			// returns 64, binary = "1000000"

Conclusion:

Javascript is a powerful language that many hidden features that waiting to be discovered.
Even though bitwise operations are rarely used in projects, it’s still useful to know.
This concludes the tutorial.

Test your knowledge. Take the quiz below!
Binary Quiz ( made with jQuizMe)

References:

Bitwise Operators
More Geeky quotes
Javascript’s Global Objects
Wikipedia Bitwise operations


(Page view Count: 1,849)