DEV Community

Victor Ogbonna
Victor Ogbonna

Posted on

Understanding Variables and Data Types in JavaScript

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

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

Image description

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

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

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

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

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

Image description

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

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

Image description

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

Image description

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

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

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

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

Image description

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.

Top comments (2)

Collapse
 
jonrandy profile image
Jon Randy 🎖️

You've missed BigInt in the data types

Collapse
 
outstandingvick profile image
Victor Ogbonna

Thanks, it really skipped my mind