JavaScript Data Types

JavaScript Data Types

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article


Values that have data types but are not explicitly indicated with variables are called untyped languages. In JavaScript, whether it is a number or string, or any other data type, only the var let or const keyword is used for declaration.

JavaScript

var name = "Bello";

Untyped languages do not need a variable to be declared with a data type. They are also called dynamically typed languages

Examples of other untyped languages besides JavaScript are Python, Perl, Ruby, etc.

Other languages like Java, C#, C++ are static typed.

A statically typed language needs a variable to declared with a data type

In Java, a declared variable will look like shown below:

Java

String name = "Bello"; // "Bello"

There are 8 data types in JavaScript:

  • Number
  • BigInt
  • String
  • Boolean
  • Null
  • Undefined
  • Symbols
  • Objects

Number

The number type is either an integer or a floating-point number.

Let's perform a mathematical operation below:

let numb = 23; // integer
let score = numb; 

const length = 12.5; // floating-point
console.log(12.5 / 0.5); // 25 => integer

In the example above, there are two obvious observations.

An Integer number contains no decimal, and floating-point numbers are numbers with a decimal

Other numbers are either in infinity or NaN.

Infinity is a special value that is greater than any number.

console.log(1 / 0); // Infinity

Or reference it directly:

console.log(Infinity); // Infinity

Note: Number.POSITIVE_INFINITY is Infinity and Number.NEGATIVE_INFINITY is -Infinity.

Number.POSITIVE_INFINITY; // Infinity
Number.NEGATIVE_INFINITY; // -Infinity

NaN (Not a Number) is an incorrect or an undefined mathematical operation

console.log(Infinity / Infinity); // NaN
console.log("string" / 2); //NaN
console.log(NaN + NaN); // NaN

Number type limit is 253 - 1. Alt Text

That is Number type maximum number is 9,007,199,254,740,991 and minimum number is -9,007,199,254,740,991

Recall the Number limits with the code below:

Maximum Number

Number.MAX_SAFE_INTEGER; // 9007199254740991

Minimum Number

Number.MIN_SAFE_INTEGER; // -9007199254740991

BigInt

Numbers greater than the maximum safe number or lesser than the minimum safe number, the BigInt data type can be used. It was introduced in JavaScript ES10 (ECMAScript 2019).

const bigInt = 1234567890123456789012345678901234567890n;

The BigInt data type number can also be treated as a regular number by appending n to it.

1n + 2n; // 3n
7n / 2n; // 3n

Notice BigInt 7n / 2n equals 3n not 3.5 because JavaScript always rounds down such BigInt data division to the nearest figure.

The code snippet above can be rewritten as shown below:

console.log( BigInt(1) + BigInt(2) ); // 3n
console.log( BigInt(7) / BigInt(2) ); // 3n

String

A string is a text surrounded by quotation marks. The quotation marks can either be 'single quotes', "double quotes", or ‵backticks quotes‵

console.log('single quotes'); // single quotes
console.log("double quotes"); // double quotes
console.log(`backtick quotes`); //backtick quotes

For single or double quotes, we have:

const firstName = 'Osagie';
const lastName = 'Bello';

const fullName = 'My name is' + firstName + ' ' + lastName + '.'
console.log(fullName); // My name is Osagie Bello.

There's practically no difference between single quotes and double-quotes. For backtick quotes, it is purposely used for template literal. Template literal was introduced in ES6 (ECMAScript 2015).

The above code snippet can be rewritten as shown below:

const firstName = 'Osagie';
const lastName = 'Bello';

const fullName = `My name is ${firstName} ${lastName}.`
console.log(fullName); // My name is Osagie Bello.

The variable in between the curly braces above and below are expressions.

const calc = 2 + 5 * (22 / 3);
console.log(`The answer is ${calc}!`); 
// The answer is 38.666666666666664!

image.png


Boolean

Boolean is a logical type that is either true or false.

const nameFieldChecked = true;
const ageFieldChecked = false;

A Boolean value is returned during comparison:

const isGreater = 5 > 3;
console.log(isGreater); // true

The Boolean function can be used to check if a data is true or false

Boolean(""); // false
Boolean("string"); // true
Boolean(1); // true
Boolean(0); // false
Boolean(undefined); // false
Boolean(NaN); // false
Boolean(null); // false
Boolean(502); // true

More of Boolean later.


Null

Null means nothing or empty value. It makes a type on its own and doesn't point or refer to a non-existing variable or object.

const age = null;

The code above means that age is unknown.


Undefined

A variable declared without assigning it to a value is created as an undefined value.

const myAge; 
const yourAge = undefined;

console.log(myAge); // undefined
console.log(yourAge); // undefined

Object

All the data types mentioned above are all primitive data types. Objects are non-primitive data because they can hold as much primitive data type to a variable.

List

An object can be an array. An array is also called a list. The list uses zero-based indexing.

const randomStuff = [ 'brush', 23, null, undefined, false ];
console.log( randomStuff[2] );

array.png

More on array later.

Object

Just like a list, an object can contain as many primitive data types as possible.

const obj = { name: 'Bello', age: 27, hobby: 'coding' };
console.log( obj[name] ); // Bello

object

The name, age, hobby are called the object property names or object keys while Bello, 27, coding are called the object property values or simply object values.

More on objects later.


Symbol

The symbol is also a primitive data type used to create unique identifiers for objects.

const obj = {};
const sym = Symbol();
obj[sym] = 'foo';
obj.bar = 'bar';
console.log(obj); // { bar: 'bar', [Symbol()]: 'foo' }
console.log(sym in obj); // true
console.log( obj[sym] ); // foo
console.log( Object.keys(obj) ); // ['bar']

The example above may not make sense, but more of the symbol later.


The typeof Operator

It is not part of the data types but returns a data type as a result.

It supports two syntaxes:

typeof value

typeof(value)
typeof undefined; // "undefined"

typeof 34; // number

typeof 3n; // bigint

typeof true; // boolean

typeof "egg"; // string

typeof Symbol("id"); // symbol

typeof Math; // object 

typeof null; // object

typeof alert; // function

typeof null as an object is a flaw in JavaScript. It shouldn't be an object.

typeof alert as a function is convenient in practice.

They are common mistakes in JavaScript.


Buy me a Coffee


TechStack | Bluehost

  • Get a website with a free domain name for 1st year and a free SSL certificate.
  • 1-click WordPress install and 24/7 support.
  • Starting at $3.95/month.
  • 30-Day Money-Back Guarantee.

 
Share this

Impressum

TechStack Media was launched in the year 2020 to make the learning of web technologies easier and more fun.

My name is Bello Osagie, I am the founder of TechStack, and my focus is to give in-depth, senior-level knowledge of the course through a step-by-step approach. You will learn HTML, CSS, JavaScript etc.

You can find my posts on Dev.to, Medium, Hashnode, Hackernoon, and Blogspot

The approach is to first start with the basics, then advance to more topics. Lots of practical examples are added to make learning more easier. TechStack Media also includes videos apart from content writing to make sure you understand all the concepts in a particular topic or course. Contents are frequently updated, so you do not miss out on the latest technology.

If you need a contact me on any of my social media or email:

For exclusive web technology tutorials, join my patron page.

Proudly part of