Object Data Types in JavaScript
Like any other programming language, JavaScript supports multiple data types. Understanding these types and the
different operations you can perform on them is essential to coding effectively with JavaScript.
JavaScript Data Types
The data types supported by JavaScript fall into two categories: primitive and object types. After introducing some
key concepts about typing in JavaScript and an overview of primitive data types in the last post, I introduce object
data types in this post.
Object Data Types
Object types are containers that hold collections of values of primitive types or more complex entities composed of
object types. Object types are mutable and are referenced by identifiers. There are eight object types in JavaScript,
which I present in the two tables below.
1
In the first table, I briefly describe the type, the mechanism to create it, some main methods you can apply to it, an
example, and the result of its execution.
In the second table, I resume the way you can iterate over these types with some examples. Let’s note that I consider
only the types that we iterate over. I will exclude the others that are not naturally iterable.
Object Data Types in JavaScript: Creating and Main Methods
Type Description Creating Main Methods Code Snippet Code Output
Object - Container for - Using object literal: - Add or update a property: let employee = { Marie
multiple values let obj = {key1:value1, [Link] = value firstName: 'Marie', marie@[Link]
- Collection of key2:value2, ...}; lastName: 'Hitman', Hitman
key-value pairs - Delete a property: 26
- Objects can have - Using Object constructor: delete [Link]; email:"marie@[Link]", 5000$
methods let obj = new Object(); age: 26,
obj.key1 = value1; - Copy an object’s salary:5000,
obj.key2= value2; properties to another: getSalary: function() {
... [Link](); return [Link] + '$';
}
- Using a class: };
2
class ObjClass { [Link]([Link]
constructor(val1, val2, ..) { ame);
this.property1 = val1; [Link]([Link]
this.property2 = val2; );
... [Link](employee['lastN
} ame']);
} [Link](employee['age'])
let myObj = new ;
ObjClass(value1, value2, ...); [Link]([Link]
ary());
Array - Ordered - Using literals: Access an element with an let nums = [45, 23, -80, 12]; Quadruples of each
collection of let myArray = [elem1, index: let element = element in : (4) [45,
elements elem2, ...]; myArray[index]; let result = []; 23, -80, 12] are
accessible using [Link]((num) => { (4) [4100625,
indexes - Using Array constructor: Add an element: [Link](num ** 4); 279841, 40960000,
- Dynamically let myArray = new [Link](element); }); 20736]
sized Array(elem1, elem2, ...);
Remove an element from [Link]('Quadruples of
- From a set: the beginning: each element in :', nums,
let myArray = [Link](); 'are', result);
[Link](mySet);
Remove an element from
the end:
[Link]();
3
Update an element:
myArray[index] =
newElement
Function Block of code to - Using function definition: function [2025, 529, 6400,
perform a specific function myFunction(p1, ..,pn) applyExpArray(arr, n) { 144]
task {
//code of the function let result = [];
} [Link]((num) => {
[Link](num ** n);
});
return result;
}
let arr = [45, 23, -80, 12];
[Link](applyExpArray(
arr, 2));
Date One moment in - Using Date constructor with - Get date component (year, let myDate Sat Apr 04 2020
time or without parameter: month, day, etc.): = new Date("04.04.2020"); [Link]
let myDate [Link](), .. [Link](myDate); GMT+0200
= new Date(dateString); [Link]("Year:", (Central European
let now = new Date(); - Set date component (year, [Link]()); Summer Time)
month, day, etc.): [Link]("Month:", Year: 2020
[Link](myYear [Link]()); Month: 3
4
); .. [Link]("Day:", Day: 4
[Link]());
Map - Collection of - Using Map constructor: - Add a new key-value pair: let personMap = new Marie
key-value pairs let map = new Map(); set(key, value) Map(); Jack
- Keys should be [Link](100, false
unique - Get the value associated to 'Marie'); 3
- Keys can be of the key: get(key) [Link](200, 'Bob');
any type [Link](300, 'Jack');
- Remove the key-value pair: [Link]([Link](
delete(key) 100));
[Link]([Link](
- Check if a key exists: 300));
has(key) [Link]([Link](
400));
- Remove all key-value pairs: [Link]([Link]
clear() );
- Get the number of the
key-value pairs: size
Set Unordered - Using Set constructor: - Add a new element: let carSet = new Car1: BMW
collection of let mySet = new Set([elem1, add(element) Set(['BMW', 'Ferrari', Car2: Ferrari
elements where elem2,..]); 'Toyota', 'Porsche']); Car3: Toyota
5
each element is - Check if an element exists: let index = 1; Car4: Porsche
unique - From an array: has(element) for (let car of carSet) { Size of carSet: 4
let myArray = [elem1, [Link]('Car' + index Size of carSet: 0
elem2,..]; - Remove an element: + ':', car);
let mySet = new Set(myArray); delete(element) index++;
}
- Remove all elements: [Link]('Size of carSet:',
clear() [Link]);
[Link]();
- Get the number of [Link]('Size of carSet:',
elements: size [Link]);
WeakMap - Similar to Map - Using WeakMap constructor: - set(key, value) let key1 = {id: 100}; {name: 'Marie
- A Key must be let weakMap = new - get(key) let key2 = {id: 200}; Hitman', age: 26}
an object. WeakMap(); - delete(key) let p1 = {name: 'Marie Marie Hitman
- A Key is weakly - has(key) Hitman', age: 26}; 40
referenced: it is let p2 = {name: 'John
garbage collected Wayne', age: 40};
and its entry will let personMap = new
be removed, when WeakMap();
there is no [Link](key1, p1);
reference to it. [Link](key2, p2);
[Link]([Link](
key1));
[Link]([Link](
key1).name);
6
[Link]([Link](
key2).age);
WeakSet - Similar to Set - Using WeakSet constructor: - add(element) let perWeakSet = new true
- An element must let weakSet = new WeakSet(); - has(element) WeakSet(); false
be an object - delete(element) let person1 = { firstName: true
- An element is 'Joe', firstName: 'Doe'};
weakly referenced let person2 = { firstName:
'Marie', firstName:
'Hitman'};
[Link](person1);
[Link](person2);
[Link]([Link]
(person1));
[Link](person1)
;
[Link]([Link]
(person1));
[Link]([Link]
(person2));
7
Object Data Types in JavaScript: Iteration
Type Iterating Over Code Snippet Code Output
Object - Iterate over keys using for...in loop : for (let key in employee){ firstName = Marie
for (let key in myObj) { [Link](key, "=", lastName = Hitman
[Link](key + ': ' + myObj[key]); employee[key]) email =
} } marie@[Link]
age = 26
- Iterate over [Link]() using forEach: salary = 5000
let keys = [Link](myObj); getSalary = ƒ () {
[Link](key => { return [Link] +
[Link](key + ': ' + myObj[key]); '$';
}); }
- Iterate over [Link]() using forEach:
let entries = [Link](myObj);
[Link](([key, value]) => {
[Link](key + ': ' + value);
});
Array - Using for loop: for (let num of nums) { Double of: 45 is 90
for (let i = 0; i < [Link]; i++) { [Link]('Double of:', num, Double of: 23 is 46
[Link](myArray[i]); 'is', num*2); Double of: -80 is -160
8
} } Double of: 12 is 24
for (let index in nums) { Element 45 is at the
- Using for...of loop: [Link]('Element', index: 0
for (let value of myArray) { nums[index], 'is at the index:', Element 23 is at the
[Link](value); index); index: 1
} } Element -80 is at the
index: 2
- Using forEach method: Element 12 is at the
[Link](function(value) { index: 3
[Link](value);
});
- Using map method:
[Link](value => { [Link](value); });
- Using for...in Loop:
for (let index in myArray) {
[Link](myArray[index]);
}
Map - Iterating over keys using for..of loop: for (let value of Marie
for (let key of [Link]()) { [Link]()) { Bob
[Link](key); [Link](value); Jack
} } 100: Marie
200: Bob
9
- Iterating over values using for..of loop: [Link]((value, key) 300: Jack
for (let value of [Link]()) { => {
[Link](value); [Link](key + ':', value);
} });
- Iterating over entries using for..of loop:
for (let [key, value] of [Link]()) {
[Link](key, value);
}
- Iterating over keys and entries using forEach:
[Link]((value, key) => {
[Link](key, value);
});
Set - Using for..of loop: let citySet = new Set(['Vienna', Vienna
for (let item of setName) { 'Salzburg', 'Graz', 'Klagenfurt', Salzburg
[Link](item); 'Innsbruck']); Graz
} Klagenfurt
[Link]((city) => { Innsbruck
- Using forEach: [Link](city);
[Link]((value) => { });
[Link](value);
});
10
Found it useful?
Follow for more:
[Link]/in/noura-boudiaf-115aa845
11
