Objects in JavaScript

Basics of Objects

Field notes while going through the JavaScript Roadmap

Photo by Luca Bravo on Unsplash

What is an Object?

An Object in JavaScript is a data type that stores a collection of properties in key-value pairs. Each key-value pair is used to define characteristics of any arbitrary item.

The key of an Object must be a string, whereas the value can be of any data type (including another object, or function — also known as a method).

Example:

• A pen has several properties such as colour, brand, material, etc.

let pen = {
  colour: "black",
  brand: "Pilot",
  material: "metal"
}

How can we create objects?

There are two ways which we can do this:

1. Create an object via the constructor

let user = new Object();

2. Using the object literal syntax

let user = {};

How can we assign a property in an object?

There are two ways we can assign a property to an object:

1. Dot syntax

let user = {};

user.age = 25;

2. Square brackets

let user = {};

user["age"] = 25;

How can we extract a property in an object?

There are two ways we can extract a property in an object:

1. Dot syntax

let user = {
  age: 25,
  name: "Jane"
}

console.log(user.name); // Output: "Jane"

2. Square brackets

let user = {
  age: 25,
  name: "Jane"
}

console.log(user["name"]); // Output: "Jane"

How to delete a property in an object

delete user.age

Check if a key exists in an object

console.log("name" in user);

// Output: true

How to loop through keys / values

To extract the keys:

let user = {
  age: 25,
  name: "Jane"
}

user.surname = "Doe";

for (let prop in user) {
  console.log(prop);
}

// Output:
// age
// name
// surname

To extract the values:

let user = {
  age: 25,
  name: "Jane"
}

user.surname = "Doe";

for (let prop in user) {
  console.log(user[prop]); // Ref the object and use the keys to extract
}

// Output:
// 25
// "Jane"
// "Doe"

Can objects be compared?

Objects are mutable, which means they are addressed by reference, not by value.

So if you compared two objects of the same value, they will not be considered equal.

const fruit = { name: "apple" };
const fruitbear = { name: "apple" };

fruit == fruitbear; // Output: false
fruit === fruitbear; // Output: false

But if you compared the reference of the object, they will be considered equal.

const fruit = { name: "apple" };
const fruitbear = fruit

fruit == fruitbear; // Output: true
fruit === fruitbear; // Output: true

What is the typeOf operator?

The typeOf operator is used to find the data type of any JavaScript variable.

console.log(typeof 42); // number

console.log(typeof "hello"); // string

console.log(typeof true); // boolean

console.log(typeof undeclaredVariable); // undefined

Built-in Objects

Also known as “global objects”, these are built into the JavaScript specification and can be accessible in the global scope.

Math

The Math object has methods that help perform complex mathematic operations

Properties: SQRT2 , PI

Methods: max() , min() , abs() , round()

Date

The Date object is a data type which can be manipulated to set the year, month, day, hour, minute, second and millisecond.

Methods: Date() , getHours() , setDate() , toDateString()

String

The String object is used to work with a series of characters

Properties: length

Methods: replace() , toUpperCase() , indexOf() , concat()

RegExp

The Regular Expression object is used to validate a character pattern

Properties: lastIndex , multiline , unicode

Methods: exec() , test() , toSource() , toString()

Object

The Object object stores a variety of keyed collections and more complex entities. It is used to build and manipulate objects

Methods: entries() , keys() , values()