“var” what is it good for? (Absolutely everything) A javascript story.

What ye think about my title?

I’ve often thought to myself, what if things were different? What if I had the knowledge I have right now when I was younger? A math problem that I had dreaded in the past would’ve seemed to be simple. How did this happen? Well, your brain sort of builds problem-solving and aptitude when you’re exposed to the fundamentals of what the broken down parts of the math problem meant, and what you’re essentially doing is solving those more minor problems and putting them all together.

“You can never understand everything. But, you should push yourself to understand the system” — Ryan Dahl(Creator of NodeJS)

This is one of the most powerful quotes by a developer, it is also a method to learn. It is a method by which the math problem could have been solved at the first glance. It's like learning to drive a car, to move from A to B you can do so with ease. But, what makes you a great driver is when you can predict if you can make it from A to B with the fuel you have. The common misconception would be that experience will give you insights. Well, that may be right but only by exposing your brain to collect enough data about fuel consumption will you be able to predict the viability of your travel. That shines a light on a bigger question, “Why didn’t I just learn about how long I can go with the fuel I have when I was learning to drive?”. Because you set your mind to learn to drive first and then set your mind again to learn how to calculate fuel efficiency. Extrapolating this very principle in software development, the difference between a developer and a good developer becomes more evident.

In this series, I’m about to explain concepts in Javascript that can help you understand the system.

I'm about to talk about the very basics of Javascript and why understanding them alone can make you a good developer.

Variables

I like to think of them as one of those big case files

Let us try to understand the purpose behind the case file and see how they relate. Each of these files has a name that sort of identifies it, and the information inside relates to that name, plain and simple. An obvious reason to do this is to collate information or data and store them to organize it by a single identifier(i.e. the name). That's pretty much what a variable is, just an identifier that holds information for you to use later on. Just like how there are cabinets that you might keep these files in, you can sort of think of a computer’s memory in the same way, you’re pretty much gonna place them in these cabinets and access them by their name when you want them.

How to use them

Variables are declared in JS using →

var animal = “Dog”;
console.log(animal); //Dog

You can also declare variables with let and const. Using var is a bad practice, as it is global scoped or function scoped. let and const are block scoped. We will get into this in the upcoming article.

Under the hood

Knowing what we know about variables, another question may arise. Where are they stored? This is a little tricky, JS variables are stored in the browser memory, which is in turn stored in the RAM. What you’re essentially doing when you write “ var animal=’Dog’ ” is creating a slot in your browser, like how the case files take up a slot inside the cabinets. More case files mean heavier cabinets, similarly, more variables mean heavier memory. So it is important to only use variables when it is necessary to optimize performance.

Types of data

Unlike other languages, JS is dynamically typed. It means that variables in JS can hold any type of data, and the type of the variables are inferred at run-time(When the code is executed). It is important to understand the two types of data JS accepts →
1. Primitive values: strings, numbers, booleans, undefined, and null.
2. Reference values: objects and functions.

Primitive values are datatypes that are allocated memory right before execution, this type of memory allocation where the compiler knows how much memory should be allocated is known as static memory allocation.

Reference values on the other hand are datatypes that are not allocated a fixed amount of memory, because the compiler does not know just how much memory these variables take. This is known as dynamic memory allocation.

Hey, what tf is a compiler?
It is nothing more than a software component that translates one language(in this case, say JS) to another language(the machine language). More on this in my next article.

Memory allocation

Browser memory consists of the browser stack and the heap memory.

From the figure above, 2 obvious conclusions we can make from the data types explained before →
1. Browser stack is where static allocation happens, i.e. the stack holds primitive variables as a whole because their memory is known.
2. Browser stack holds the reference to the non-primitive variables and maps to the dynamically allocated memory assigned to the value of the reference in the Heap memory.

A stack is a data structure that is used to store data in a Last In First Out(LIFO) manner, i.e. what is placed on top of the stack is removed first. A browser uses this to store variables.

Heap memory is another data structure, which stores dynamically allocated data in the browser.(Since memory allocation is not known at compilation)

It is also important to note that, once these variables are used, the variables are destroyed at the end of the execution scope. This is Garbage Collection.

Conclusion

I am aware that there is a lot of information here. But, in my opinion, understanding the fundamentals of JS the right way can instantly place you on par with your peers. If you’re just stepping into the world of programming, welcome to a lot more information that can get you to where you want to be. Others, stick around and maybe learn something you haven't, or better yet teach me something you have. Curiosity is the only element that separates mediocre developers and great developers, and when the key is that easy why not make the change? Start by asking the right questions. Sit tight and code, until next time devs.