Skip to content

Binary Numbers#

Know more about binary numbers and how computers actually works by playing around with numbers and hexadecimal values.

This post will help you realize and understand more about what is Base 2, Base 10, Base 16 and how to manually compute and convert each value between binary, and decimal.

About Binary Numbers#

Disclaimer

This blog post is NOT associated with the YouTube video provided below, or vice-versa but just used as a reference or a source.

https://www.youtube.com/embed/g8ACeN9QMdY?si=pkcSgq9FLSl2X4iD

Base 10 (Decimal)#

This is also exactly how humans commonly read numbers but just do not notice it.

In Base 10, we have the total of (10) characters: 0 1 2 3 4 5 6 7 8 9

For instance, we have a number 6335, and we read it as 6,335 or Six-thousand three-hundred and thirty five. Here we have our numbering system called units, tens, hundreds, thousands and so-on and so forth.

Note

The key thing here is we can only put the max value from Base 10 which is 9. (see row 2)

thousands hundreds tens units
6000 300 30 5
6 3 3 5

As represented in the table:

  • Each column is a power of 10,
  • Then we have Base 10 as our base.
  • Max value is 9
103 102 101 100
6 3 3 5

6 x 103 + 3 x 102 + 3 x 101 + 5 x 100 = 6335

Base 2 (Binary)#

In Base 2, we only have 2 characters, which is 0 and 1 and one (1) being the max value.

23 22 21 20
1 1 1 1

As represented in the table:

  • Each column is a power of 10,
  • Then we have Base 2 as our base.
  • Max value is 1

1 x 23 + 1 x 22 + 1 x 21 + 1 x 20 = 15

8 + 4 + 2 + 1 = 15

(Bitwise) 1111 = 15

0b1111 = 15

Prefix

The 0b prefix denotes that the number is bitwise or binary value.
Meanwhile, 0x denotes that the number is a hexadecimal value.

More Example

23 22 21 20
0 1 0 1

0 x 23 + 1 x 22 + 0 x 21 + 1 x 20 = 5

0 + 4 + 0 + 1 = 5

(Bitwise) 101 or 0101 = 5

0b101 or 0b0101 = 5

// JavaScript
console.log(0b1111); // 15
console.log(0b0101); //  5

Manual Decimal to Binary#

To manually convert decimal back to binary follow these steps:

  1. Divide (÷) decimal by 2. note the remainder.
  2. Divide (÷) the quotient by 2, note the remainder.
  3. Repeat steps until the quotient is 0.
  4. Write the remainders where last is written first.
  5. This can also be understood where in another way which states that the Least significant bit is at the top and the Most significant bit is at the bottom.

Given: 11110

(Example 1)
Step 1: Divide given number repeatedly by 2 until you get 0 quotient
  111 ÷ 2 = 55 (remainder: 1) Least significant bit
   55 ÷ 2 = 27 (remainder: 1)
   27 ÷ 2 = 13 (remainder: 1)
   13 ÷ 2 =  6 (remainder: 1)
    6 ÷ 2 =  3 (remainder: 0)
    3 ÷ 2 =  1 (remainder: 1)
    1 ÷ 2 =  0 (remainder: 1) Most significant bit

Step 2: Write the remainders in reverse -> 1 1 0 1 1 1 1

(Example 2)
Given: 5
    5 ÷ 2 = 2 (remainder: 1)
    2 ÷ 2 = 1 (remainder: 0)
    1 ÷ 2 = 0 (remainder: 1)

    -> 1 0 1

// JavaScript
console.log(0b1101111); // 111
console.log(0b101); // 5

Base 16 (Hexadecimal)#

In Base 10, we have the total of (16) characters: 0 1 2 3 4 5 6 7 8 9 a b c d e f with f as the max value.

In CSS, we can use hexadecimal format as value for a color. For example #ff5555.

red green blue
ff 55 55

For hexadecimal table:

  • Each column represents a power of 10
  • Then we have Base 16 as our base.
  • Max value is 15 which is equivalent to F
161 160
f f
15 15

15 x 161 + 15 x 160 = 255

5 x 161 + 5 x 160 = 85

// JavaScript
console.log(0xff); // 255
console.log(0x55); //  85

// CSS
// #ff5555 is equal to rgb(255, 85, 85);

Data Sizes#

Each binary number can have either of the 2 values 0 or 1 which is called a bit in a computer.

Size Value
bit 0 or 1
byte 8 bits
kilobyte 1000 bytes
megabyte 1000 kilobytes

In the table, we can represent like so:

27 26 25 24 23 22 21 20
1 1 1 1 1 1 1 1

128 + 64 + 32 + 16 + 8 + 4 + 2 + 1 = 255

console.log(0b11111111); // 255

Conclusion#

Now that you know how to manually convert binary to decimal or hexadecimal to decimal, then you should now have a better understanding on how computers read characters under the hood.

And acquiring this knowledge helps you unlock the capacity on learining how to use the bitwise operators (see this blog post).

Comments