This content originally appeared on DEV Community 👩💻👨💻 and was authored by Jo
If you've been following along my CSS tutorial series, then you probably know that we've previously explained what a variable is. If not, don't worry we're going to explain everything in this series and build our knowledge from the ground up.
Before we start explaining what are variables let's take a look at an important thing.
Internal and external script.
Just like CSS JavaScript uses either a tag <script></script> placed at the bottom of your HTML file or an external script <script src="path/script.js"></script> that refers to the separate file that contains your JS script.
What is a variable?
A variable is a specific place where data is kept. Variables are named then given the value that you want to store. Variable names may consist of letters, numbers, and $ or _, but they cannot begin with a number or contain spaces.
You declare a variable like this:
Types of variables:
| Types of variables | Description |
|---|---|
| undefined | This means that the variables has not been assigned a value |
| null | This means that the variable has an empty value |
| boolean | returns either true or false
|
| string | a series of characters |
| symbol | symbols are immutable and unique |
| bigint | BigInt is a special type of number that supports integers of any length. |
| number | Integer or a decimal number also knows as a floating point number |
| object | object is a complex data type |
var fullName;
You assign a value to your declared variable by using the assignment operator =. This is called initializing a variable.
var fullName = "John Doe";
There are Restricted names that cannot be given to a variable such as class, return, this, function, let, const, var etc... you can find the full list with a quick google search.
Var, let and const
Var
var has been used in the previous versions of ECMAScript, and as seen in the example above, it is used to declare a variable. The var keyword allows you to re-declare the variable meaning, it will overwrite it.
var age = 20;
var age = 25;
This will not throw an error but will overwrite the 20 and give us 25. Finding bugs and fixing them becomes more harder because this behavior does not throw an error.
Let
This problem with the var keyword was resolved by the addition of the let keyword in ES6, (ECMAScript 6) an important update to JavaScript. There can be only one declaration of a variable with the same name when using let.
let age = 20;
let age = 25;
This code will throw an error, since you cannot re-declare a variable in ES6.
let age = 20;
age = 25;
This code will not throw an error because you can reassign a variable declared with let but not re-declare the variable.
const
const are only readable (read-only). Since they have a constant value, they cannot be changed after being assigned
const SHIRT_COLOR = "red";
SHIRT_COLOR = "green";
This will throw an error since, const is read-only and cannot reassign it later.
For variables that you don't want to change, Const should always be used.
You should use camelCase or lowercase for changeable values and uppercase for unchangeable values.
This content originally appeared on DEV Community 👩💻👨💻 and was authored by Jo
Jo | Sciencx (2023-02-09T16:25:12+00:00) JavaScript tutorial series: Variables. Retrieved from https://www.scien.cx/2023/02/09/javascript-tutorial-series-variables/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.