5 New JavaScript Features You Must Learn

Maybe you and I have never met, but it is very likely that we will meet each other late, I am a front-end fat head fish

foreword

JavaScript is constantly upgrading and iterating, and more and more new features make our code writing concise and interesting. This article will introduce 5 new features and study them together.

1. # Use "Object.hasOwn" instead of "in" operator

Sometimes, when we want to know if a property exists on an object, we usually use the "in" operator or "obj.hasOwnProperty", but they all have their own drawbacks.

in

The "in" operator returns true if the specified property is in the object or its prototype chain.

 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 method will return a boolean value, indicating whether the object's own properties have corresponding values (properties on the prototype chain will not be read).

 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 It is possible to filter out properties on the prototype chain, but in some cases it is still not safe.

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

Object.hasOwn

Don't worry, we can use Object.hasOwn to avoid these two problems, which is more convenient and safer than the "obj.hasOwnProperty" method.

 let object = { age: 24 }
Object.hasOwn(object, 'age') // true
let object2 = Object.create({ age: 24 })
Object.hasOwn(object2, 'age') // false  
let object3 = Object.create(null)
Object.hasOwn(object3, 'age') // false

2. # Use "#" to declare private properties

In the past, we generally used _ to represent private attributes, but it is not reliable and will be modified externally.

 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

Use "#" for truly private properties

 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 // 没法从外部直接修改
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. # has a useful "number separator"

Looking directly at the example, I was stunned...

 const sixBillion = 6000000000
// ❌ 难以阅读
const sixBillion2 = 6000_000_000
// ✅ 更加易于阅读
console.log(sixBillion2) // 6000000000

Of course, you can also use "_" for calculation

 const sum = 1000 + 6000_000_000 // 6000001000

4. # Use "?." to simplify "&&" and ternary operators

You must be very familiar with these examples. Is there a way we can simplify it?

 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

Tips

General usage of ?.

1. obj?.prop object properties
2. obj?.[expr] object properties
3. func?.(...args) execute function

5. # Use "BigInt" to support large number calculations

Number calculations beyond "Number.MAX_SAFE_INTEGER" in JS will be unsafe.

Example:

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

Using "BigInt" completely avoids this problem

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

At last

I hope to share practical, basic and advanced knowledge points with you all the time, get off work early and fish happily together.

I look forward to your following me in the Nuggets : Front-end Fat Head Fish , you can also find me in the public account: Front-end Fat Head Fish .