What this syntax meaning in Javascript

Question

I am looking for API of TWILIO in javascript , and i found something like

const { connect, createLocalTracks } = Twilio.Video;

navigator.mediaDevices.enumerateDevices().then(devices => {
  var videoInput = devices.find(device => device.kind === 'videoinput');
  return createLocalTracks({ audio: true, video: { deviceId: videoInput.deviceId } });
}).then(localTracks => {
  return connect('my-token', { name: 'my-room-name', tracks: localTracks });
}).then(room => {
  console.log('Connected to room ' + room.name);
});

I could not understand what is the meaning of this code

const { connect, createLocalTracks } = Twilio.Video;

https://www.twilio.com/docs/api/video/configuring-audio-video-inputs-and-outputs

I have seen something same in typescript but not in core js

Answer 1

It's a destructuring assignment. It is equivalent to:

const connect = Twilio.Video.connect;
const createLocalTracks = Twilio.Video.createLocalTracks;

See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment for details, including which browsers support it.

Answer 2

The pattern is object destructuring and assignment, for example

 const Twilio = { Video: { connect:1, createLocalTracks:2 } }; const { connect, createLocalTracks } = Twilio.Video; console.log(connect, createLocalTracks); // 1, 2