A lot of MDN pages describe things as "interfaces" - I was surprised that "interface" wasn't linked to a more explanatory page; it's just described as an "object type" on MDN's web APIs page.
1 Answer
An interface describes the shape of an object. (what properties it has, what type of values those properties contain, etc.) It's not an object itself - it's a more abstract description of what a particular object that implements the interface looks like.
For example, in the HTML standard, the DragEvent interface is described as such:
[Exposed=Window]
interface DragEvent : MouseEvent {
constructor(DOMString type, optional DragEventInit eventInitDict = {});
readonly attribute DataTransfer? dataTransfer;
};
dictionary DragEventInit : MouseEventInit {
DataTransfer? dataTransfer = null;
};
So DragEvent is a type of MouseEvent (which is another interface). It has a constructor function, so you can call new on window.DragEvent. When calling the constructor, you call it with the following arguments:
type, which is aDOMString(which is basically just any plain string)- An optional argument of type
DragEventInit(which the documentation defines), which defaults to the empty object
A DragEvent instance also has a dataTransfer property
Note that the "interface" definition you're linking to is not exactly a JavaScript thing, but more of a thing for web APIs. In other implementations of JavaScript not in browsers (for example, in Node), an interface may mean something different (or nothing at all).
TypeScript, a widely used static type checker for JavaScript, has a very similar notion of interfaces, which describe the shape of a particular object. For example:
// Define the shape of a Foo object
interface Foo {
prop: string;
}
// Create an object that implements Foo
const someFoo: Foo = {
prop: 'somevalue'
};