In this post, I am going to cover how you could store information inside a single byte within TypeScript/JavaScript and give you an example of a real-world use case.

So, what exactly do I mean by encoding information into a byte? Well, think of it this way. A byte can be seen as a set of 8 switches with the possibility of 256 different combinations. That is a lot of information that can be conveyed in a tiny amount of data. In any application, a decoder could be created to read a byte of data and based on what bits are set or not perform certain predefined actions.

Now how do we go about writing such an encoder and decoder in TypeScript? Well, JavaScript comes built-in with several bitwise operators that we will need. Note also for this example I am only caring about the first 8 bits. The documentation specifies that all JavaScript numbers are stored as 64-bit numbers and converted into 32-bit numbers for bitwise operations. So, there is a lot more potential there if you want to take it.

## Encoding

First, we will write the encoder. In order to start encoding a byte we need to start with a 0 and then we set each of its bits individually. In the function below you can see how it is done:

So, in the function, you can see that if we can set a bit first we create a number that will only have one bit set at the desired byte index. Then we take the starting number and do a bitwise OR. This will set any bit to 1 if it is zero at the desired index. For un-setting, the bit the first action is the same but then we invert the bits so at the desired byte index it is unset and all other bits are now set. Then we perform a bitwise AND. This will convert all 0/1 combinations to just 0 and preserve all 1/1 combinations. Thus un-setting the desired index and preserving the rest of the encoding.

## Decoding

Now that we have information encoded into a byte now we can write the decoder.

This function is pretty simple. We just take the encoded number then zero-fill bit shift it right by the index number. So, whatever the index we are trying to check will become the first bit and the rest of the byte will be filled with unset bits. Then we just perform a bitwise AND which will of course result in a value of 1 if it is set and 0 if it is not.

## Example Use Case

I have talked about before a voxel engine that I am developing using TypeScript and Babylon.Js. While creating the engine I needed a very compact way to store which faces of a cube are visible. A cube only has six faces but that would mean for each cube I would have to have an extra six numbers just to represent what was visible. But with storing information into a single byte I can store what is visible inside a single number and use the functions I showed above to extract that information out. This is important because for any given area of the game world there could be 25k+ cubes or more.

Here is some example code:

Please note the above code is just an example. The actual voxel code is much more complicated and fail-proof. This is just meant as a demonstration.

## Conclusion

Encoding information into a byte can be a clever way to minimize the memory footprint of your program. It may be useful if you need to convey a lot of information in a very compact way. My example can also be expanded further to include up to 32 bits as indicated by the JavaScript documentation. I specifically chose to talk about storing in 1 byte because for my voxel engine I send the data to a web worker as an Unsigned 8 Bit Array Buffer.