Objects in JavaScript

An Object is a fundamental non-primitive data type in JavaScript used to store multiple collections of data. If you’re not sure what the basic data types in JavaScript are then its time to do a Google search and find some additional learning resources.

If you need a place to start make sure you check out this or another article and come back. Tania Rascia - JavaScript Day One So much great material! Don't forget to bookmark it!!

Objects are a collection of key : value pairs. These pairs give us the ability to store and access related data easily. Objects can have properties (our key/value pairs) and or methods that belong to the ‘Object Instance’.

Why do we use Objects in programming? What are they good for?

Objects in programming can often be compared to objects in real life. Now we are only using JavaScript syntax so how do we do that? Think of us using the code to describe the object. Using properties (key: value) we can describe characteristics of an object, like a ball for example might have a color of green ( var ball_obj = { color: ‘green’ } ). And methods are functions that are a part of (defined within the function scope) an object. Methods can be any function that we define within the object body but tend be ‘actions’ that an object can do or does to another object. Using methods is a way in which we can have the instance objects that we create, interact with each other.

Create an Object

Let’s look at how we can create and define Objects: There are two main ways we do this using object literal notation or object constructor notation.

Define an object literal:

let obj = {
    // define properties and methods
}
// Example object
const object_name = {
      key1: value1,
      key2: value2,

      methodName: function() {
       // code logic
      }
}

Define an object constructor:

let obj_constructor = new Object({
    // define properties and methods
})

// Example object
const obj_constructor = new Object({
      key1: value1,
      key2: value2
})

Object literal notation tends to be the preferred method among developers, and mostly what you will see when reading JavaScript resources or learning from videos. If you’re coming from a background with another language you may notice a resemblance of the object constructor notation and how you define a Class. You would be correct, but let’s save that for when we talk about Classes in JavaScript.

Accessing Object Properties (and Methods)

In JavaScript we have two main methods of accessing data or calling methods within objects.

• Dot notation .
• Bracket Notation  [ ]

$> obj.key1   // Output  “value1”
$> obj[‘key2’]   // Output  “value2”

You can always access object methods by calling or invoking them using the same dot notation method.

$> obj.methodName()    // Note  Don’t forget the ( ) at the end of the methodName, otherwise you won’t be invoking or calling the function when you want it to run!

Adding and Modifying Object Properties

If we want to add a new property to our object we can assign (using the = assignment operator) a new key : value by using either dot or bracket notation.

// Create an Object variable named ‘box’ and initialize it with a shape property
let box = {
    shape: ‘rectangular’
};

// Add a property using Dot Notation
box.color = ‘blue’;

// Add a property using Bracket Notation
box[‘size’] = ‘large’;

console.log(box); 
// Output  box = {shape: ‘rectangular’, color: ‘blue’, size: ‘large’}

Removing Object Properties

The delete operator removes a property or method from an object.

// Using Dot Notation
$> delete obj.color;

// Using Bracket Notation
$> delete obj[‘size’];

console.log(obj);
// Output  obj = {shape: ‘rectangular’}

Beginnings of this in JavaScript

The 'this' keyword in JavaScript gives many a JavaScript developer a headache trying to remember all the properties and rules to using this. So, we are just going to start with how they apply to our basic JS objects. To access properties of our object within another property or more often within an object method we use the this keyword followed by a dot and the property name or key.

Let’s look at some code to get a better understanding of 'this' :

// Create a USER object with a first and last name properties and a method that prints out the user’s full name
let user = {
    first_name: ‘Bingo’,
    last_name: ‘Chicken’,

    fullname: function( ) {
         console.log(‘User is: ‘ + this.first_name + ‘ ‘ + this.last_name)
    }
};

$> user.fullname( )   // Output  ‘User is: Bingo Chicken’

The 'this' in the above code refers to the object instance, in our case the variable user, and the respective property that is being accessed. You might hear that this is bound to the object, or object instance.

When using this inside an object definition it refers to the current object, in our case the variable user.

Hopefully this article on Objects in JavaScript was useful to you. Thanks for reading, until next time!