Почему объектный подход с методами JavaScript является лучшим для меня


Что такое объект в JavaScript?

Как сказано в веб-документации mdn:

«Тип Object представляет собой один из типов данных JavaScript. Он используется для хранения различных коллекций с ключами и более сложных сущностей. Объекты могут быть созданы с помощью конструктора Object() или инициализатора объекта / синтаксиса литералов.»

Таким образом, объект — это просто структура с множеством свойств, которым присвоены данные. Вот пример объекта:

const simplePerson = {
  id: 1,
  name: 'Jean',
  age: 24,
};
Войти в полноэкранный режим Выход из полноэкранного режима

Вы можете хранить все, что хотите! Например, вы можете хранить и функцию :

const person = {
  id: 1,
  name: 'Jean',
  age: 24,
  print: function() {
    return `Id : ${this.id} -
            Name : ${this.name} -
            Age ${this.age}`;
  },
};
Войти в полноэкранный режим Выйти из полноэкранного режима

И вы можете хранить объект в свойстве тоже!

Как это использовать?

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

Например, на примере объекта person, созданного ранее, мы получим доступ к значению свойства name.

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

Почему я использую объект для параметров функции?

Потому что это очень полезно. Представьте, что у вас есть функция с 10 параметрами. Когда вы вызываете свою функцию, вам нужно указать значение каждого аргумента по порядку.

function foo(id, name, age) {
  // Some code here...
}

// When you call you're function
foo(1, 'Jean', 24);
Вход в полноэкранный режим Выйти из полноэкранного режима

Если в объявлении функции изменится порядок следования параметров или вы решите добавить или удалить некоторые параметры, вам придется изменить ВСЕ вызовы функции, чтобы не было ошибок!

Это не ремонтопригодно…

Поэтому я лично рекомендую использовать параметр объекта вместо списка параметров. И у вас есть много способов сделать это.

Первый способ

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

function foo(person) {
  // Some code here...
  // person.id ...
}

// Build the object directly with call
foo({
  id: 1, 
  name: 'Jean', 
  age: 24
});

// Or build it before calling
let person = {
  id: 1, 
  name: 'Jean', 
  age: 24
}
foo(person)
Вход в полноэкранный режим Выход из полноэкранного режима

Здесь при желании можно легко изменить порядок свойств в объекте. Их изменение не создаст ошибку в вашей функции.

Второй способ

Второй способ заключается в использовании метода call. Когда вы используете call в вашей функции, вы можете использовать оператор this.

Вот пример.

function calcRectArea() {
  return this.width * this.height;
}

console.log(calcRectArea.call({width: 5, height: 6}));
// Will show 30
Войти в полноэкранный режим Выйти из полноэкранного режима

Третий способ

Третий и последний способ сделать это — просто определить параметры объекта и объявить свои свойства в параметрах этого объекта.

Чтобы понять, что я говорю, я покажу вам пример здесь:

function calcRectArea({height, width}) {
  return width * height;
}

console.log(calcRectArea({width: 5, height: 6}));
// Will show 30 too
Вход в полноэкранный режим Выход из полноэкранного режима

Здесь, на мой взгляд, объявление проще, чем в двух предыдущих случаях, потому что вы можете знать, какие имена свойств нужны объекту, и нет необходимости читать функцию.

Заключение

Для меня объектный подход к объявлению функции действительно полезен, потому что вам не нужно иметь список всех параметров, необходимых для одной функции, и вы можете определить именованные аргументы при вызове своей функции, как в Python, например!

Конечно, такой подход не подходит для функции с одним параметром, например. Но с таким подходом вы сможете легко поддерживать свой код и вносить в него обновления.

Но подождите… для объявления всех параметров, мы не знаем тип параметров функции и как мы можем это узнать?

Я постараюсь объяснить это в другом разделе о JSDoc 😜.


Расскажите мне, если у вас есть какие-либо предложения или замечания и, конечно, если эта статья была интересной. 😜

Оцените статью
devanswers.ru
Добавить комментарий