Basics of Values and Variables in JavaScript

Welcome to the 3rd post of the JavaScript tutorial Series. Here, you’ll get to know about values and variables in JavaScript, including how Values in JavaScript are represented and how Variables in JavaScript are used to store values.

This is technically the first post of JavaScript fundamentals. You must have completed VS Code setup and written your first Hello World program, so from this post onward, we’ll get into the main intricacies of JavaScript Basics.

Though learning the concepts of JavaScript is not very fun, you have to learn, practice enough and get through the posts containing the fundamentals of JavaScript. Without fundamentals, you’ll never be able to start creating real applications. So, keep practising what you learn, otherwise, you may have to start with the fundamentals of JavaScript again.

So now, let’s start with what are values in JavaScript.

What are Values in JavaScript?

In JavaScript or any programming language, values are the assigned data that you work with when creating a program. In other words, values are the key ingredients that you use inside your program to perform different tasks.

Here are the main values that you’re going to use primarily.

1. 10 (Number)
2. "Hello World" (Text)
3. true (Boolean)
4. null (Special Value)
5. undefined (Special Value)

Now you know that what are Values in JavaScript, let’s get into Data Types. Values and Data Types are closely related.

What is Data Type in JavaScript?

JavaScript has many types of values (data), and the category of values is called “Data Type“. Many people get confused with values and data types. You can think of Values as Ingredients and Data Types as types of ingredients.

Here, we’ll briefly talk about Data types. There are 7 data types in JavaScript –

1. Numbers
2. Strings
3. Booleans
4. Null
5. Undefined
6. Symbols
7. BigInt

Numbers

Numbers are used to represent numeric values in our code. The Numbers you can use are integers, floating point numbers and special values.

1. Integers are positive and negative numbers without decimals (-1, -2, 0, 1, 2, etc)
2. Floating point numbers are numbers with decimals (1.5, 2.5, 3.5, etc)
3. Special values are numbers which does not behave like numbers (NaN, Infinity)

let age = 16         // Integer
let price = 49.99;    // Floating-point number
let notANumber = NaN; // Not a Number
let infinity = Infinity; // Infinity

Strings

A string is used to represent text in our code. It is essentaillay combination of characters, letters, numbers and symbols. To write a string, you have to use single quotes (‘Your text’) or double quotes(“Your text”) on the left and right side of your text.

In modern JavaScript, you can also use Template literals (`Your text ${}`). Template literal is used to insert 1 line code inside your string.

let name = 'John Doe';  // Single quotes
let message = "I am learning JavaScript";  // Double quotes
let greeting = `Hi, I am ${name} and ${message}.`;  // Template literal

Booleans

Boolean is a data type that shows whether the outcome of your code is true or false. It is essentially the most important value for creating logic, reasoning and decision-making in your program.

let isLoggedIn = true;
let isAdult = false;

Null

In JavaScript, null is a data type which represents the intentional absence of data. It simply means that instead of putting data, the developer has left null intentionally. There can be many reasons for putting null, like there is a lack of relevant data, or the data has not been gathered yet.

let user = null; // User variable is explicitly set to null

Undefined

Similar to null, undefined also represents the absence of data, but the difference is undefined is automatically assigned when there is no assigned data.

Look here; there is a space for assigning a username, but there is no username assigned. So, the output you’ll get is undefined.

let username = ; // username variable is declared but not assigned a value (undefined)

Symbols (not for beginners)

Symbol is a value that is used to put unique property in your code. Every Symbol will return a unique value even if you use the same name for different Symbols.

Symbols are used by advanced programmers, and we’ll dive into symbols after we finish the beginner series. Here is an example of symbols for your reference.

let id = Symbol('uniqueId');

BigInt

BigInt is an integer which is too big to calculate properly. Usually, BigInt is used when you need to calculate in trillions or more. Keep in mind that BigInt can not be used with the built-in calculation method with numbers, and precise value may be lost when coercing with a number value. It is usually coerced with the same type of numbers.

BigInt is created by appending n without any space.

let bigNumber = 68457614789068425678901234567957416354890n;

What are Variables in JavaScript?

Just now, you saw glimpses of data types. A variable is where you save your value (data). Previously, you saw how we saved different types of values. In the Numbers section, we have used let age = 16 as an example, here, 16 is the value (data type – number), and age is the variable where you save your data.

Basically, a Variable is a type of container where you save your data. You can also think of it as the label under which you save your data.

How to declare a variable in JavaScript?

In JavaScript, to declare a variable, you need to use let or const. You can also use var, but it is not recommended. Before the introduction of let and const in ES6 (JavaScript update 2015) var was used. Now, most developers don’t bother with var unless they are dealing with special circumstances, like working on old code files.

To declare a variable, you have to use let or const before creating a variable name and assigning a value to it.

Here is how you have to declare variables in JavaScript.

let personAge;       // Declare a variable named 'personAge'
const personName;    // Declare a constant named 'personName'

Creating a variable means you have created a named container to hold data. Now you have to put data in your container to use it later.

Note: JavaScript is a dynamically typed language. It means you don’t have to assign a data type to your value when you’re creating a variable. JavaScript will automatically identify the data type when you create a variable and assign a value to it.

After declaring a variable, you have to assign a value to your variable. Here is how you have to assign value to your variable –

let personAge;      // Declare a variable named 'personAge'
personAge = 19;     // Assign the value 25 to the 'personAge' variable

const personName;         // Declare a variable named 'personName'
personName = "John Doe";  // Assign the value "John Doe" to the 'personName' variable

You can also declare a variable and assign its value in the same line.

let personAge = 19;               // Declaring variable 'personAge' and assigning value '19'
const personName = "John Doe";    // Declaring variable 'personName' and assigning value 'John Doe'

Now that you know how to declare a variable and assign value to it, let’s get into the details of let and const and where to use these.

Where to use let and const?

Both let and const have different purposes. You can use both interchangeably, but it’ll cause an unnecessary bug in your code. It is recommended to use const most of the time, but why? Let’s get into the details.

let

When declaring a variable, use let when you need to assign a different value to your variable. let is basically used when you need to change your data.

For example, in the previous section, we have used let personAge = 19;. Here, we have used let because we’re declaring the age of a person, which will be different after a few months or a year. This means that we have to change the age of the person after the person’s birthday.

Let’s show you how it works.

let personAge = 19;
personAge = personAge + 1;   // Change the value of 'personAge'

console.log(personAge);      // Output: 20

Here, we have used let personAge = 19;.

Suppose the person had a birthday last month, and now we have to change his age and increase it by 1.

So we have simply added 1 to the person’s age by using personAge = personAge + 1;. Now, if you use console.log(personAge);, you’ll get output 20. This means you have successfully changed the value of the variable personAge.

We were able to change the value of the variable because we have used let.

const

When declaring variables, use const when you don’t want your data (values) to be reassigned. const is basically used for data which you don’t need to ressign later.

In the “How to declare a variable in JavaScript?” section, we have used const personName = "John Doe";. Here, we have used const because the name of a person never changes, and you don’t need to reassign a person’s name.

Let’s get into how const works.

const PI = 3.141592653589793238462643383279502884197;
// PI = 3.14; - Ressigning the value like this would cause an error (TypeError: Assignment to constant variable.)
console.log(PI); // Output: 3.141592653589793

Here, we have used const PI = 3.141592653589793238462643383279502884197;.

If we try to reassign the value of PI to just 3.14 by typing PI = 3.14;, we’ll get “Type Error” as the value of const cannot be changed.

This takes us to the next point: why should we use const?

Depending on your program, you may have to ressign the value of your variable many times, but sometimes what happens is that developers use let everywhere and end up reassigning the value of a variable they should not reassign. This creates unnecessary bugs in a program.

So, to prevent this, you should always use const unless you want to reassign the value.

Naming Conventions (How to name your variables)

You may have noticed that when creating a variable, we have used personAge and personName. But why have we created variables named like this? We could have simply used Age or Name.

There are certain rules to naming the variable. Following these rules will help you prevent creating bugs.

Use variables and values in JavaScript to create a program

How you use variables to create your program depends on your vision and what you want your program to do.

Since this post is for beginners, let’s create a simple code which will show a message in your browser’s pop-up. Don’t worry; we’re going to create a simple code, and anyone can create it.

Step 1 – Open developer tool in your browser with inspect and go to console tab

Step 2 – Create a variable using your name and age.

Note: To go to the next line in the console, use Shift + Enter on your keyboard

const myName = "John Doe";   // Use variable const for your name
let myAge = 19;              // Use variable let for your age

Step 3 – Create a function to show a pop-up in your browser. (Since you’re a beginner, you don’t need to know about this function. We’ll talk about this function later.)

// This 'alert()' is a built-in function to create popup.
alert("Hi, I am " + myName + " and I am " + myAge + " years old." );

Step 4 – Write your code as shown in the image below and press enter.

Now, your code should work, and you should be able to see a pop-up in your web browser.

Congrats, you have successfully created your first meaningful piece of code.

Excercise

What you learn, you have to practice; otherwise, you’ll surely forget everything. You need to practice enough to remember the basics. Now, let’s get into today’s exercise.

Today’s exercise is to create output about your name and age. The only thing different you have to do is use console.log() instead of alert(). If you need to install a code editor and set up your developer environment, then visit our post – Setting up VS Code for JavaScript Development Environment.

Here is what you have to do –

• Step 1: Open your code editor and create .js file to write your code.
• Step 2: Write your name and age with a variable const and let.
• Step 3: Create your code with console.log() similar to how we have use alert() in this post.
• Step 4: Create your output with a full sentence (ex – I am John Doe and I am 20 years old.). There should be no error log when running your code.

Conclusion

Learning the basics of values and variables is the first step to learning JavaScript. Here is what we have covered here –

• Value is the assigned data, and the type of variable is called a data type.
• A variable is a container where you save your value (data).
• We have introduced 7 data types in JavaScript: numbers, strings, boolearns, null, undefined, symbols, and BigInt.
• We have used let and const to create variables and use those variables to create a pop-up in the browser.

In the next post, we’ll dive deep into the data type in JavaScript. If you find this post helpful, leave a comment below to let us know. It will encourage us to create more posts like this.