DEV Community: Vaibhav Sharma

Object-Oriented JavaScript: Objects and their property types

Vaibhav Sharma — Fri, 10 Jun 2022 11:33:21 +0000

In modern times, the JavaScript stack is booming in the software development field. All companies like JS technologies like Node JS, Angular, React, Vue, Express, etc. So, today's life as a software developer is incomplete without JavaScript. Today we will discuss OOJS (Object-Oriented JavaScript) main concept: Objects.

Introduction :

Object-oriented languages are identified through their use of classes to create multiple objects that have the same properties and methods. JavaScript is slightly different from other class-based programming languages because, in ES5, there was no concept of the class keyword in JavaScript. ES5 is all about functional programming. We can create an object here by function constructor also (Classes concept is available in ES 6).

Basics things about Objects:

The simplest way to create an object is by calling Object ( ). Here we can create a custom object by creating a new instance of Object ( ) and add properties and methods.

var person = new Object ();
person.name = "Vaibhav";
person.greeting = function () {
  return "Good morning " + this.name
}

console.log(person.greeting());

/*
Output:
"Good morning Vaibhav"
*/

In the above code of snippet, we can define an object (person) with one property ( name ) and one method ( greeting ()). In the greeting (), we can access name properties by this.name.

var person = {
  name: "Vaibhav",
  greeting: function () {
    return "Good morning "+ this.name
  }
};
console.log(person.greeting())

/*
Output:
Good morning Vaibhav
*/

This is a very simple method to create an object is Object Literal. The output of the previous example and this example is the same but the creation pattern is a different one.

Properties of an object :

In the broad term, properties of an object’s property having 2 types:

Data Properties
Accessor Properties

Data Properties :

In the data properties, the data of the object is stored in a single location. When you changed or overwrite the value of any properties like the name of an above-created object (person), changed the value on that location. We can read or write the value of the property of an object from that location. Suppose you can define an object person and add a property of age with that so automatically some memory location is assigned to property age. From that location you can get the value of age and if you want to change the value of age so you can overwrite the value of age on that location. Data properties have four types:

Configurable
Enumerable
Writable
Value

When you added a property to an object, by default the above three properties ( Configurable, Enumerable, Writable ) have true value, and the value property has the assigned value.

Configurable :

If the [[Configurable]] property has a true value, then you may be redefined by removing the property via delete, changing the property value, or changing the property to accessor property. By default this is true.

Enumerable :

If the [[Enumerable]] property has a true value, then the property will return in the for-in loop. By default this is true.

Writable :

If the [[Writable]] property having a true value, then you can overwrite the value of that property. By default this is true.

Value :

It contains the actual value of the property and you can read the value of the property from the location in which the value is saved and you can overwrite that property’s value to that location. The default value is undefined.

In the above screenshot, we can define an object which a property name with value (“Vaibhav”). If you want to access the data properties of the above property, you can use Object.getOwnPropertyDescriptor() method.

If you want to change all or any data properties of a property, then you can use Object.defineProperty ().

In the above code sample, the writable data property is false. So, if you changed the value of the designation property, it doesn’t change in non-strict mode, and in the strict mode of coding, it gives an error like “designation is read-only property “ like that.

If you define a property by the using Object.defineProperty ( ) method, then all values of data property except value are by default false.

Accessor Properties :

In the accessor properties, we can call the getter and setter functions. These properties don’t have any data value. When an accessor property is reading a value, then the getter function will call and when you overwrite the value of the property then the setter function will call. Accessor properties have four types:

Configurable
Enumerable
Get
Set

It is impossible to define accessor properties explicitly. You must use the Object.defineProperty( ) method.

Configurable :

Enumerable :

If the [[Enumerable]] property has a true value, then the property will return in the for-in loop. By default this is true.

Get :

The function to call when the property is read from. The default value is undefined.

Set:

The function to call when the property is written to. The default value is undefined.

Define Multiple Properties:

You can define multiple properties by using Object.defineProperties and if you want to access all the data properties then use Object.getOwnPropertyDescriptors ( ).

and if you want to get all data properties of all properties of an object:

In the above code snippet, we define two properties by using of Object.defineProperties() at a time and access all the data properties of an object we can use Object.getOwnPropertyDescriptors( ) method.

Conclusion:

If you want to connect with me, please free to connect with me :

Top Javascript and Typescript Short-hand You must know

Vaibhav Sharma — Tue, 07 Jun 2022 16:45:56 +0000

Introduction

As a Javascript and Typescript Developer, you will review the code of other senior developers. They will use some other syntax that we are not familiar with. But today I will tell you Top short-hand syntax of Javascript and Typescript, which will help you to understand the other developer's code and fasten your developer speed also.

Ternary Operator :

The Ternary Operator is also known as Conditional Operator. This operator is used as shorthand for if...else. if you want to run else if block also, you need to perform a ternary chaining operation. This conditional operator is the only operator that will take 3 operands:

condition
Truthy value followed by a colon
Falsy value

// syntax
condition ? truthyExpression : falsyExpression

The below example illustrates how we will use the first if...else block and after that same code block with the ternary operator.

// if...else
var age = 20;
if(age >= 18) {
   🍺
} else {
   🧃
}

// short-hand

var age = 20;
var beverage = (age >= 18) ? 🍺 :🧃
console.log(beverage); // 🍺

If you want to perform the else if operation, then you need to chaining because it has a right-associative property.

// ternary operation chaining

condition1 ? value1
    : condition2 ? value2
    : condition3 ? value3
    : value4;


if (condition1) { 
    return value1; 
} else if (condition2) { 
  return value2; 
} else if (condition3) { 
   return value3; 
} else { 
   return value4; 
}

Optional chaining:

Optional Chaining operator ?. enables you to not check the nested object property validation each time. ?. is the safest way to access the nested object property in both conditions is nested property exists or not. This operator solves the non-existing problem.

// syntax
obj.val?.prop
obj.val?.[expr]
obj.arr?.[index]
obj.func?.(args)

// Normal Developer
let nestedProperty = object.name && object.name.firstName;

// 🏄 Developer
let nestedProperty = object.name?.firstName;

In the below example, we are trying to access the homeAddress property of an empty object person. If we will try to access without optional chaining then we will get Reference Error (TypeError: Cannot read property 'homeAddress' of undefined). But if we will try to access the same property with the use of optional chaining then we are not getting error, but in the place we are getting undefined.

let person = {};
console.log(person.address.homeAddress) // TypeError: Cannot read property 'homeAddress' of undefined

// This is known as a non-existing problem.

/* Optional Chaining */
let person = {};
console.log(person?.address?.homeAddress) // undefined

Nullish Coalescing Operator:

Nullish Coalescing Operator is another logical operator. It is written as two question mark symbol ??.

// syntax
leftExpression ?? rightExpression

It returns the rightExpression if leftExpression is null or undefined otherwise, it returns leftExpression.

// long code
const str = null;
let value;
if(str !== null || str !== undefined) {
   value = str;
} else {
   value = 'some-value';
}


// short-hand
const value = null ?? 'some-value';
console.log(value); // some-value

const value1 = ' ' ?? 'some-value';
console.log(value1); // ' '

The nullish coalescing operator has the fifth-lowest operator precedence, directly lower than || and directly higher than the conditional (ternary) operator.

Template Literals:

Template Literals is the EcmaScript 6 feature. By the use of Template Literal we can wrap the multiple variables with string without using of + operand.

// syntax
``

We can use ${} to wrap the variable with a string. This is also known as string interpolation.

const name = "Vaibhav";

// long code

console.log('Good morning ' + name);

// short-hand
console.log(`Good morning ${name}`)

We can use template literals for multi-line string, string interpolation, and tagged templates.

Typescript Constructor Shorthand:

You all know about class constructors in javascript and typescript. class declaration is one way to create classes. To declare the classes, we will use the class keyword. With the use of constructor, we will assign the values to class properties.

class Person {
  public this.name;
  public this.age;

  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

}

In Typescript, when we are using the constructor. it automatically creates and sets the class properties.

class Person {
   constructor (public name: string,public age: string) {}
}

Note: This short-hand is working with Typescript only.

Object property assignment shorthand:

Object property assignment is Javascript and Typescript also has a short-hand. If you need to assign a variable value to an object property, you don't need to specify the variable name, if the object's property name and the variable name is the same.

const name = "Vaibhav";
const age = 26;
const greet = "Good Morning"

// long-code
const me = {
   name : name,
   age: age,
   greeting: greet
}


// short-code 
const me = {
   name,
   age,
   greeting: greet
}

Object Destructuring:

In Javascript, by the use of destructuring we will extract the data from an object, array, and map and set it to new variables with the same name. Destructuring is another ES6 feature. Destructuring also works with complex functions that have a lot of parameters and default values.

// syntax

{property1: variable1, property2: variable2} = object

Below example is an example of the object destructuring:

let person = {
    firstName: 'John',
    lastName: 'Doe'
};

// long-code 
let firstName = person.firstName;
let lastName = person.lastName;


// short-code
let {firstName, lastName} = person;

There are three use-cases examples of object destructuring:

Assign values to existing variables.
Assign values to new variables.
Assign to a variable with default values.

// Assign values to existing variables

let person = {
    firstName: 'John',
    lastName: 'Doe'
};

let {firstName, lastName} = person;

// Assign values to new variables

let person = {
    firstName: 'John',
    lastName: 'Doe'
};

let {firstName: fname, lastName: lname} = person;

// fname = 'John', lname = 'Doe'

We can also assign default values to variables whose keys may not exist in the object. If those values are not present it will give undefined values that's why we are using default values for preventing any issue due to undefined values. The code below demonstrates this:

// Assign to a variable with default values

let person = {
    firstName: 'John',
    lastName: 'Doe'
};

let {firstName= 'Vaibhav', lastName= 'Sharma', age= 27} = person;

// firstName = 'John', lastName = 'Doe', age = 27

Spread operator:

Spread syntax aka spread operator is the coming with ES6. Spread operator (...) is used to expand or spread an iterable (i.e. array or string).

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const numbersCombined = [...arr1, ...arr2];

// 1,2,3,4,5,6

There are several use-cases where we can use spread operator like:

Copy Array Using Spread Operator.
Clone Array Using Spread Operator.
Spread Operator with Object.

Copy Array Using Spread Operator:

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4, 5];

console.log(arr2) // [1, 2, 3, 4, 5]

Clone Array Using Spread Operator:

let arr1 = [ 1, 2, 3];

// copy using spread syntax
let arr2 = [...arr1];

The above example creates two different references, so removing and adding elements to one array will not affect the other.

Spread Operator with Object:

const obj1 = { a : 'x', b : 'y' };
const obj2 = { c : 'z' };

// add obj1 and obj2  to obj3
const obj3 = {...obj1, ...obj2};

console.log(obj3); // {a: 'x', b: 'y', c: 'z'}

Conclusion:

These are very few short-hand codes. I was worried about the length of the article that's why I have added only 8 short-hand codes. If guys you want the next article of this series please let me know. I will work on that for sure. If you want to connect with me, please free to connect with me :