JavaScript 101: variables

Javascript is known for it’s complexity and how it’s a loosely-typed language compared to most programming languages. It allows almost everything, it isn’t very strict on syntax rules and that’s why you need time and effort to master it as opposed to being hard to learn. Javascript is a bit tricky in how it works, in this blog I’ll discuss variables: how var, let and const differ.

Defining a variable is a way to store/hold data in a specific place that you define.

var message = 'this is a variable';
let message = 'this is also a variable';
const message = 'this again is a variable';

All of the above a variables, the differences is in how they’re defined and therefore how Javascript will treat each of them. The main difference between var and let is block scope… var is globally accessible and let isn’t, here’s an example:

var x = 'this is VAR';
let y = 'this is LET';

console.log(window.x);
console.log(window.y)

**output**
-this is VAR
-undefined

The reason for different outputs is that var has a global scope and let does not. Let was added in ES6 to give us the privilege to declare variables that are limited in scope, let variables are usually used when there’s a limited use of those variables like in loops or conditionals for example. Basically wherever the scope of the variable has to be limited.

for(let i=0; i<10; i++){
console.log(i); 
**i is visible thus is logged in the console as 0,1,2,....,9
}
console.log(i); 
**throws an error as "i is not defined" because i is not visible

As you write a program you might want to define a variable or a set of variable that hold data which keeps changing or updating but sometimes you want your variables to stay the same and never change across the program… that’s where const comes in. As you can probably guess const is a shorthand for “constant” which obviously means it doesn’t change.

let message = 'I love javascript';
message = 'I am a nerd';
console.log(message);

**output**
-I am a nerd

“I am a nerd” prints out because the message variable has been updated/changed to hold something else, but if we use const we cannot change the value of the variable we declare.

const message = 'I love javascript';
message = 'I am a nerd';
console.log(message);

**output**
-error

Javascript will throw an error whenever you attempt to change/update a const variable, declaring variables this way is considered to be more secure. In fact some programmers almost never use let or var unless they want they variable values to change at some point as the program runs.

You can add something to a variable using “+=”… here you’re not necessarily changing the value, but adding onto it

let message = 'I love javascript';
message += ' because I am a nerd';
console.log(message);

**output**
-I love javascript because I am a nerd

If you try to do this with const though, Javascript will return an error, for reasons we’ve already discussed.

You can also combine two or more variables to form a sentence or something, this is called concatenation :

let one = 'I also love reading';
let two = ' and that is because I am a nerd';
let sentence = one + two;
console.log(sentence);

**output**
-I also love reading and that is because I am a nerd

The sentence variable takes the values of one and two and combine them with “+”. You may notice a space in the beginning of the second variable value, that’s because if you don’t include the space while declaring the variable, you will have to concatenate it when calling the variable otherwise your sentence will look like this ‘I also love readingand that is because I a nerd‘.

let one = 'I also love reading';
let two = 'and that is because I am a nerd';
let sentence = one + ' ' + two;
console.log(sentence);

**output**
-I also love reading and that is because I am a nerd

This adds work and it just looks terrible. There is a way around this issue though, if you don’t want to add spaces when declaring variables you can use backtics

let one = 'I also love reading';
let two = 'and that is because I am a nerd';
let sentence = `${one} ${two}`;
console.log(sentence);

**output**
-I also love reading and that is because I am a nerd

This I personally prefer, I just think it’s a much better way, it looks cleaner and you don’t have to worry about whether or not spaces were included in declaration. There’s more to variables than what I covered here but I don’t want this to be longer than it already is so I’ll end it here.