В предыдущем рассказе я говорил о переменных. Если вы хотите начать сначала, то нажмите здесь!

JavaScript разработан на основе простой объектно-ориентированной парадигмы. Объект — это набор свойств, а свойство — это связь между именем (или ключом) и значением. Значение свойства может быть функцией, и в этом случае свойство называется методом. В дополнение к объектам, предопределенным в браузере, вы можете определить свои собственные объекты.

Деструктуризация объекта

Деструктуризация объектов — это полезная функция JavaScript для извлечения свойств из объектов и привязки их к переменным.

Давайте сделаем пример объекта автомобиля. Объект car имеет такие свойства, как brand, и вложенные свойства, такие как config:

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

Чтобы получить доступ к значениям ключей в объекте автомобиля, вы можете просто использовать запись через точку или car[keyName]

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

Вышеприведенный пример представляет собой два вкладыша, вместо этого мы можем деструктурировать этот объект.

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

Используйте геттеры и сеттеры

При доступе к данным лучше использовать геттеры и сеттеры, а не просто искать свойство объекта. Это обновит ваш код позже, это упростит добавление проверок.

В плохом примере мы можем получить доступ к свойству непосредственно из объекта.

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

В хорошем примере используются геттеры и сеттеры. Сейчас мы не можем получить прямой доступ к переменной mileage, вместо этого у нас есть две функции для получения или установки значения объекта. Я вернул только функции getMileage и setMileage, я не вернул реальную переменную пробега.

// 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;

Используйте цепочку методов

Одним из самых полезных шаблонов в JavaScript является цепочка методов. Вы видите это во многих библиотеках, таких как jQuery и Lodash. Это позволяет вашему коду быть выразительным и менее многословным. По этой причине я говорю, используйте цепочку методов и посмотрите, насколько чистым будет ваш код. В ваших функциях класса просто возвращайте это в конце каждой функции, и вы можете связать с ней дополнительные методы класса.

// 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();

Это все для объектов. В следующей части вы найдете принципы чистого кода для функций.