Objects - Introduction to Javascript Data Types - Part 2 🚗
What Are Objects and What Type of Objects Are There in Javascript?
📙 This article is part of the Javascript Deep Dive series.
Check out the first part: Primitives: Introduction to Javascript Data Types - Part 1 🐥
Objects 🚗
Everything that's not a primitive is an object in Javascript.
> typeof {x:1}
'object'
They are versatile and can store complex values.
Usually, in Computer Science, an object is an instance of a class. Javascript since ECMAScript 6 also has classes, but objects can be used without classes as well.
Objects are mutable, meaning that you can change their value.
Properties 🌶
In Javascript, objects can be seen as a collection of properties.
A property is identified by a key. The key is either a String or a Symbol.
Property values can be anything, a primitive or an other object. This allows the creation of complex structures.
By default a typical Javascript object inherits properties from the base javascript Object class and the methods from Object.prototype. The Object.prototype is initially empty but can be modified. After modifying, every new object will inherit the properties specified in the prototype.
Types of Objects 🌲
Altough when using typeof for anything other than primitives you will get object as the type, we can introduce a classification for them by their use case and functionalty.
Normal 🙂
Normal objects are simple key → value pairs.
var a = {x:1, y:2};
> console.log(a)
{ x: 1, y: 2 }
They are actually a natural fit for Hash maps.
Functions ⛏
Functions in Javascript are regular objects with the capability of being callable.
// A function that returns the sum of two variables
function sum(a, b) { // It has two parameters: a and b
return a + b;
}
> sum(2,3) // Calling the sum function with two arguments: a=2, b=3
5
An interesting thing is that when using typeof you will get the function type.
> typeof sum
'function'
The documentation specifies that function is an object that implements the [[Call]] attribute (Function object (implements [[Call]] in ECMA-262 terms))
More info about functions can be found here.
Date 📆
You can work with dates and times using the Date object.
> var date = new Date();
> date
2021-09-26T11:45:07.273Z
> typeof date
'object'
Arrays (Indexed Collections) 👈
Arrays are data structures that hold collections of items. They are basically list of elements.
An array is indexed, which means each element has an index associated with it and you can access the element using that index.
var arr = [10,20,30]; // An array with 3 elements. Indexes are from 0 to 2
> arr[0]
10
> arr[1]
20
> arr[2]
30
> arr[3]
undefined
You can create an array using the square brackets [ ] or using the Array class.
Javascript has some helper classes to simulate typed number arrays: Int8Array, Uint8Array, Int16Array, Float32Array and more.
More info about arrays can be found here.
Keyed Collections 🔑
A keyed collection holds elements in which each one has associated a key to it. You can access the element using the key.
Such collections are: Map and Set.
Map
Map is a collection of key → value pairs. It is an implementation of a hash table in Javascript. It's the successor of the classical curly bracket object used as a hash map.
// Old school
let a = {x:1};
// New school
let a = new Map();
a.set('x', 1);
The old school way will convert any key to String before storing the association.
The new way allows any type of keys, even objects.
The main functions are .set() and .get().
> var old = {};
> var key = {a:1}; // A key of type object
> old[key] = 10
10
> old
{ '[object Object]': 10 } // Key gets converted to string
> var otherKey = {b:1}
> old[otherKey] = 20
20
> old
{ '[object Object]': 20 } // The other key got converted to the same string => overwrite
> var neww = new Map();
> neww.set(key, 10);
Map(1) { { a: 1 } => 10 } // Key remains object
> neww.set(otherKey, 20);
Map(2) { { a: 1 } => 10, { b: 1 } => 20 } // The association works as expected
Map remembers the original order of insertion.
The type is object.
> typeof neww
'object'
More info about arrays can be found here.
See also WeakMap.
Set
Set is a collection of unique items. You can add an item to the Set only once.
The main functions are .add(), .has(), .delete().
> set.add(1);
Set(1) { 1 }
> set.add(1);
Set(1) { 1 }
> set.add(2);
Set(2) { 1, 2 }
> set.add("abc");
Set(3) { 1, 2, 'abc' }
> set.add("abc");
Set(3) { 1, 2, 'abc' }
Set remembers the original order of insertion.
The type is object.
> typeof set
'object'
More info about arrays can be found here.
See also WeakSet.
JSON 👱♂️
JSON or Javascript Object Notation is a data interchange format. It's easy to read and to work with.
let json = {
"a": 1,
"b": "xyz",
"c": ["one", "two"]
}
The type is object.
> typeof json
'object'
You can use the JSON built-in object to work with JSON related data.
The main functions are .parse() and .stringify().
More info here.
Standard Built In Objects
You can check the full list of the Javascript built-in classes and objects here: MDN Standard built-in objects.
Sources 📚
Reach Out 👋
Was this helpful for you? Let me know what you think in the comments.