What I learned on this mini-project.
These can be used to control the flow of a method or other piece of functionality.
They are mainly used to hold a value until some condition changes, after which you can modify the variable. One of the most common use cases for this is holding a boolean which is dependent on some other piece of code.
https://gist.github.com/f0b8289eee82cf95d3de06adb7d8c963
In this example, the isDown variable is used to track the state of the mouse. When the mousedown event is triggered the isDown variable is changed, which is used to add further functionality.
In this project, the mousedown event is used to initiate the click and drag functionality. For this to work effectively, an anchor point was used, representing the initial click point, the pageX property of the event captures this value.
https://gist.github.com/b27a471c79b49b33d48da9cdb396c266
If a margin or padding is added, then the pageX value will be off, to compensate for this adjustment, you can subtract the pixels changed (from the parent element's offset) to the window.
The code to do this, is shown below