postImage

Tutorial: Javascript Data Type

blogImage

By Emmanuel Chinonso

Web Developer

Last updated: 5 May 2024

JavaScript Data Type

Variables in JavaScript can hold a wide range of data types: they include

  • String
  • Numbers
  • Booleans
  • Arrays
  • Object
  • Undefined
  • Null

Contrast Bootstrap UI Kit

JavaScript string

A string (sometimes known as a text string) is a collection of characters such as "John Doe." Quotes are used to write strings. You have the option of using single or double quotes:

js
var animal1 = 'Cat'; // Using double quotes
var animal2 = 'Cat'; // Using single quotes

In a subsequent chapter, we'll go into strings in further detail.

JavaScript Numbers

There is only one number type in JavaScript. There are two ways to write numbers: with decimals and without decimals:

js
var x1 = 18.0; // Written with decimals
var x2 = 18; // Written without decimals

In later chapters, you'll discover more about numbers.

JavaScript Booleans

True or false are the only two possible values for a Boolean. In conditional testing, Booleans are frequently utilized.

js
var x = 5;
var y = 5;
var z = 6;
(x == y)(
// Returns true
x == z
); // Returns false

JavaScript Arrays

Square brackets are used to write arrays in JavaScript. Commas are used to separate array items. The first item in an array index is [0], the second is [1], and so on.

js
var fruits = ['apple', 'orange', 'mango', 'watermelon'];

JavaScript Objects

Curly braces are used to write JavaScript objects. Name: value pairs separated by commas are used to write object properties.

js
var person = { firstName: 'Johnny', lastName: 'Williams', age: 35, eyeColor: 'brown', Sex: 'male' };

Undefined

A variable with no value has the value undefined in JavaScript. In addition, the type isn't specified. By setting the value of any variable to undefined, it can be emptied. In addition, the type will be unknown.

js
var stadium; // Value is undefined, type is undefined.

Empty Values

Undefined has nothing to do with an empty value. An empty string has a type and a valid value.

js
var stadium = ''; // The value is "", the typeof is "string"

JavaScript Null

Null means "nothing" in JavaScript. It's intended to be something that doesn't exist in the first place. Unfortunately, the data type null in JavaScript is an object. This can be seen as a JavaScript flaw. Setting an object to null will also empty it.

js
var person = { firstName: 'Johnny', lastName: 'Williams', age: 35, eyeColor: 'brown', sex: 'male' };
person = undefined; // Now both value and type is undefined

Primitive Data

A primitive data value is a single data value with no other characteristics or methods. The primitive types that the typeof operator can return are:

  • string
  • number
  • boolean
  • undefined

Complex Data

One of two complex types can be returned by the typeof operator:

  • function
  • object

For objects, arrays, and null, the typeof operation returns "object." For functions, the typeof operator does not return "object."

The typeof Operator

To determine the type of a JavaScript variable, use the typeof operator in JavaScript. The typeof operator returns a variable's or expression's type:

js
typeof ''; // Returns "string"
typeof 'Johnny'; // Returns "string"
typeof 'Johnny Willams'; // Returns "string"
js
typeof 0; // Returns "number"
typeof 314; // Returns "number"
typeof 3.14; // Returns "number"
typeof 3; // Returns "number"
typeof (3 + 4); // Returns "number"

Contrast Bootstrap UI Kit

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

Related Posts