What is the following code snippet from a slate.js example doing?

Question

I am trying to understand Slate.js by looking through the rich text example , and I came across the following snippet of code, which I do not understand.

const isBlockActive = (editor, format) => {
    const [match] = Editor.nodes(editor, {
      match: n => n.type === format,
  })

  return !!match
}

I am not an expert in javascript, and I am new to both typescript and slate.js so I apologize in advance for not being able to frame my question better, but here is what I currently understand and what I am still unsure about:

(1) Editor.nodes() is a method which returns an Iterable. What is the "const [match]" notation? Is this javascript or typescript?

(2) Is the " match " in " const [match] " the same as the " match " in " match : n => n.type === format "? If so, does that mean " const [match] " is an array with one element which is a function? It seems odd if that were the case as then why bother making Editor.nodes() return an Iterable at all?

(3) I know double exclamation points give me a Boolean object, but since I can't wrap my head around whether match is a function or an iterable or something else, I have no idea what the truth or falsity of !!match tells me about the initial iterable returned by Editor.nodes().

Thanks for any light you may be able to shed on my confused brain!

Answer 1

That's called array destructuring . match is a variable that contains the first element of the array (or rather the first value yielded by the iterator) returned by the Editor.nodes function. It barely equals:

  const match = Editor.nodes(...)[0];

Or more accurately:

 const _it = Editor.nodes(...)[Symbol.iterator]().next();
 const match = _it.done ? undefined : _it.value;

Answer 2

(1) Editor.nodes() is a method which returns an Iterable. What is the "const [match]" notation? Is this javascript or typescript?

It's JavaScript (and TypeScript) array destructuring . Editor.nodes returns an iterable which is iterated over to create an array, and the first element of this array is assigned to match . We're only interested in in whether there is at least one match, so looking at the first element of the array will tell us that.

(2) Is the "match" in "const [match]" the same as the "match" in "match : n => n.type === format"? If so, does that mean "const [match]" is an array with one element which is a function? It seems odd if that were the case as then why bother making Editor.nodes() return an Iterable at all?

The two variables are completely different , and could have (should have?) been named differently to make things more clear. Editor.nodes() is part of the Editor interface/API, which is used for many different things. In this case we're only interested in the first element. You could use it to find and iterate over all nodes in editor.children which your match function returns true for.

(3) I know double exclamation points give me a Boolean object, but since I can't wrap my head around whether match is a function or an iterable or something else, I have no idea what the truth or falsity of !!match tells me about the initial iterable returned by Editor.nodes().

The resulting match is a node object , or undefined if it didn't match any. An object is truthy while undefined is falsey, and doing !! just converts it to a boolean.