3

The use of this seems always confusing to me. As in the below source code. Can anyone explain what does the statement const {tz, msg} = this.state; mean in the below code?

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentTime: null, msg: 'now', tz: 'PST'
    }
  }

  getApiUrl() {
    **const {tz, msg} = this.state;**
    const host = 'https://andthetimeis.com';
    return host + '/' + tz + '/' + msg + '.json';
  }

export default App;
Harikrishnan
  • 9,688
  • 11
  • 84
  • 127
Shivangi
  • 41
  • 6

4 Answers4

2

const {tz, msg} = this.state; is equivalent to

const tz = this.state.tz;
const msg = this.state.msg;

It is called ES6 Destructuring Assignment. Basically it will reduce lines of code. It will be good if you can look into other ES6 features.

Harikrishnan
  • 9,688
  • 11
  • 84
  • 127
  • That seemed quite convicing although I have another doubt. – Shivangi Feb 13 '19 at 04:59
  • In an earlier class just above this example they have defined tz, and msg in an another way. ``` export class TimeForm extends React.Component { constructor(props) { super(props); this.fetchCurrentTime = this.fetchCurrentTime.bind(this); this.handleFormSubmit = this.handleFormSubmit.bind(this); this.handleChange = this.handleChange.bind(this); const {tz, msg} = this.props; this.state = {tz, msg}; } ``` – Shivangi Feb 13 '19 at 05:00
  • It is same. ES6 Destructuring Assignment. – Harikrishnan Feb 13 '19 at 05:05
  • 1
    That helped. Thank you – Shivangi Feb 13 '19 at 05:14
1

This is called Object Destructuring in Javascript. You can use it with Object and Arrays.

Like.

For Array

const [a, b] = [10, 20];

For Object

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

let {title, width, height} = options;

You can read further here https://javascript.info/destructuring-assignment.

So in your case it's

const {tz, msg} = this.state

is similar to accessing it as

const tz = this.state.tz
const msg = this.state.msg
Sandip Nirmal
  • 2,283
  • 21
  • 24
  • Oh Ok. But, why would anyone reassign values to the already defined title, width and height? – Shivangi Feb 13 '19 at 05:03
  • We are not reassigning it. These are the properties on the object, we are accessing it directly using destructuring. Imagine you have an HTTP response object and you want to retrieve ``name`` from it. You will simply use ``const {name} = response``. – Sandip Nirmal Feb 13 '19 at 05:05
1

That's called Object destructuring. This is es6 method.

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

OLD METHOD

var obj = {a:1, b:2, c:3};

var a = obj.a;
var b = obj.b;
var c = obj.c;

console.log("value of a is "+ a);
console.log("value of b is "+ b);
console.log("value of c is "+ b);

Destructuring

const obj = {a:1, b:2, c:3};

const { a, b, c } = obj;

console.log("value of a is "+ a);
console.log("value of b is "+ b);
console.log("value of c is "+ b);

you can get more info about destructuring here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Shashin Bhayani
  • 1,551
  • 3
  • 16
  • 37
0

It means you have state which has two key value pair like tz and msg

so whenever type like this you get value from that directly then were you print value from there like tz and msg.

Hardik Virani
  • 1,687
  • 7
  • 23
  • 36