DEV Community

Cover image for Variables in JavaScript
Levon Yedigaryan
Levon Yedigaryan

Posted on

Variables in JavaScript

Before touching the point of variables in JavaScript, firstly, we must understand what variables are and why we need them.

Variables

The term variable comes from the Latin verb variable, which means to change. So this describes exactly what variables are; they are something that changes.

Variables in JavaScript

In javascript, as in every programming language, there are variables. While writing the code, sometimes we need to use some values or data throughout it and, from time to time, change them or do operations with them. These values and data are stored in variables which are like containers for the data.

JavaScript can understand many types of data, like numbers, texts (in programming languages are often called strings), boolean values (true or false), objects, and more. In this post, I will talk about numbers, strings, and boolean values, which are the most basic ones.

But before we proceed to the topic of the types of data, we have to understand how to create a variable in JavaScript.

To create a variable, we have to declare it, give it a name, and put inside it the data we want to preserve. In JavaScript, it is written like this.

var/let/const (The name you want to give) = (The value of the variable)

For example

var age = 15
let speed = 24
const length = 120

Declaration of Variables (let/var/const)

One might ask what var/let or char mean and the difference between them. Let, and var are basically the same; only let was introduced after var, so it fixed many problems var had. Nowadays, var is rarely used. When we declare a variable using var or let, JavaScript creates the variable, which, later in the code, it might be changed or mutated. A mutation is a process during which the variable changes its type. For example, it was a number, but after that, it became a string, and here is where the difference between var/let and const becomes obvious. When we declare the variable using const, it can never change its value. If it was, for example, 5, it would be born as 5, live as 5, and then die as 5.

The name of the variables

After declaring the variable using let/var/const, one has to give a name to it so that later, it would be easier to address the exact variable one needs (in one code, there may be hundreds of variables). The naming of the variables must meet the following 5 basic rules.

  1. - Names can contain letters, digits, underscores, and dollar signs.
  2. - Names must begin with a letter.
  3. - Names can also begin with $ and _
  4. - Names are case sensitive (x and X are different variables).
  5. - Reserved words (like JavaScript keywords) cannot be used as names.

Examples of names

let price = 5
var kzdsjkbgssljk = 15 (legal but not recommended)

A Piece of Useful Advice

Try to use such names to hint at what sort of data is inside them.

The Values of Variables

As I previously mentioned, I will discuss 3 basic and most essential data types that variables can hold.

  • Numbers
  • Texts/strings
  • Boolean values

1) Numbers

In JavaScript, we can assign numbers to variables such that

var a = 1
var b = 2.5
var c = 15

In the example above, a and c are integers, and b is a float number. JavaScript allows mathematical operations on variables, so if we have 2 variables which are numbers, we can add them, multiply, subtract, divide, and perform other operations.

var a = 2
var b = 5
var c = a+b

In the example above, c would be 2+5, which is 7.

var a = 5
var b = 15
var c = a*b

c will be 75.
_
Note that JavaScript obeys all mathematical rules, so in the first place, it will do what is inside the parenthesis, then multiplication, division, and power operations, and only after that, addition and subtraction. _

Also note that if we add 2 numbers, one of which is an integer and the other a float number, JavaScript will return the result as a float number.

2) Strings

In JavaScript, we write strings in brackets like "" or '' both are equally true, and it depends solely on the text itself which kind of brackets would be better to use in this case.

var a = "kakadu"
var b = 'Sparrow'
var c = "ALbert Einstein said 'Hello'"

In the case of c, it was better to use "" because the text contained '' brackets, so JavaScript would not confuse them.

In JavaScript, strings can contain everything literally.

var a = "kfjbvnm jdfv 56864569+t28*23rui34g7y89-h237089gt 39=bgvb vfribvdfbui189-g1239- /c xzs\mBVY"

This is also a legit string, although a rather stupid one.

3) Boolean values

In JavaScript, there are values called boolean. If one is familiar with Boolean arithmetics, these values are either true or false and are mainly used for writing a condition (I am not going to discuss them in this post as it is an entirely different topic).

var AreThereCookiesLeft = False
var AreYouDrunk = True

Something More

In JavaScript, after declaring the variables one time, we can not redeclare them again; that will throw an error. All we have to do after declaring them is to use them in the code. Variables, if not const, can be reassigned so strings might become numbers, booleans become strings, etc.
To reassign the value of a variable, we have to write the name of the variable, then put =, and then write the new value.

Note that the new value might also be in the form of mathematical operations or even include other variables.

var a = 5
a = "No 5 anymore"

Now a is "No 5 anymore"

var b = 15
b = b + 1

Now b is 16.

var c = 50
var d = 100
d = c*2 + d - 12

Now d is 188.

Scopes

In JavaScript, scopes are the areas where the given variable is accessible or visible. In JavaScript, there are 3 types of scopes.

  • Block scope
  • Function scope
  • Global scope

1) Block scope

Variables in the blocks (Inside {}) are inside Block Scopes and are accessible only inside that same block.

{
var a = 56
//a is accesible here
}
//a is not accessible here

2) Function scope

Every function creates its function scope. Variables declared inside it will be born inside the function, never leave it and die in that exact function. They are not accessible outside the given function.

function a()
{
var k=0
//k is accesible here
}
//k is not accesible here

Note that if there are 2 variables with the same name, declared using let, one of which is inside the function and the other one outside, the function will prioritize the one inside of him. Also, here is where one of the problems with var comes in. If we declare 2 variables with the same name, one inside the function and the other one outside of it, it will throw an error..

3) Global scope

Variables in the global scope are accessible everywhere inside the code.

var a = "hello"
//a is accessible here
function createK()
{
var k = "K is created"
//a is accesible here
}
//a is accessible here

I hope you find this post helpful and wish you good luck in programming ;)

Top comments (0)