JavaScript is a dynamic programming language this is widely used in web development. One of the fundamental concepts of JavaScript is variables, which are used to store data in memory. In this article, we will explore the basics of variables and data types in JavaScript.
Variables
A variable is a named container that stores data. It is defined using the var, let, or const keyword, followed by the variable name. There are two steps to follow when creating a variable in JavaScript
- Variable declarations.
2.Assigning a value to the variable.
Here is an example.
// A variable is a container for storing DataTransfer
// A variable behaves as if it was the value that it contains
//Two steps:
//1. Declaration (var,let,const)
//2 Assignment (= assignment operator)
var myVariable;//variable declaration
myVariable = 10;//Assigning value to the variable
console.log(myVariable);
Output:
10
In the above example, we have defined a variable called myVariable and assigned it the value of 10, and also, we have used the console.log(myVariable); to display our output in the console. The var keyword declares the variable that has the function scope, while the let and const keywords declare variables that have block scope.
You can declare your variable and assign it a value in one line, and you will still have the same output.
var myVariable = 10;
console.log(myVariable);
Output:
10
To have the above output, make sure to create an index.html file and link the JavaScript to it like so.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Variables and Data Types - JavaScript</title>
</head>
<body>
<Script src="index.js"></Script>
</body>
</html>
You can open the index.html file on your browser, write click and select inspect then choose console to see your output. For more understanding if you are little bit confused you can read this article Getting started with JavaScript for complete beginners.
So, let's continue I will just go straight to explain what data types are and the various types, then we will now do an example that comprises of both variables and data types.
Data Types
JavaScript supports several data types, including:
Numbers: Used to store numeric values. Examples include
10,3.14, and-5.Strings: Used to store text. Examples include
"hello","world", and "42".Booleans: Used to store true/false values. Examples include
trueandfalse.Undefined: Used to represent a variable that has not been assigned a value.
Null: Used to represent a variable that has no value.
Objects: Used to store collections of data. Examples include
{name: "John", age: 30}and["apple", "banana", "orange"].
Arrays: Used to store lists of data. Examples include
["apple", "banana", "orange"]and[1, 2, 3].
Type Coercion
JavaScript is a loosely typed language, which means that variables can change their data type. For example, we can assign a string value to a variable that previously held a number:
var myVariable = 10;
myVariable = "hello";
The example below is a combination of both variables and data types. This example will echo the name and age of a particular student or person.
let age; //step 1, declare variable
age = 20; //step 2, assigning a value
console.log(age);
First, let's declare the variable age and assign a value of 20.
Output:
20
You can increase the value of your age like so.
let age = 20;
age = age + 1;
console.log(age);
output:
21
Now let's add another variable called firstName
let firstName = "Noel";//of datatype String
let age = 20;//of data type number
age = age + 1;
console.log(firstName);
console.log(age);
output:
Noel
21
Let's add another Boolean variable (true or false).
let firstName = "Noel";//of datatype String
let age = 20;//of data type number
age = age + 1;
let student = true;//of data type boolean(true or false)
console.log(firstName);
console.log(age);
console.log(student);
Output:
Noel
21
true
Now if I am not a student it will display false, you can change the value of student to either true or false like so.
let firstName = "Noel";//of datatype String
let age = 20;//of data type number
age = age + 1;
let student = false;//of data type boolean(true or false)
console.log(firstName);
console.log(age);
console.log(student);
output:
Noel
21
false
When coding you really need to be careful with the way you assign you variable, let's see the example below.
let firstName = "Noel";//of datatype String
let age = "20";//of data type String
age = age + 1;
let student = false;//of data type boolean(true or false)
console.log(firstName);
console.log(age);
console.log(student);
if you put the value of age to "20", it now becomes a string and if you add a value to age like so age = age + 1; it concatenates the string and now gives you an our of 201.
output.
Noel
201
false
So you should really take note of that when coding.
To spice output, we can add some text to it like so.
let firstName = "Noel";//of datatype String
let age = 20;//of data type number
age = age + 1;
let student = true;//of data type boolean(true or false)
console.log("Hello",firstName);
console.log("You are",age, "years old");
console.log("Enrolled",student);
output:
Hello Noel
You are 21 years old
Enrolled true
and we have a beautiful output.
To display your output on your browser, you can use the DOM (Document object module), I will explain this in the future in details. So, let's see how we can do that. Within our index.html let's create 3 paragraphs tags(p tags) and give each a unique id.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Variables and Data Types - JavaScript</title>
</head>
<body>
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
<Script src="index.js"></Script>
</body>
</html>
So now in our DOM, we have 3 p tags, to display the results in our browser let's see how we can do that using JavaScript.
let firstName = "Noel";//of datatype String
let age = 20; //of data type String
age = age + 1;
let student = true;//of data type boolean(true or false)
console.log("Hello",firstName);
console.log("You are",age, "years old");
console.log("Enrolled",student);
document.getElementById("p1").innerHTML = "Hello" + firstName;
document.getElementById("p2").innerHTML = "You are " + age + "years old";
document.getElementById("p3").innerHTML = "Enrolled" + student;
in the above example, we have used the document.getElementById().innnerHTML to output the firstName,age of student, and also whether the student has been enrolled or not.
output:
Congratulations am glad you mad it to the end.
Conclusion
In this article, we have explored the basics of variables and data types in JavaScript. Variables are used to store data in memory, while data types define the kind of data that can be stored. JavaScript is a loosely typed language, which means that variables can change their data type. Adios
Top comments (2)
really appreciate nice work _
Thank you 🙏