Yogesh Chauhan's Blog

JavaScript Data Types and Data Structures Things to Remember

in JavaScript on May 2, 2020

Don’t like reading? Watch the Part 1 in video instead!

JavaScript variables can hold many data types: numbers, strings, objects and more.

JavaScript has dynamic types. This means that the same variable can be used to hold different data types.

JavaScript is a loosely typed or a dynamic language. Variables in JavaScript are not directly associated with any particular value type, and any variable can be assigned (and re-assigned) values of all types. 

Programming languages that allow such things are called “dynamically typed”, meaning that there are data types, but variables are not bound to any of them.

String

When adding a number and a string, JavaScript will treat the number as a string.

Strings are written with quotes. You can use single or double quotes. You can use quotes inside a string, as long as they don’t match the quotes surrounding the string.

Unlike some programming languages (such as C), JavaScript strings are immutable. This means that once a string is created, it is not possible to modify it. However, it is still possible to create another string based on an operation on the original string.

For example: A substring of the original by picking individual letters or using String.substr(). A concatenation of two strings using the concatenation operator (+) or String.concat().

JavaScript evaluates expressions from left to right. Different sequences can produce different results.

Don’t like reading? Watch the Part 2 in video instead!

Number

JavaScript has only one type of numbers. Numbers can be written with, or without decimals. 

Extra large or extra small numbers can be written with scientific (exponential) notation.

Although a number often represents only its value, JavaScript provides binary (bitwise) operators. These bitwise operators can be used to represent several Boolean values within a single number using bit masking.

However, this is usually considered a bad practice, since JavaScript offers other means to represent a set of Booleans (like an array of Booleans, or an object with Boolean values assigned to named properties). Bit masking also tends to make the code more difficult to read, understand, and maintain.

The number type represents both integer and floating point numbers. There are many operations for numbers, e.g. multiplication *, division /, addition +, subtraction -, and so on.

Besides regular numbers, there are so-called “special numeric values” which also belong to this data type: Infinity, -Infinity and NaN.

Doing maths is “safe” in JavaScript. We can do anything: divide by zero, treat non-numeric strings as numbers, etc.

The script will never stop with a fatal error (“die”). At worst, we’ll get NaN as the result.

BigInt

In JavaScript, the “number” type cannot represent integer values larger than 253 (or less than -253 for negatives), that’s a technical limitation caused by their internal representation.

That’s about 16 decimal digits, so for most purposes the limitation isn’t a problem, but sometimes we need really big numbers, e.g. for cryptography or microsecond-precision timestamps.

The BigInt type is a numeric primitive in JavaScript that can represent integers with arbitrary precision.

With BigInts, you can safely store and operate on large integers even beyond the safe integer limit for Numbers.

You can use the operators +, *, -, **, and % with BigInts—just like with Numbers. A BigInt is not strictly equal to a Number, but it is loosely so. A BigInt behaves like a Number in cases where it is converted to Boolean: if, ||, &&, Boolean, !.

BigInts cannot be operated on interchangeably with Numbers. Instead a TypeError will be thrown.

Booleans

Booleans can only have two values: true or false. Booleans are often used in conditional testing.

Arrays

JavaScript arrays are written with square brackets. Array items are separated by commas. Array indexes are zero-based, which means the first item is [0], second is [1], and so on.

Objects

JavaScript objects are written with curly braces {}. Object properties are written as name:value pairs, separated by commas.

In JavaScript, objects can be seen as a collection of properties.

With the object literal syntax, a limited set of properties are initialized; then properties can be added and removed.

Property values can be values of any type, including other objects, which enables building complex data structures.

Properties are identified using key values. A key value is either a String or a Symbol value.

There are two types of object properties which have certain attributes: The data property and the accessor property.

Data property Associates a key with a value and Accessor property Associates a key with one of two accessor functions (get and set) to retrieve or store a value.

A JavaScript object is a mapping between keys and values.

Keys are strings (or Symbols), and values can be anything. This makes objects a natural fit for hashmaps.

undefined

In JavaScript, a variable without a value, has the value undefined. The type is also undefined.

Any variable can be emptied, by setting the value to undefined. The type will also be undefined.

An empty value has nothing to do with undefined. An empty string has both a legal value and a type.

null

In JavaScript null is “nothing”. It is supposed to be something that doesn’t exist. Unfortunately, in JavaScript, the data type of null is an object. You can consider it a bug in JavaScript that typeof null is an object. It should be null. 

You can empty an object by setting it to null. You can also empty an object by setting it to undefined. In JavaScript, null is not a “reference to a non-existing object” or a “null pointer” like in some other languages.

undefined and null are equal in value but different in type.

Don’t like reading? Watch the Part 3 in video instead!

primitive values

A primitive data value is a single simple data value with no additional properties and methods.

typeof

You can use the JavaScript typeof operator to find the type of a JavaScript variable. The typeof operator returns the type of a variable or an expression.

The typeof operator can return one of these primitive types: string, number, boolean, undefined. 

The typeof operator can return one of two complex types: function or object. The typeof operator returns “object” for objects, arrays, and null. The typeof operator does not return “object” for functions. The typeof operator returns “object” for arrays because in JavaScript arrays are objects.

Functions are regular objects with the additional capability of being callable.

Arrays are regular objects for which there is a particular relationship between integer-key-ed properties and the length property. 

Typed Arrays are new to JavaScript with ECMAScript 2015, and present an array-like view of an underlying binary data buffer.

The only valuable purpose of typeof operator usage is checking the Data Type. If we wish to check any Structural Type derived from Object it is pointless to use typeof for that, as we will always receive “object”. The indeed proper way to check what sort of Object we are using is to use an instanceof keyword. But even in that case there might be misconceptions.

Symbols

Symbols are new to JavaScript in ECMAScript 2015.

A Symbol is a unique and immutable primitive value and may be used as the key of an Object property.

In some programming languages, Symbols are called “atoms”.

New data structures

These data structures, introduced in ECMAScript Edition 6, take object references as keys.

Set and WeakSet represent a set of objects, while Map and WeakMap associate a value to an object.

The difference between Maps and WeakMaps is that in the former, object keys can be enumerated over. This allows garbage collection optimizations in the latter case. 

Maps and WeakMaps make it easy to privately bind data to an object.

JSON

JSON (JavaScript Object Notation) is a lightweight data-interchange format, derived from JavaScript, but used by many programming languages. JSON builds universal data structures.

Sources


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
The basics of @import rule in SCSS (Sass)SCSSA Quick Comparison of JOIN and Subquery in SQLSQL/MySQLIN Operator in PostgreSQLPostgresWhat is Prototypal Inheritance in JavaScript?JavaScriptHow to include CSS and JavaScript files in your WordPress plugin?WordPressJavaScript String fromCharCode() MethodJavaScript