Understanding Variables and Data Types in JavaScript
Tags: javascript, webdev, beginners, tutorial
Published: 2023-10-03 12:36:26

As a beginner venturing into JavaScript, it is imperative you understand variables and data types because they are the building block of JavaScript and virtually any programming language. In this article, we will explore variables and data types in JavaScript, understanding how they work and how to use them effectively to add functionality to web pages.

**What** **are** **Variables****?**
Variables are used to store, access, and modify values (data).

**Naming** **Variables**
When naming variables there are certain rules you need to adhere to, and they include;
- They can contain digits, letters, underscore, and dollar sign, but they must start with a letter, underscore (_) or dollar sign ($).
- They are very case-sensitive.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pckxykhtv3tsqv5okdvm.png)

**Declaring** **Variables**
In JavaScript, you can declare variables using three keywords: **var**, **let**, and **const**.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xtk03i57jc1ugpdssusm.png)

1.**var**: Historically, **var** was the primary keyword for declaring variables in JavaScript. However, it had some issues, which led to the introduction of **let** and **const**. Variables declared with **var** are function-dependent, which means they are limited to the function in which they are declared. They are also hoisted, which means they are placed at the top of their scope during compilation.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/isxr89qzyjgvq03zzu2b.png)

2.**let**: This was introduced in ECMAScript 6 (ES6), **let** is block-dependent, making it a safer choice for variable declaration. It is block-dependent, which means that the it is limited to the block (enclosed by curly braces) in which it is defined. It is not hoisted.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ksql2qg29ceojdc5tbn0.png)

3.**const**: Similar to **let**, **const** is also block-dependent but with one crucial difference – the value of a **const** variable cannot be reassigned once it's initialized. This makes it suitable for declaring constants.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/te2aiob31iaj2vgmgy77.png)



**What** **are** **Data** **Types?**
Data types define the nature of the data that can be stored in these variables. JavaScript has several built-in data types that define the nature of the data stored in variables. These can be categorized into two main groups: primitive data types and objects.
**Primitive** **Data** **Types**
In JavaScript, primitive data types are basic, immutable data types that represent single values. They are the simplest building blocks of data in the language and are not objects. They include;
1.**Number**: This is used to represent integers, floating-point numbers, an exponential value, a NaN or an Infinity.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/16tnoz5vhjva184z27de.png)

2.**String**: Represents a sequence of characters enclosed in single or double quotes or by backticks.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mfv3tev3vrk7oyp1qwdi.png)

3.**Boolean**: Boolean represents a binary value, which is only either true or false. It is mostly used to check a logical condition. Thus, Boolean is a logical data type that is used to check a condition.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/otjsdghrmoepvdul3f6p.png)

4.**Undefined**: This represents a variable that has been declared but has no assigned value.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/102cd6gxk85zvt8my4ck.png)

5.**Null**: This represents the intentional absence of any object value, which means a null has no value.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mo9mpwbewo06nu7g7t5z.png)

6.**Symbol**: This data type was introduced in ES6, they are unique and immutable values used as object property keys. Which means they are a property of an object which is private to the object. It refers to the ‘key’ of the key-value pair of an object.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3b62qvuq2y262omu8o0f.png)


**Object** **Data** **Types**
In JavaScript, the object data types are non-primitive data types. They include the following:
1.**Object**: This represents a collection of key-value pairs.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5us49ulw1twttvrbxnu8.png)

2.**Array**: This represents an ordered list of values. It is zero index-based, which means the ordered list begins from 0, not 1.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9uf57qauow8h58aapgqw.png)

3.**Function**: A callable object that can execute a block of code.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/09xsh9f91ln4fay0ly4c.png)

**Conclusion**
In conclusion, Variables and data types are the building blocks in JavaScript. They allow you to store, access, modify, and work with data effectively. By understanding the various data types and how to declare variables, you can write more robust and predictable JavaScript code. JavaScript's flexibility and versatility make it a powerful language, but also one that demands careful consideration of data types and variable usage.