YogeshChauhan.com
JavaScript Data Types and Data Structures Things to Remember
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

dreamhost

Leave a Reply

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to set opacity or transparency using CSS? #3 Pagination in CSS with multiple examples #4 How to make HTML form interactive and using CSS? #5 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

Mar 5 How to create flickering text using CSS? Mar 4 How to use data-* Attributes in HTML? Mar 4 The substr() method in JavaScript and how it’s different from substring() Mar 4 A complete guide to add responsive YouTube videos using HTML and CSS Mar 3 How to embed YouTube or other video links in WordPress? Mar 3 How to change the Login Logo in WordPress?

You might also like these

How to get start index and end index (as int) of substring in Swift?SwiftUnary Operators in JavaScriptJavaScriptHow to change HTML content on click using JavaScript?JavaScriptHow to get category name using post id in WordPress?WordPressCreate a responsive pricing table using simple HTML and CSSCSSA Quick Guide to Object-Oriented Programming in PHPPHP