Objects in JavaScript (1)

In this post, I’ll be sharing about Objects in JavaScript. The Object-Oriented Programming (OOP) paradigm like every other programming language can be used through creating Objects in JS. In OOP, we tend to model real-life entities as an object that has both properties and values. I won’t be going into the details of the core concepts behind OOP since this is just an introductory article, we will just stick with the subject.

I really have to say this, my first time writing a line of JavaScript looked like this:

var name = "Samuel";
function printName(name){
 if(name){
    // do something 
    console.log("Your name is: "+ name);  
  }
}
printName(name);

So this is a procedural approach to writing codes and trust me, that was a badly written line of code🤦‍♂️.

What are Objects in JavaScript?

An object is a collection of properties, and property is an association between a name (or key) and a value. A property’s value can be a function, in which case the property is known as a method. (a)

It is a container of a named(property) and value in a pair pattern. It can also accommodate methods within its properties. There are predefined/built-in objects in JavaScript, a common one is the Window Object that is a global object which lives within the browser. see image below

Google Chrome Console

However, we can create our own custom objects. We can create objects easily with different approaches which syntactically are okay with the JavaScript engine. Let's see the following ways objects can be created

// Using Object literal
   let Obj = {}
// Using the new operator
   Obj = new Object();
// Using object.create() Method
   Obj = object.create(object.protoype)
// Using Factory function
   function createObj(property_1, property_2, ...){
   return {
      property_1: value_1,
      property_2: value_2
    }
}
   
   let newObject = createObj();  // creates a new object

// Using Constructor Function
   function CreateObject() {
     this.property_1 = value_1,
     this.property_2 = value_2
  }
  let newObject = new CreateObject(property_1, property_2) 

By using any of the methods above the JS engine create a new instantiate of an object.

Yay! you can now create an object in JavaScript. We can then go to create an object to improve on the line of code written above. Say we create a Person object with properties and values12

let Person = {
  firstname: "John",
  surname: "Doe",
  printName: function (){
   console.log(`Your firstname is ${this.firstname} and surname is 
               ${this.surname}`)
  }
}

we already added properties and their values to the Person object. Another to do this is to do something like this using the dot notation

let Person = {};
Person.firstname = "John";
Person.lastname = "Doe";
Person.printName = function (){
   console.log(`Your firstname is ${this.firstname} and surname is 
               ${this.surname}`)
  }

The above object is the same as the first one we created, it is just another approach to populating our object with data.

Assessing Properties

Now that the student object has been created, actual values of the properties might be needed immediately from another part of your code.

// using the bracket notation
Person['firstname']
console.log(Person['firstname']) // John
// using the dot notation
Person.firstname
console.log(Person.firstname) // John

Object Extensions

• Object.defineProperty: It is used to configure our properties and set values on an existing object to meet some certain criteria. It takes the name of the object we want to attach a property, then the property-name and an object that contains certain properties.

Value: It is used to set the value of the of the property we want to create

Writable: It is used to set the value to writable i.e can be constant or not

Enumerable: It is used to set the property to either be iterable or not.

Configurable: It helps to specify if the property to be configurable or not.

Object.defineProperty(objectName, ‘property’, {
     value: “value”,
     writable: true,
     enumerable: true,
     configuable: true
})

Let's see an example from our Person object by creating a property Age on it using object.defineProperty.

Object.defineProperty(Person, ‘age’, {
value: 25,
writable: true,
enumerable: true,
configuable: true
});
console.log(Person)// 
{
age: 25,
firstname: "John",
surname: "Doe",
  printName: function (){
   console.log(`Your firstname is ${this.firstname} and surname is 
               ${this.surname}`)
  }
}

• Object.keys: It returns an array of the properties within an object. Let’s see an example

// Still using our Person object
Object.keys(Person) // returns ["firstname", "surname", "printName", "age"]

With these, we are going to wrap it up here. I believe you can get started with the knowledge you have gained. watch out for the second part of this series where I’ll be diving deeper into OOP in JavaScript and some new features and extensions of Objects in JavaScript. Thanks for reading.