Javascript series: Variables

Front-end

Javascript Variable 856hdhd

For those who are new here, this is a continuation of a posts series on Fundamental JavaScript for beginners. We covered a brilliant introduction to JavaScript here. I recommend you to go through before reading this article if you are new to Javascript. In the course of this article, we will explain in detail with examples the following fundamental topic of the JavaScript language.

  • Variables

Without wasting time I will get directly into the subject and elaborate the topics as clear as possible so that, you will not have any doubt in a variable in programming as of today. So, take a seat and let's go.

What are the variables in JavaScript?

To clearly understand the meaning of a variable, let's take some common examples of our life every day. As humans, we have the ability to recognize each other right? Yes, to a particular person, we usually refer to him by his name. What does this mean? When I say John, what our mind does is that it visualize a certain John that it knows on your brain right. So, here we have two things to distinguish between, the name(John) and the image(the visual John) we visualize in our brain. This scenario is valid for many other objects or entities we use in our lives, for example, a nice MacBook proour car, our room, etc.

Since we are talking of variables in javascript, let's see how this is represented in a computer programming language. Now, to put it clear we need to know that a computer program is nothing more than manipulating data or information. Here, we say that the computer's brain is its memory and it stores a piece of information for us and can give back that information to us anytime we want. All that we do is to say hey give me this information by specifying his name.

Declaring a variable in javascript

To declare a variable in javascript we write the keyword var followed by the name of the variable. The name depends on you and should reflect the information you are creating the variable for. example a variable car to store information concerning a car:

//declare a variable called name
var name;

//declare a variable called message
var message;

//declare a variable called number
var number;
JavaScript

on the code snippet above, the lines starting with // are comment and are not taken into consideration by the browser while interpreting your javascript code. they are just there to help us humans understanding the flow of our program.

Declaring a variable and assign him a value

Now that we have our variable, we can give him some value(what it will visualize when we will call that variable). we do that by written the name of the variable then the (=)equal operator and the value itself:

//declare a variable called name
var name;
//assign the value 'John' to the variable name
name = 'John';

//declare a variable called message
var message;
//assign the value 'Hello world!' to the variable message
message = 'Hello World!';

//declare a variable called number
var number;
//assign the value 15 to the variable number
number = 15;
JavaScript

 

Declaring and assign the value in the same line

As simple as you can see below here:

var name = 'John';
var message = 'Hello World!';
var number = 15;
JavaScript

 

Manipulate a variable after the declaration

Once we declare our variable, we can display its value by simply referring to its name as shown below:

var name = 'John';
var message = 'Hello World!';
var number = 15;

//to display it value
alert(name);
alert(message);
alert(number);
JavaScript

We can also declare multiple variables on a single line like on the snippet below. The only thing to note here is that we wrote the var once and separate variables with comma.

var name = 'John', message = 'Hello World!', number = 15;
JavaScript

That might seem shorter, but we don’t recommend it. For the sake of better readability, please use a single line per variable.

The multiline variant is a bit longer, but easier to read. Some people also define multiple variables in this multiline style like this:

var name = 'John', 
    message = 'Hello World!', 
    number = 15;
JavaScript

 

Changing a variable Value in Javascript.

While writing our program, we will need at the time to change the value of our variables at running time. Let's take the example of our bank account if one of the users browsing our shopping website initially has $100 in his account, just shop, and checkout for a product of $25 we need to update his balance to $75. This can be done as follow:

var balance = '$100';
//after shop for $25 
balance = '$75';

alert(balance);  //will display $75 now.
JavaScript

 

Variable naming convention

There are two limitations on variable names in JavaScript:

  1. The name must contain only letters, digits, or the symbols $ and _.

  2. The first character must not be a digit.

Examples of invalid names:

var #-tag = "#";
var 123car = 'Ferrari'
JavaScript

We also mentioned that variable names in javascript are case sensitive, it means that if you named a variable using a capital letter, the same name in the lower letter does not mean the same thing:

var Name = 'John';

alert(name); //will through an error you must use exactly Name
JavaScript

Reserved names, There is a list of reserved words, which cannot be used as variable names because they are used by the language itself.

In case your variable name has more than one word you can use the camelcase convention or the underscore convention to name them:

var firstName = 'John';
var lastName  = 'Doe';

//or

var first_name = 'John';
var last_name  = 'Doe';
JavaScript

 

Summary 

This should be fairly almost all there is about variables in javascript. Here we have covered variable declaration, modification, naming, and many more. Don't hesitate to hit the comment section or leave your remarks or concern here.

Jump to the next topic to explore more about expressions and operators in Javascript.

You can share this post!

bproo user profil

Kamdjou Duplex

the world would not be so beautiful without people willing to share knowledge