Background
100 | 101 |Looking at your computer screen, what do you see? Text, colours, images, videos and much more. Everything you see, everything you store on your computer, every button you press is a stream of ones and zeros. Why? How does it work?
102 | 103 |Computers parts are able to store data via tiny electronic components called flip-flops. They can be set to either of two states: “one” or “zero.” These components can store a single value we call a bit.
104 | 105 |To store other values than ones and zeroes, a series of bits can be grouped. If one bit can have two different states, a group of two bits can have four. A group of four bits can have up to sixteen unique states. The amount of different states grows exponentially for every bit that is added to a group. s = n2, where s is the number of states, and n the number of bits within the group.
106 | 107 |The de-facto standard is to call a group of bits a byte, and one byte contains 8 bits. The more explicit term for an 8-bit group is octet.
108 | 109 |Binary is the purest representation of data on computers, but it isn’t easy to understand what the data represents. How do we get from binary to other values?
110 | 111 |Representation
112 | 113 |Many typed programming languages have datatypes like integers, floats, strings, etc. These datatypes tell the computer how to interpret binary data. Instead of modifying bits and bytes to add two integers, we can use arithmetic operators, like a plus (+), and the computer will know what to do at binary level. Dynamically typed languages do the same, but also removes the need to tell which variable has which type.
114 | 115 |A common datatype is an unsigned integer (uint). When an integer is signed, the first bit will be used to store whether the integer is a positive or negative integer. When it’s unsigned, the data type can only store positive integers. So a uint is an integer that must be equal or greater than 0.
Let’s have look at the binary representation of such an integer, in 8 bits. A uint is a positive integer starting from 0. Incrementing is very similar to our decimal system:
-
120 |
- Increment the least significant number 121 |
- If least significant number exceeds maximum value, reset and increment the number one place left 122 |
// No bits set => zero
125 | 00000000 = 0
126 | // Increment least significant bit
127 | 00000001 = 1
128 | // Least significant bit exceeds max, so we reset it and increment bit left of it
129 | 00000010 = 2
130 | 00000011 = 3
131 | 00101010 = 42
132 | 11111111 = 255Understanding uint is quite valuable, as many programming languages use the datatype as default representation for binary data.
// JavaScript
137 | const answer = 0b00101010;
138 | console.log(answer); // 42Why use binary?
143 | 144 |At this point you might wonder why you’re reading this page. Why should you understand bits and bytes? How can you benefit from this knowledge when programming in higher level languages?
145 | 146 |Imagine we’re building a web application that needs data from a webserver. The conventional communication format is JavaScript Object Notation (JSON). Let’s say we’re sending an array of 8 random integers ranging from 0 to 255:
147 | 148 |[
149 | 10,
150 | 240,
151 | 106,
152 | 236,
153 | 244,
154 | 226,
155 | 139,
156 | 30
157 | ]Because the data is sent as a string with a specific format, we’ll need 8 bits per character, assuming it’s UTF-8 encoded. Ignoring whitespace, above JSON string is 31 characters, making it 248 bits.
160 | 161 |We can send the exact same data in binary, but way more efficient. Instead of returning a formatted string, because that’s what JSON is, we can send the data as one binary blob. For numbers ranging from 0 to 255, we still need 8 bits to represent each. Because each number has a fixed bit length, we can just concatinate them. The complete blob will be 64 bits long, saving just under 75% of data!
162 | 163 |00001010 // 10
164 | 11110000 // 240
165 | 01101010 // 106
166 | 11101100 // 236
167 | 11110100 // 244
168 | 11100010 // 226
169 | 10001011 // 139
170 | 00011110 // 30The strength of JSON isn’t size, but flexibility. Because it’s a formatted string, it’s length and contents is irrelevant. The strength of binary is it’s size. It all depends on your use-case, but a 75% reduction of bandwidth is worth considering.
173 |Operators
177 | 178 |Bitwise operators are operators that allow you to modify data on bit-level. Welcome to Boolean algebra.
179 | 180 |In the following examples, we will define binary data using “binary literals.” This means they are prefixed with 0b, which is common in many programming languages. For more information, see notes.
NOT
183 |Flipping, or negating bits can be done using the NOT (~) operator. The operator toggles all the bits.
184 |~0b01 = 10
185 | ~0b11 = 00AND
188 |The AND (&) operator returns 1 for each bit only if the corresponding bits of
189 | both operands are 1’s.
0b01 & 0b11 = 01
191 | 0b01 & 0b00 = 00OR
194 |The OR (|) operator returns 1’s if a bit of either of the operands is
195 | 1.
0b10 | 0b01 = 11
197 | 0b00 | 0b00 = 00
198 | 0b11 | 0b10 = 11XOR
201 |Similar to the OR operator, the XOR (^), exclusive OR, operator only returns 1’s if
202 | either of the corresponding bits of the operands is 1, but 0 if both are.
0b10 ^ 0b01 = 11
204 | 0b00 ^ 0b00 = 00
205 | 0b11 ^ 0b10 = 01It could be considered a shorthand of the following:
208 |a = 0b11
209 | b = 0b10
210 | (a | b) & ~(a & b) = 01Shift
213 |Bit shifting is the act of shifting a set of bits to the left or the right.
214 | 215 |To shift bits to the left, use <<. Additional bits, 0s, will be added on the right-hand side.
0b1001 << 2 = 100100To shift bits the other way, use >>. This will discard the right-hand bits.
Note that this operation retains the first bit for signed integers. This means that negative integers stay negative.
220 | 221 |0b1001 >> 2 = 1001When shifting bits to the right, notice the amount of bits decreases? A zero-fill right shift (>>>)
224 | also adds bits on the left-hand side, so the amount of bits is unchanged.
Unlike a regular right shift, the zero-fill right shift also moves the sign bit in a signed integer, which is often undesired.
226 | 227 |0b1001 >>> 2 = 001001Practical
232 | 233 |Read a bit at a specific position
234 |First, a set of bits must be shifted to the right until the bit of interest is all the way on the right. To discard all other bits, 235 | we can use the AND operator with a so called bitmask.
236 |bitmask = 0b1
237 |
238 | // the highlighted bits are moved all the way to the right, then all other bits are cancelled out with the bitmask
239 | (0b1101 >> 2) & bitmask = 1
240 | (0b1101 >> 1) & bitmask = 0The bitmask determines how much of the info is returned, so to get two bits, a two-bit bitmask is required.
243 | 244 |bitmask = 0b11
245 | (0b1101) >> 2) & bitmask = 11Set a bit
248 |To set a specific bit to 1, you can use the OR operator. First, the bit you wish to set is shifted to the position you wish to set it to, the OR operator does the rest.
byte = 0b0000
250 | byte | (0b1 << 2) = 0100To set a specific bit to 0, you must use the AND operator.
byte = 0b1111
254 | byte & (0b0 << 2) = 1011If the new bit has a dynamic value, the following allows you to change a bit to any 257 | value at a given position.
258 | 259 |x = 1 // new value of bit...
260 | n = 2 // at this location
261 | byte = 0b0010
262 |
263 | byte ^ (-x ^ byte) & (1 << n) = 0110Toggle a bit at a specific position
266 |The XOR operator returns 1 if operands are unequal. By having one operand set to
267 | 1, it toggles.
n = 2 // at this location
270 | byte = 0b0100
271 | byte ^ (0b1 << n) = 0000Store flags
274 |Flags, a fancy name for “options,” can easily be stored in a byte. This example is inspired by the TCP protocol.
275 | 276 |FLAG_FIN = 0b000001
277 | FLAG_SYN = 0b000010
278 | FLAG_RESET = 0b000100
279 | FLAG_PUSH = 0b001000
280 | FLAG_ACK = 0b010000
281 | FLAG_URGENT = 0b100000
282 |
283 | // Set header to SYN, ACK and URGENT (110010)
284 | header = FLAG_SYN | FLAG_ACK | FLAG_URGENT
285 |
286 | // Turn off URGENT flag
287 | header = header & ~FLAG_URGENTHex to RGB
290 |Colours are often stored as hexadecimals. Sometimes, you will want to get the value of each channel. Note that hexadecimals are just another representation of uints.
// mask = 11111111
293 | mask = 0xFF
294 |
295 | // rgb = 11100110 01000010 00011001
296 | rgb = 0xE64219
297 |
298 | // to get the red component,
299 | // shift 16 bits to the right
300 | // and get the first 8 bits
301 | // 11100110 01000010 00011001
302 | (rgb >> 16) & mask = 0xE6 // = 11100110
303 |
304 | // to get green,
305 | // shift 8 bits to the right,
306 | // and only get the first 8 bits
307 | // 11100110 01000010 00011001
308 | (rgb >> 8) & mask = 0x42 // = 01000010
309 |
310 | // blue is the first 8 bits
311 | // 11100110 01000010 00011001
312 | rgb & mask = 0x19RGB to hex
315 |You can do the opposite as well; convert RGB to hexadecimals.
316 | 317 |r = 0xE6 // 11100110
318 | g = 0x42 // 11100110
319 | b = 0x19 // 00011001
320 |
321 | // 11100110 01000010 00011001
322 | (r << 16) | (g << 8) | b = 0xE64219Notes
327 | 328 |The above code is pseudo-code, and may not work in all languages. Other than the basics—like data-types and equations—there 329 | are few things to consider in particular to make this work in your language.
330 | 331 |Declare binary literals
332 |Although many languages seem to support binary literals by prefixing them with 0b, some do not.
JavaScript = parseInt('0010', 2) // pre-ES6
335 | PHP = bindec('0010') // pre-5.4
336 | Scala = Integer.parseInt("0010", 2)For more information, please refer to the documentation of your preferred language.
339 | 340 |Converting Binary to a String
341 |Displaying binary data as a string can help debug binary values.
342 | 343 |JavaScript = (0b1011).toString(2)
344 | PHP = decbin(0b1011)
345 | Ruby = "%b" % 0b1011For more information, please refer to the documentation of your preferred language.
348 | 349 |Bitwise operators
350 |Some programming languages use different bitwise operators than used in this document. Please advice the documentation 351 | of your language in question.
352 |Contribute
356 | 357 |To ensure quality, this cheatsheet is open to contributions. If you run in to errors, have suggestions or feel you can help a hand in any way, be sure to leave an issue or pull request in the GitHub repository. Thanks!
358 |