DEV Community: Waseem Mansour

JS Objects, Prototypes, and Classes Simplified (Part 2)

Waseem Mansour — Sun, 27 Dec 2020 21:55:16 +0000

Let's continue our journey with Part 2 of this series:

So far we used object literal and constructor functions to create objects. Actually, there's another way that was introduced in ECMA Script 5, Object.create() method.

Object.create()

This method accepts two parameters

1st param is (mandatory): Object prototype (an object OR null).
2nd param is (optional) : PropertiesObject (a set of property descriptors)

We won't focus on what a prototype is, for now, let's just say that it's something the object to be created, will be based on.

What's really interesting now is the property descriptors? What is that?

As the name implies, It describes or gives us information about the property at hand.

Let's clarify this with an example:

let person = Object.create(
  {}, // prototype
  {
    firstName: { // property name
      value: "Waseem", // property value
      writable: true, // property value can be overridden after creation or not
      enumerable: true, // is property accessible when the object’s properties are enumerated using the for...in loop or Object.keys() method.
      configurable: true, // does user has permission to change property descriptor, such as changing writable or enumerable.
    },
    lastName: {value: 'Mansour', writable: false, enumerable: false, configurable: true}
    // and another property and so on...
  }
);

If configurable is set to false, this can't be undone, we won't have the ability to change this property descriptor anymore, which can be helpful when you don't want anyone to change the recommended behavior of your object.

// because lastName property writable option is set to false,
// this line won't have any effect on its value
person.lastName = 'Adam';
console.log(person.lastName); // => Mansour;

// Listing all object's properties names (keys)
let personKeys = Object.keys(person); // returns array of object keys
console.log(personKeys); // => ["firstName"] 
// Because "lastName" enumerable is set to false,
// It's not listed in object's array of keys

Properties like firstName and lastName in the example above, are properties of a type called Data Properties.

The other type of object properties is Accessor Properties, which are functions executed when getting or setting a value.

Accessor descriptor for this type of properties differs from data properties descriptor.

They have get getter method and set setter method, instead of value and writable.

Let's add fullName property as Accessor property to the above example:

let person = Object.create(
  {}, // prototype
  {
    firstName: { // data property
      value: "Waseem",
      writable: true,
      enumerable: true,
      configurable: true
    },
    lastName: { // data property
      value: 'Mansour',
      writable: false,
      enumerable: false, 
      configurable: true
    },
    fullName: { // accessor property
      get() {
        return `${this.firstName} ${this.lastName}`;
      },
      set(value) {
        // Splitting full name to two strings using split method
        // & assign returned array of names to first and lastname
        // using destructuring.
        [this.firstName, this.lastName] = value.split(" ");
      },
      enumerable: false,
      configurable: true
    }
  }
);

// Setting fullName
// We use it as if it were a normal property, not a method
// Using assignment operator.
person.fullName = 'Magdy Mansour'; 

// Getting fullName
// The same, as if a normal property, not a method.
console.log(person.firstName); // => Magdy

What if we've already an object created with object literal.
How to view the descriptor for a specific property?

Let's find how to accomplish this the following method:
Object.getOwnPropertyDescriptor(objName, propertName);

let car = {
  brandName: 'BMW',
  model: '320i',
}

let brandNameDescriptor = Object.getOwnPropertyDescriptor(car, 'brandName'));
console.log(brandNameDescriptor); // => 
// {
//   configurable: true
//   enumerable: true
//   value: "BMW"
//   writable: true
// }

Object.defineProperty(obj, prop, descriptor)
This method will allow us to add a new property with descriptor or even modify an existing property descriptor.

Object.defineProperty(car, 'modelYear', {
  configurable: true,
  enumerable: true,
  value: 2020,
  writable: true
});

Before we end talking about property descriptors, there are other Object related methods that affect property descriptors.

Object.freeze() and Object.seal() methods.

Object.freeze(objToBeFrozen)
This will prevent adding or removing properties from the frozen object, was it data properties or accessor properties.
Data properties value cannot be changed and writable and configurable is set to false
Accessor properties will act as if it's working, but it's not.

Note that property values of type Object can still be changed unless it's frozen too.

Object.seal() definition on MDN, clarify how it is different from Object.freeze().

The Object.seal() method seals an object, preventing new properties from being added to it and marking all existing properties as non-configurable. Values of present properties can still be changed as long as they are writable.

With that said let's move on to the last section of this post.

How to list and access Objects properties?

Using for ... in loop:

let employee = {
  name: 'John',
  age: 32,
  isActive: true // assume this is not an enumerable property
};

// for in loop 
// will iterate over enumerable properties of this object.
// We can access both property key and value 

for (const key in employee) { // key variable name can be any name ;)
  // print object properties keys ( properties names ) to console.
  console.log(key); 

  // print object properties values to console.
  console.log(employee[key]); 
}
// Output: 
// => name
//    John
//    age
//    32

Using Object.keys(), Object.values(), and Object.entries() methods:

// Object.keys() => 
// returns array of properties keys
let keys = Object.keys(employee);
console.log(keys); // => ['name', 'age'];

// Object.values() => 
// returns array of properties values

let values = Object.values(employee);
console.log(values); // => ['John', 32];

// Object.entries() =>
// returns array of properties in [key, value] pair
let properties = Object.entries(employee);
console.log(properties); // => [['name', 'john'], ['age', 32]];

// * Because isActive is not enumerable property
// It's not listed in any of the above methods

And here we come to the end of this post.
Thank you for reading, please feel free to share with me your thoughts about this series so far.

See you in the next part of this series, keep practicing ;)

JS Objects, Prototypes, and Classes Simplified

Waseem Mansour — Sat, 19 Dec 2020 00:22:13 +0000

In this series, you will know what Objects are, how to create and use them, understand Prototypes and Inheritance, and finally working with Classes.

Objects

Let's begin with an intro about objects from MDN Docs:

JavaScript is designed on a simple object-based paradigm. An object is a collection of properties, and a 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 car is a simple example of an object, it has properties like brand name, model, color, condition, and methods like move forward, move backward, etc.
All of these properties are what define car characteristics as an object.

Creating Objects

Objects can be created in different ways using:

Object literal.
Constructor function.
Class

Object Literal

Simply declare a variable and assign its value to {}, and between these curly braces we add the properties in a key value pairs where key must be a string and value can be of any type e.g.

let person = {
  firstName: 'Waseem',
  lastName: 'Mansour',
  age: 36,
  isMarried: true,
  fullName: function() {
    return `${this.firstName} ${this.lastName}`;
  }
}

Now you can access any of the object's properties by its key name, using Dot Notation or Bracket Notation, in some cases with bracket notation only. Let's see how

// Dot Notation: 
// Object name followed by DOT followed by property name.
console.log(person.firstName); // => Waseem
console.log(person.fullName()); // => Waseem Mansour

// Bracket Notation: 
// Object name followed by [] and property name passed between
// brackets wrapped with single or double quotes
console.log(person['firstName']); // => Waseem 

// We can use a variable that holds value of property name
// Only Bracket notation valid when passing variables
let userAge = 'age';
console.log(person[userAge]); // => 36 

// Property name string that includes space, can't be accessed
// using Dot notation, so we use Bracket notation instead.
console.log(car.brand name); // Throw Error => Uncaught SyntaxError
console.log(car['brand name']); // => BMW

// Accessing nested properties
console.log(person.address.city); // => Alexandria
console.log(person['address']['city']; // => Alexandria

Due to the dynamic nature of JavaScript, we can add properties to object after creation.

let movieStar = {
  name: 'Tom Hanks',
}

movieStar.age = 64
console.log(movieStar.age); // => 64

Now let's assume we have another person e.g. Sara, and we will create another object to hold its information as we did before.

let personTwo = {
  firstName: "Sara",
  lastName: "Badr",
  age: 22,
  isMarried: false,
  fullName: function() {
    return `${this.firstName} ${this.lastName}`;
  }
}

You must have noticed that there's a repetition in both object's structure, and we only have two objects, what if we have 50 or maybe 1000 person objects more to be created. There's must be a way to optimize our code, and apply DRY principle.

Constructor Functions

The constructor Function's syntax is like any regular function, but with tiny differences, let's take a look at how to make a constructor function to help us create Person Objects that shares the same properties and methods:

// 1- Function name convention is to Capitalize first letter
function Person() {
  // properties to be assigned here. will leave it empty for now
}

// 2- Function execution must be preceded by "new" keyword
let waseem = new Person();

// What Happens under the hood:
// - "new" creates an empty object {}
// - "this" generated for us from function execution context
//   changed what it points to, to the new empty object created.
// - This function should not have a return statement
//   because it implicitly returns that object created
//   with all properties it may be attached to in function body.
console.log(waseem); // => Person {}

// Let's create the Person object properly now.
function Person(firstName, lastName, age, isMarried) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
  this.isMarried = isMarried;
}

// Create our person objects using Person constructor function
let waseem = new Person('Waseem', 'Mansour', 36, true);
let sara = new Person('Sara', 'Badr', 22, false);
console.log(waseem); 
//=> Person {firstName: "Waseem", lastName: "Mansour",
//   age: 36, isMarried: true}
console.log(sara); 
//=> Person {firstName: "Sara", lastName: "Badr",
//   age: 22, isMarried: false}

You may have noticed that I didn't add the fullName method to the Person constructor function, this was on purpose, I'll explain why in my next post of this series.

Hopefully, you should have learned a lot about Objects so far.
This is my first post on DEV.to, hope you found it informative and to the point.

Thanks for reading.