6 современных возможностей JavaScript, о которых не знает большинство разработчиков

1. Оператор “Object.hasOwn” вместо “in”

Чтобы узнать, существует ли свойство у объекта, обычно используется оператор “in” или “obj.hasOwnProperty”. Оба они имеют свои недостатки.

Оператор “in”

Оператор “in” возвращает true, если указанное свойство находится в указанном объекте или цепочке его прототипов.

const Person = function (age) {
  this.age = age
}
Person.prototype.name = 'fatfish'
const p1 = new Person(24)
console.log('age' in p1) // true 
console.log('name' in p1) // true  (обратите внимание)

obj.hasOwnProperty

Метод hasOwnProperty возвращает булево значение, которое помогает определить, имеет ли объект указанное свойство в качестве собственного свойства (в отличие от наследования).

Используем тот же пример, что и выше:

const Person = function (age) {
  this.age = age
}
Person.prototype.name = 'fatfish'
const p1 = new Person(24)
console.log(p1.hasOwnProperty('age')) // true 
console.log(p1.hasOwnProperty('name')) // fasle  (обратите внимание)

Возможно, "obj.hasOwnProperty" уже может отфильтровать свойства на цепочке прототипов, но в некоторых случаях это небезопасно, поскольку чревато сбоем программы.

Object.create(null).hasOwnProperty('name')
// Uncaught TypeError: Object.create(...).hasOwnProperty is not a function

Object.hasOwn

Избежать этих двух проблем и связанных с ними неприятностей позволяет оператор Object.hasOwn. Он удобнее и безопаснее, чем метод obj.hasOwnProperty.

let object = { age: 24 }
Object.hasOwn(object, 'age') // true
let object2 = Object.create({ age: 24 })
Object.hasOwn(object2, 'age') // false  Атрибут 'age' существует в прототипе
let object3 = Object.create(null)
Object.hasOwn(object3, 'age') // false (объект, который не наследуется от "Object.prototype")

2. “#” для объявления частных свойств

Устаревшее "_" для представления приватных свойств небезопасно и может быть изменено извне.

class Person {
  constructor (name) {
    this._money = 1
    this.name = name
  }
  get money () {
    return this._money
  }
  set money (money) {
    this._money = money
  }
  showMoney () {
    console.log(this._money)
  }
}
const p1 = new Person('fatfish')
console.log(p1.money) // 1
console.log(p1._money) // 1
p1._money = 2 // Изменить приватное свойство _money извне
console.log(p1.money) // 2
console.log(p1._money) // 2

Используйте “#” для реализации безопасности приватных свойств:

class Person {
  #money=1
  constructor (name) {
    this.name = name
  }
  get money () {
    return this.#money
  }
  set money (money) {
    this.#money = money
  }
  showMoney () {
    console.log(this.#money)
  }
}
const p1 = new Person('fatfish')
console.log(p1.money) // 1
// p1.#money = 2 // Таким способом нельзя изменить #money
p1.money = 2
console.log(p1.money) // 2
console.log(p1.#money) // Uncaught SyntaxError: Private field '#money' must be declared in an enclosing class

3. Разделитель чисел

“_” помогает улучшить читаемость чисел.

const sixBillion = 6000000000
// Очень трудно читать
const sixBillion2 = 6000_000_000
// Читать намного легче
console.log(sixBillion2) // 6000000000

Однако “_” также можно использовать для реальных вычислений.

const sum = 1000 + 6000_000_000 // 6000001000

4. “?” для упрощения “&&” и тернарных операторов

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

const obj = null
console.log(obj && obj.name)
const $title = document.querySelector('.title')
const title = $title ? title.innerText : undefined

Используйте “?” для упрощения кода.

const obj = null
console.log(obj?.name)
const $title = document.querySelector('.title')
const title = $title?.innerText

Советы

Распространенное написание “?”.

1. obj?.prop свойства объекта.
2. obj?.[expr] свойства объекта.
3. func?.(...args) вызов функции или метода объекта.

5. “??” вместо “||”

Используйте “??” вместо “||”, чтобы определить, является ли значение в левой части оператора null или undefined, а затем вернуть значение в правой части.

const obj = {
  name: 'fatfish',
  nullValue: null,
  zero: 0,
  emptyString: '',
  falseValue: false,
}
console.log(obj.age ?? 'some other default') // другое значение по умолчанию
console.log(obj.age || 'some other default') // другое значение по умолчанию

console.log(obj.nullValue ?? 'some other default') // другое значение по умолчанию
console.log(obj.nullValue || 'some other default') // другое значение по умолчанию
console.log(obj.zero ?? 0) // 0
console.log(obj.zero || 'some other default') // другое значение по умолчанию

console.log(obj.emptyString ?? 'emptyString') // ''
console.log(obj.emptyString || 'some other default') // другое значение по умолчанию

console.log(obj.falseValue ?? 'falseValue') // false
console.log(obj.falseValue || 'some other default') // другое значение по умолчанию

6. “BigInt” для решения задач по вычислению больших целых чисел

Корректность вычисления чисел в JS, превышающих "Number.MAX_SAFE_INTEGER", не гарантирована.

Пример:

Math.pow(2, 53) === Math.pow(2, 53) + 1 // true
// Math.pow(2, 53) => 9007199254740992
// Math.pow(2, 53) + 1 => 9007199254740992

Для вычисления больших чисел используйте “BigInt”. Это позволит избежать вычислительных ошибок.

BigInt(Math.pow(2, 53)) === BigInt(Math.pow(2, 53)) + BigInt(1) // false

Читайте также:

• 25 полезных сокращений в JavaScript для веб-разработчиков
• Стек вызовов JavaScript: объяснение с помощью иллюстраций
• Мой любимый вопрос на собеседовании для веб-разработчиков: «Понимаете ли вы, что такое массивы?»

Читайте нас в Telegram, VK и Дзен

---

Перевод статьи fatfish: 6 Cool Modern JavaScript Features Most Developers Don’t Know About