Variables are an essential component of Javascript, they are containers used to store values which can then be called on and used throughout Javascript programs. JavaScript uses reserved keywords to declare its variables. Up until 2015, the only var was used to declare variables but now there are new and better ways to declare a variable in Javascript! What happened in 2015? It was the finalization of the second major revision to the Javascript language. The update was to make sure that web pages could operate across different web browsers and held several key changes to the language, one of them being the update in variables. This update is called ECMAScript 2015 or ES6.
Back to variables though! A variable must have a unique name, you can assign a value to a variable using the equal (=) operator either when you declare it or before using it depending on which word you use to set the variable. In Javascript you're looking for either var, let, or const before the variable's name.
Three different ways to declare a variable give you a lot of flexibility in Javascript, so what's the difference? And what are the best uses for each case?
First up is var, and it is the worst one to use, you'll make yourself look like a total dinosaur if you implement it in your code (also if you peep any code that's still using it, it is outdated!). Before 2015 it was the first and only way to write a variable. But there is no reason to use var now to declare variables, it is super outdated!
var declarations, wherever they occur, are processed before any code is executed so this causes some problems. There are scope issues - var variables are not block-scoped and there are problems with hoisting, I'll touch on that more later. If you do use var, know that once a variable has been created with var it can be reassigned multiple times!
Do you know which are block-scoped? let and const.
let and const are the new go-to's. Good-bye, var!
With const a variable cannot be redeclared or reassigned
good because we know that that variable will always have the same value and will always point to the same object. Even though the object properties can still be modified it will still point to that object! When you use const, the value must be assigned initially. const is valuable to other devs because they will know what it is referring to everywhere it's referenced in the code. Using const as the default variable keyword is a best practice situation.
Our other variable superstar is let. let is cool because its value can be reassigned. This is helpful and required when using for and while statements in iteration because we are incrementing a counter variable. You cannot use const in these situations because it cannot be reassigned so it cant be used since the counter's value is being reassigned to the variable each time it's being iterated over.
So that's the basics, what else do we need to know?
Variables have naming conventions, they should:
- start with a lower case letter
- don't use spaces! camelCase them instead
- don't use Javscript reserved words
- case matters when you call on them
Declaration and assignment can happen in a single line of code or can be declared and then assigned. In order to retrieve a declared variable, you can call it by its name. A key thing to note is that upon declaration, all variables are auto-assigned the value of undefined until a value is assigned.
Do not set a variable to undefined. They are undefined until a value is explicitly set.
A variable can be set without the keywords of const, let, or var keyword.
one = 1;
Those variables without our keywords are always globally scoped regardless of where they sit in the code.
const, let, and var can also be global variables which means that if a variable is not declared inside of a function or block it's in the global scope/global execution context.
Global variables should only be used as a last resort. It is best practice to only make them available where they're needed and nowhere else. If they're used frequently set them as a global variable in order to keep your code from repeating unnecessarily.
So what's up with hoisting? Hoisting variables is something to be aware of. It is Javascript's behavior of moving declarations to the top so, in other words: a variable can be used before it has been declared.
There are two ways to keep the Javascript engine from hoisting variables:
- if the current project requires the use of var, declare everything at the top of its scope, if you need to declare a variable in a function: declare it at the top of the function
- but also...just don't use var! variables declared with const and let do technically get hoisted but the javascript engine doesn't allow them to be referenced before they've been initialized!
What is the takeaway from this?
DON'T USE VAR!!!
Rule of thumb:
- never use var
- use let when you know the value of a variable will change
- use const for every other variable
Best practice: always declare with const and if you realize the value has to change you can circle back and change it to let from const!
Top comments (0)