Language Basics: Variables

Photo by Chris Lawton on Unsplash

There used to be a time before 2008 where JavaScript was considered to be nothing more than a funny looking language that made HTML do some tricks and animations. Ten years later, JavaScript has become a well-rounded programming language that allows to create frameworks, servers and much more with relative ease. But as complex as a language can get, it will still follow the basics that are necessary in all programming languages. So let’s begin with the most basic of the JavaScript(JS) tools: Variables.

VARIABLES

Photo by Erda Estremera on Unsplash

Variables are memory containers where you can store a value. This can be done by declaring the following in a .js file:

var simpleVariable;

Once declared, the variable can hold values such as numbers, string, Objects and Arrays.

For example:

var numberVariable = 42; 
var stringVariable = "This is a string";
var objectVariable = { first_name: 'Renato', last_name:'Francia'};
var arrayVariable  = [1,2,3,4,5];

You’ve probably noticed that there is no need to declare the data type that is stored in the variable. Unlike other programming languages, Javascript will not give any errors when assigning variables without a datatype. This means that there is not need to declare the datatype of variable beforehand. Like in other languages like C++.

// C++ code sample of variables
int number = 42; // Will take only integer numbers 
char letter = 'a'; // Will take only characters
int notNumber = 'a'; // This will create an error

On the other hand the following is no problem in JavaScript:

var number = 42; 
number = 'Some Number'; // No problem converting 
                        // a number to a string

Warning: You probably already noticed but this will create confusion and might affect your code if you are not careful. For example, you might expect a number in the variable but get a string. But there will be no errors in the code. So be careful to check your data before using variables. There will be more info about debugging and testing on future blog post that will help you fight this problem.

Rules

Even though JavaScript is a very flexible language, there are still some rules we have to follow when creating variables.

1. The variable must not start with a number. e.g: 2variable
2. It cannot be a mathematical equation. e.g: 1+e_variable
3. NO SPACES in the variables. e.g: This is not a variable

For more rules on variables read this

Coding Style

99% of the time, when you are programming professionally, you will be working with other developers. For this, a set of rules called the “Coding Style” was born. See the following code:

var number1 = 1; 
var number2 = 4; 
var SumOfNumbers_test = number1 + number2; 

This code will run with no problems. But it will be a nightmare for the programmer who is reading the code since it’s not self explanatory. Now take a look at this:

var oddNumber = 1;
var evenNumber = 4; 
var testSum = oddNumber + evenNumber; 

Suddenly the code makes a little more sense. Now we know from reading it that testSum takes an odd and an even number. Just by being a more precise on the naming of the variable, we can save time in debugging code and your coworkers will thank you very much. Maybe buying you a cup of coffee.

Note: There are some cases were variables will mean an Class or an Array. Before you start to create your scripts, it would be a good idea to check the coding styles you are required to use. Here’s a good coding style made by Airbnb.

Note: Since coding styles will depend on the company or technology you will be working with, I will follow the standard that Google uses. Also, since we are following the coding styles of Google that states that local variable names must have lowerCamelCase, we will begin the variable name with a lower case and add an uppercase to added words. For example, a varible name that holds a string value for an employee name will be written like employeeName

Screw it: Let’s use it

Photo by Tadeu Jnr on Unsplash

Imagine, you’ve been tasked with programming a factory machine. It will take the variables of a car you have to build. So we have to be specific on what to use and describe our variables as clear as possible. For now, we’ll use four primitive data-types for this situation

a. String

Like all things, we need to create a variable name for the car model. Let’s call it “Codevan”.

var modelName = 'Codevan';

b. Number

Now, let’s define how many doors will the car have

var numberOfDoors = 4;

c. Boolean

We will also need to see wether the engine is on or off. For this, we will need the variable to be in a state where it’s true or false.

var isEngineOn = false; 

d. Array

Furthermore, we will need to see a status of what’s inside the car. An Array is a structure that allows us to story multiple values in a single reference. For example:

var carSpecs = ['engine', 'cooling system', 'leather chairs'];

Altogether, the code will look like this:

// Car Settings 
var modelName = 'Codevan';
var numberOfDoors = 4;
var isEngineOn = false;
var carSpecs = ['engine', 'cooling system', 'leather chairs'];

Congrats! You now have a car. I know that this might look like an overkill just to teach JavaScript variables, but it is then fundamentals where most mistakes are made. After all, like Bruce Lee used to say “ I fear not the man who has practiced 10,000 kicks once, but I fear the man who has practiced one kick 10,000 times”. Next, we will be taking comments and operators.

For more on JavaScript, check out my JS blog series here.