What are Variables
Variables are like containers or bucket that holds values. To break it into an even simpler relatable form, I will give an illustration. In your kitchen that are different jars or containers holding different items like seasoning cubes, salt, oil etc. These containers are variables which you can easily identify. So if your mom asks for salt you already know which container to bring. That is how variables in Javascript works.
Javascript is a loosely typed language which means you don't have to explicitly define the data type a variable should hold, unlike other programming languages.
In this tutorial, I will be using the ECMAScript 2015 (ES6) syntax as this is part of the newer standard.
Take a look.
let person = "Saviour Essien";
let age = 16;
Let me breakdown this code into tiny chunks starting from the left-hand side of the code.
- The
let
keyword is what tells Javascript we are about to declare a variable - Then the identifier
person
is the name of the variable(container). - The assignment operator
=
like the name implies assigns the variable identifierperson
to the value. - The
value
Saviour Essien is what is inside the variable(container).
Let me spoon feed your more by making my previous illustration more watery.
Your mother returns from the market with groceries, she calls out your name Ngozi, come and take this groceries to the kitchen. Automatically, you already know where to put each of the items she bought for easy access to you and others.
So it is safe to say your mother is the programmer
then Ngozi is Javascript
, the groceries are values
then the container which each groceries item goes into is the variable
. Lastly, the name on each container is the identifier
. I don try βοΈ π
Javascript variable identifiers must follow these rules.
- Name must start with letters (a-z)(A-Z), underscore(_) or dollar sign($).
- Number can be included but it must be after the first letter. e.g
item3
-
Javascript variables are case sensitive.
x
is different fromX
.let x = 25;
let X = 12;
console.log(x); // 25
console.log(X); // 12
There are two ways of declaring a variable in Javascript.
- Let
- Const also is known as Constant
For the most part, both let
and const are the same the only difference they have is you can reassign a value to let
while you cannot reassign a value to const
because it will throw an error.
Note: Use let
to declare variables which value can change in the future but use const
for values can won't change ever.
Javascript variables can take in any data type like string, number, object etc.
const location = "Yenagoa"; // String
let phone = 01234567;
const cart = {orange: 6, type: "American Citrius"};
We will look at data types shortly in the next section. Each statement ends with a semicolon ;
. This ;
semicolon is telling Javascript that is the end of the statement. Although it is not compulsory to end your statement with a ;
semicolon. It is advisable for the sake of clean code.
Single Line Variable Declaration
Variable can be declared in one line. It is shorter.
let color = 'Red', shade = 'Dark, family = 'Tomatoe';
The declaration only takes one keyword which can be either let
or const
each new variable is declared after a comma ,
.
Scoping
In Javascript, there are two types of scopes. The Local
and Global
scope. The let
and const
are both block
scope. This means they can only be accessed within the block statement it was been created in. Although they can also possess the local and global scope.
Below is a simple example of a block statement.
for(){
// This is a block statement
}
Going further let take a quick look at how the scoping works.
Global Scope
The global scope can be accessed from any function.
const color = 'Yellow';
function addColor() {
return color;
}
console.log(addColor()); // Yellow
The above example returns 'Yellow' which was declared outside the function. This is what Global
scoping does.
Local Scope
A local scope variable is only accessible within the block or function it was created in.
const color = 'Yellow';
function addColor() {
//let color = 'Red';
return color;
}
console.log(addColor()); // Red
In this example, the variable color
declared inside the function takes precedence against the variable color
declared outside the function. The local
variable will always take effect against a Global
variable.
Data Types in Javascript
Our Javascript variable can hold any type of value. Helping the computer determine what type of value is, is why we have data types. Data types help the computer to operate on variables. Without data types, the computer will certainly be confused about what operation it should perform. Because Javascript is dynamically typed, it can automatically determine and assign a data type to a variable value. For example:
let add = 16 + "16";
console.log(add); //1616
Javascript can automatically identify that the first 16
is a number and the second 16
is a string. Normally, in Javascript numbers are identified because they don't have an opening and closing quotes "" while strings have an opening and closing quotes "".
There are eight(8) data types available in Javascript.
Number
String
Boolean
Null
Undefined
Objects
Array
NUMBER
Numbers are integers. They are the regular numbers we write every day.
Although numbers can be written with or without decimal like so;
let number1 = 12345;
let number2 = 23.009;
Also notice that numbers are written without quotes.
STRING
Strings are letters or text. Strings must be written with opening and closing quotes, the quotes can either be double ""
or single ''
like so.
let subject = "Javascript";
let level = 'Beginner';
BOOLEAN
Boolean only has two values which are true
or false
. It is more like saying yes
or no
. Boolean can be used to determine a condition in Javascript.
let bigNumber = 6 < 2;
console.log(bigNumber); // false
NULL
Null means nothing. The value is doesn't exist.
let amount = null;
console.log(amount); // null
Undefined
Undefined in Javascript means the value has not been assigned to a variable.
let message;
console.log(message); // undefined.
Noticed I didn't use the =
to assign a value to the message
variable. The undefined
is useful when you wish to use a variable in the future but you are not sure of the value yet to be assigned to it. An example can be user input.
OBJECTS
Object can store more than one data collections. Objects process more complexity.
const items = {
food: "Bole and Fish",
price: 500,
portion: 2,
addSauce: true
}
Objects hold key: value
pair. The example above declares a variable called Items. Inside the curly braces {}
are different pairs. Starting from the left-hand side we have the key food
and the value Bole and Fish
. Also, notice that objects can hold different data types like string
number
boolean
as stated in the above example.
Object is a bit broad. We will engage more on Object in the future.
ARRAYS
Arrays fall under objects. An array can hold more than one data value, these values can be string, number, boolean. Arrays are written with an opening and closing square brackets [].
const phones = ["Samsung", "Iphone", "Nokia", "Tecno"];
console.log(phones); //(5) ["Samsung", "Iphone", "Nokia", "Tecno"]
The Typeof Operator
Typeof() operator can help us determine the type of Javascript value.
const movie = "The Hustle";
const year = 2019;
let interesting = true;
let category = undefined;
console.log(typeof(movie)) // string
console.log(typeof(year)) // number
console.log(typeof(interesting)) // boolean
console.log(typeof(category)) // undefined
Primitives
They are values that can only contain one data. They do not hold extra methods or properties just like Object does. Primitives are immutable, this means their value cannot be changed. The following are primitives.
- String
- Number
- Boolean
- Null
- Undefined
Thank you for reading through, I believe I have been able to break down some concepts that were confusing to you. Our next topic will be on Javascript Syntax.
Recommended Resources
Mozilla Developer Network - MDN
I still remain your Celebrity Developer π₯. You can reach out to me on Twitter.
Top comments (0)