DEV Community

Cover image for JavaScript Basics| Introduction to variables and their usage.
Anna Mikayelyan
Anna Mikayelyan

Posted on

JavaScript Basics| Introduction to variables and their usage.

Introduction
Largely every programming language has variables. Variables are storage, specifically, they’re storage for data. All code is data underneath. We can store numbers, symbols, sentences, pictures, and all sorts of things inside variables. There’s a huge number of things that we can store. Each variable is identified by a unique name that we give it. You need to know about one very important thing when using variables. A variable name must have a clear meaning when it describes stored data. Variable naming is one of the important and difficult skills in programming. It’s much easier to find information when the variables have good names, that’s why you should think about the right name for a variable. The computer remembers the variable by this name exactly as we wrote it. Once we’ve made a variable, the label we give it is attached to the data stored inside of it. Then whenever we write out an identifier for the variable, the computer will understand that we are referring to the data stored inside of it. (Devmountain, 2016)

Types of variables in JavaScript

There are three ways you can declare variables in JavaScript let, const, var

Image description
Let’s start with “var”. It originates from very old times. It’s generally not used in modern scripts but still hides in the old ones.

Image description

But times have changed and in contemporary language, the most used variables are “let” and “const”. The let keyword in Javascript was introduced in 2015 with ES6. Just like var in Javascript, “let” keyword is also used for variable declaration. But the only difference is the variable declared with the “let” keyword is block-scoped and local variable*.
And the last variable is “const”. Constants are block-scoped, much like variables declared using the let keyword. The value of a constant can't be changed through reassignment, and it can't be redeclared. However, if a constant is an object or array its properties or items can be updated or removed. The const declaration creates a read-only reference to a value. It does not mean the value it holds is immutable—just that the variable identifier cannot be reassigned. For instance, in the case where the content is an object, this means the object's contents (e.g., its properties) can be altered. Also, a constant cannot share its name with a function or a variable in the same scope.

Image description

Visibility of Variables

A variable is always valid for a certain area. This is the area where it is known and where it can be used. Why would you want to limit the visibility of a variable? For maximum flexibility, wouldn't it be handy if all variables were potentially visible everywhere? As it happens, that arrangement would be too flexible: everywhere in the program, you would have to keep track of the names of all the variables declared anywhere else in the program, so that you didn't accidentally re-use one. Whenever a variable had the wrong value by mistake, you'd have to search the entire program for the bug, because any statement in the entire program could potentially have modified that variable. You would constantly be stepping all over yourself by using a common variable name like i in two parts of your program, and having one snippet of code accidentally overwrite the values being used by another part of the code. The communication would be sort of like an old party line--you'd always be accidentally interrupting other conversations, or having your conversations interrupted.
To avoid this confusion, we generally give variables the narrowest or smallest visibility they need. A variable declared within the braces {} of a function is visible only within that function; variables declared within functions are called local variables. If another function somewhere else declares a local variable with the same name, it's a different variable entirely, and the two don't clash with each other.

Changing the visibility
You can explicitly change the visibility of a variable. This can be useful in situations where you don't want to use particular project or task variables in templates.

To sum up, this is a very important topic to start learning any programming language. Consider this post as the start of your learning process and put effort watching videos and reading more articles. I leave below some links to videos that were useful for me and I am sure will help to understand the details.

  1. https://www.youtube.com/watch?v=L9-3VBOjNH4
  2. https://www.youtube.com/watch?v=TOkU5HxES1o
  3. https://www.youtube.com/watch?v=edlFjlzxkSI
  4. https://www.youtube.com/watch?v=nAWAnn9y8yw

Top comments (0)