Destructuring Assignment and Shorthand Properties/Methods - Javascript

Hey dude, how are you?!

Javascript has a lot of interesting things and I'd like to talk about two specifically!

Destructuring Assignment and Shorthand Properties/Methods, let's talk about it?!

---

📌 Destructuring Assignment

The Destructuring Assignment is a powerful syntax to unpack an array, object and create distinct variables with the value, take a look:

✵ Destructuring Assignment: Array

const myTeams = ['Milwaukee Bucks', 'Golden State Warriors
'];

[myFirstTeam, mySecondTeam] = myTeams;

console.log(myFirstTeam); //Output: 'Milwaukee Bucks'
console.log(mySecondTeam); //Output: 'Golden State Warriors'

✵ Destructuring Assignment: Object

const frontender = { 
  name: 'Renan',
  framework: 'Angular'
};

const { name, framework } = frontender;

console.log(name); //Output: 'Renan'
console.log(framework); //Output: 'Angular'

---

📌 Shorthand Properties

Shorthand Properties released in ES6 makes the construction of the object simpler because when we have it with a property and a value and both have the same value we can omit the "value" and just declare the property, see the example below:

✵ Old mode:

function getUserData(name, age) {
  return {
    name: name,
    age: age,
  }
}

✵ New mode:

function getUserData(name, age) {
  return {
    name,
    age,
  }
}

📌 Shorthand Method Names

With Shorthand Method Names we can omit the function word, for example:

✵ Old mode:

function getUserData(name, age) {
  return {
    name: name,
    age: age,
    createId: function () {
      // createId code
    }
  }
}

✵ New mode:

function getUserData(name, age) {
  return {
    name,
    age,
    createId () {
      // createId code
    }
  }
}

---

That's all guys! it gets more and more beautiful that we take to learn and practice!

I hope you guys like it and enjoy the article!

If you have a question, suggestion or anything else, please leave a comment!

See you later guys!