Write Cleaner Code in JavaScript #2 Objects

In the previous story I was going on about variables. If you wish to start from the beginning then click here!

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. In addition to objects that are predefined in the browser, you can define your own objects.

Object destructuring

The object destructuring is a useful JavaScript feature to extract properties from objects and bind them to variables.

Let’s make an example object of a car. The car object has properties like brand and nested ones like config:

const car = {
 brand: 'Volvo',
 productionYear: 2022,
 config: {
  transmission: 'manual',
  power: 115,
  parkAssist: false,
 }
};

To access values from the keys in the car object, you could just use dot notation or car[keyName]

// Don't ❌
const brand = car.brand 
const productionYear = car['productionYear']
console.log(brand) // Volvo
console.log(productionYear) // 2022

Above example is a two liner, instead we can destructure that object

// Do ✅
const { brand: carBrand, productionYear } = car;
console.log(carBrand) // Volvo
console.log(productionYear) // 2022

Use getters and setters

It’s better to use getters and setters when accessing data instead of just looking for a property of an object. This is going to update your code later, it makes adding validations easier.

In the bad example we’re able to access the property directly from the object.

// Don't ❌
function updateMileage(){
// ...
 return {
  mileage: 0;
 }
}
const car = updateMileage();
car.mileage = 100;
console.log(car.mileage) // 100;

In the good example, using getters and setters. We’re not able to directly access the mileage variable now, instead we have two functions to either get or set object’s value. I’ve only returned getMileage and setMileage functions, I have not returned the actual mileage variable.

// Do ✅
function updateMileage(){
 let mileage = 0;
 
 function getMileage(){
  return mileage;
 }
function setMileage(value){
  mileage = value;
 }
return {
  getMileage,
  setMileage
 }
}
const car = updateMileage();
car.setMileage(100);
console.log(car.getMileage()) // 100;

Use method chaining

One of the most useful patterns in JavaScript is method chaining. You see it in many libraries such as jQuery and Lodash. It allows your code to be expressive, and less verbose. For that reason, I say, use method chaining and take a look at how clean your code will be. In your class functions, simply return this at the end of every function, and you can chain further class methods onto it.

// Don't ❌
class Car {
 constructor(transmission, mileage, color) {
  this.transmission = transmission;
  this.mileage = mileage;
  this.color = color;
 }
 setTransmission(transmission) {
  this.transmission = transmission;
 }
 setMileage(mileage) {
  this.mileage = mileage;
 }
 setColor(color) {
  this.color = color;
 }
 save() {
  console.log(this.transmission, this.mileage, this.color);
 }
}
const car = new Car('automatic', 150, 'yellow');
car.setColor('red');
car.save();
// Do ✅
class Car {
 constructor(transmission, mileage, color) {
  this.transmission= transmission;
  this.mileage= mileage;
  this.color = color;
 }
setTransmission(transmission) {
  this.transmission= transmission;
  // Returning this for chaining
  return this;
 }
setMileage(mileage) {
  this.mileage= mileage; 
  // Returning this for chaining
  return this;
 }
setColor(color) {
  this.color = color;
  // Returning this for chaining
  return this;
 }
save() {
  console.log(this.transmission, this.mileage, this.color);
  // Returning this for chaining
  return this;
  }
}
const car = new Car(automatic', 150, yellow).setColor('red').save();

That’s it for objects. In the next part you’ll find clean code principles for functions.