What is "const {next, error} = observer" syntax?

Question

I am reading angular docs for observables and I came across this syntax.

const locations = new Observable((observer) => {

  const {next, error} = observer; 

  //...
}

What type of assignment is going on with const {next, error} = observer;?

I haven't seen this before. Can anyone give me the correct term or a breakdown of what is happening?

Answer 1

It's called Destructuring Assignment.

For Objects, as you noticed, keys are the names of the variables. Note that this works for imports as well:

// my-export.ts

export class MyClass { //... }

// my-import.ts

import { MyClass } from './my-export.ts'

This is especially useful for tree-shaking compilers that drop dead dependencies.

You can also specify the key from which a variable's value should be taken:

const one = { id: 1 };
const two = { id: 2 };

const { id: first } = one;
const { id: second } = two;

console.log(first); // 1
console.log(second); // 2

You can also use Destrucuring Assignment on Arrays:

const myArray = [1,2,3,4,5];
const [foo, bar] = myArray;
console.log(`${foo}, ${bar}`); // "1, 2"

You can skip elements in an array:

const [,,bat] = myArray;
console.log(bat); // "3"

And you can assign the "rest" of the elements of an array to a variable as well:

const [first, ...rest] = myArray;
console.log(rest); // "[2,3,4,5]"

And that's just the tip of the iceberg! Check out the article I linked to get the full picture.

Answer 2

It's the way to destructuring an object, so it is the same of doing

let next = observer.next
let error    = observer.error

you can also do it with lists like:

let [x, y] = ['a', 'b']; // x = 'a', y = 'b'

and you can rename variable names like:

let {length : len} = 'abc'; // len = 3

There are a lot of more examples here

Answer 3

This is part of the ES6 syntax of destructuring, but the first thing to know is what is an Observable in Angular? An Observable is just a function and one of its characteristics is that it takes in an observer.

What is an observer? An observer is an object with the next, error and complete methods on it.

So imagine the observer object looking like this:

var observer = {
  next: 'You can move on now',
  error: 'Sorry, you messed up',
  complete: 'All done!'
};

//var next = observer.next;
// var error = observer.error;

const { next, error } = observer;
next;
error;

So the ES5 version is what is commented out and the ES6 beneath it is 100% equivalent to the above and its another version of this const { next, error } = observer; that you saw in the Angular docs.

Its a way to pull off the properties needed off this observer object, in this case the next and error callbacks only to pass them in when the user subscribes. Actually, they are more methods than they are properties inside this observer object, but to bring the lesson home, I am keeping it simple with properties.

So they could have also done const { next, error, complete } = observer, but apparently they did not need the complete method. So to avoid duplicate code and pulling off properties or methods off an object the lines were combined as you saw in the docs and then if you needed to call these properties you can do so:

const { next, error } = observer;
next;
error;

without having to use the ES5 dot notation.

If you try to pull off anything other than next, error or complete you will get undefined because these properties or in the case of observer, methods, do not exist in the observer object.