DataType In JavaScript

As we discussed earlier, variables are like boxes/containers where we will store our data. Below are three containers – What type of things will we store in the pencil holder? What type of things will we store in a water bottle? Learn more about DataTypes In JavaScript.

Can you store milk in a basket or can you use a bottle to store fruits?

We are using different types of containers to store different things, right. While the bottle can hold milk or water or juice, it will hold only liquids. Similarly, a variable of type string (like the variable – studentName), can store only strings and a variable of type number (like the variable – studentAge) can store only numbers.

The type of data a variable can hold is called its Data type. Explore more about DataTypes In JavaScript.

DataTypes can be divided into two categories in JavaScript

Primitive DataTypes In JavaScript

1. Number

Number represents integer and floating numbers (decimals and exponentials).

Example

const number1 = 3;
const number2 = 3.433;
const number3 = 3e5 // 3 * 10^5

A number type can also be +Infinity, -Infinity, and NaN (not a number).

Example

const number1 = 3/0;
console.log(number1); // Infinity

const number2 = -3/0;
console.log(number2); // -Infinity

// strings can't be divided by numbers
const number3 = "abc"/3;
console.log(number3);  // NaN

2. String

String is used to store text. In JavaScript, strings are surrounded by quotes:

Single quotes: 'Hello' Double quotes: "Hello" Backticks: `Hello`

Example

//strings example 

const name = 'ram'; 

const name1 = "hair"; 

const result = `The names are ${name} and ${name1}`;

Single quotes and double quotes are practically the same and you can use either of them.

Backticks are generally used when you need to include variables or expressions into a string. This is done by wrapping variables or expressions with ${variable or expression} as shown above.

Example

var greeting = "Hello, world!";
var message = 'This is a string.';

3. Boolean

A boolean data type represents one of the two values:true or false. Boolean value is either true or false. The use of these data types will be clear when you start the comparison operator. Any comparisons return a boolean value which is either true or false.

Example: Boolean Values

let isLightOn = true
let isRaining = false
let isHungry = false
let isMarried = true
let truValue = 4 > 3    // true
let falseValue = 4 < 3  // false

We agreed that boolean values are either true or false.

4. Undefined

The undefined data type represents value that is not assigned. If a variable is declared but the value is not assigned, then the value of that variable will be undefined

Example

let name;
console.log(name); // undefined

It is also possible to explicitly assign a variable value undefined.

Example

let name = undefined;
console.log(name); // undefined

NOTE: It is recommended not to explicitly assign undefined to a variable. Usually, null is used to assign ‘unknown’ or ’empty’ value to a variable.

5. Null

In JavaScript, null is a special value that represents empty or unknown value.

Example

let empty = null
console.log(empty) // -> null , means no value

Note: null is not the same as NULL or Null.

Difference Between Undefined and Null in JavaScript

1. Undefined

There are certain cases when undefined value is returned in javascript as follows:-

1)Whenever we declare a variable without assigning any value to it, javascript implicitly assigns its value as undefined.

let name;
console.log(name); //undefined

2) When value is not assigned in array or object

let numArray = [1,2,,4];
console.log(numArray);
//[1, 2, empty, 4]
console.log(typeof(numArray[2]))
//"undefined"

3) When functions don’t have a return statement but are called for assigning a value to a variable.

let add = (a,b) => {
  let c = a+b;
  //return c;
}
let sum = add(2,3);
console.log(sum);
//Output: undefined

In the code block above, since we commented the return statement, the value of variable sum is given as undefined in the output

2. Null

null is a reserved keyword in javascript. We can assign a null value to a variable explicitly using the keyword null. Null essentially represents a non-existent or an empty value i.e. we explicitly tell javascript interpreter that the variable has no value.

let life = null;
console.log(life); //null

6. BigInt

In JavaScript, BigInt is a data type introduced in ECMAScript 11 (ES11) to represent arbitrary precision integers. It allows you to work with extremely large integer values that cannot be accurately represented using the standard Number data type, which has a limited range due to the use of double-precision floating-point numbers.

You can create BigInt values by appending an “n” to an integer literal or by using the BigInt() constructor:

Example

const bigIntValue = 123456789012345678901234567890123456789012345678n;
const anotherBigInt = BigInt(42);

7. Symbol

This data type was introduced in a newer version of JavaScript (from ES2015).

A value having the data type Symbol can be referred to as a symbol value. Symbol is an immutable primitive value that is unique.

Example

// two symbols with the same description

let value1 = Symbol('hello');
let value2 = Symbol('hello');

Though value1 and value2 both contain ‘hello’, they are different as they are of the Symbol type.

Refer this for more:- https://playcode.io/javascript/symbols

Non Primitive DataTypes In JavaScript

1. Object

In JavaScript, an object is an unordered collection of key-value pairs. Each key-value pair is called a property.

The key of a property can be a string. The value of a property can be any value, e.g., a string, a number, an array, and even a function.

JavaScript provides you with many ways to create an object. The most commonly used one is to use the object literal notation.

For Example: The following example creates an empty object using the object literal notation:

// Create a new object
let person = {};

// Add properties using dot notation
person.name = "John";
person.age = 30;

// Access properties using dot notation
console.log(person.name); // Output: John

// Update properties
person.name = "Jane";
person.age = 35;

// Delete properties
delete person.age;

we will be learning these concepts in upcoming Articles.

Conclusion

Understanding JavaScript data types is foundational to effectively programming in the language. JavaScript offers both primitive and non-primitive data types to accommodate a wide range of data we might want to represent in our programs. From handling numbers, text, and boolean values with primitive data types to organizing complex collections of data in objects, JavaScript’s flexible data type system allows for robust and dynamic web applications. As we delve deeper into JavaScript, appreciating the nuances of each data type and their appropriate use cases will be crucial for writing clear, efficient, and bug-free code.

Frequently Asked Questions