JavaScript types

Understanding how different types are mapped between Scala.js and JavaScript is crucial for correct interoperability.
Some types map quite directly (like String) where others require some conversions.

Type Correspondence

Some Scala types are directly mapped to corresponding underlying JavaScript types. These correspondences can be used
when calling Scala.js code from JavaScript and when defining typed interfaces for JavaScript code.

On the other hand, some JavaScript (collection) types have similar types in Scala.
Instead of mapping them directly, Scala.js provides conversions between them.
We show with a couple of snippets how you can convert from JavaScript to Scala types and back.
Please refer to the Scaladocs for details.

js.FunctionN <–> scala.FunctionN

Functions from JavaScript and Scala are not exactly the same thing, therefore
they have different types. However, implicit conversions are available by
default to go from one to the other, which means the following snippets compile
out of the box:

Note that most of these types are similar to standard Scala types. For example,
js.Array[A] is similar to scala.Array[A], and js.FunctionN is similar to
scala.FunctionN. However, they are not completely equivalent, and must not be confused.

With the exception of js.Array[A] and js.Dictionary[A], these types have
all the fields and methods available in the JavaScript API.
The collection types feature the standard Scala collection API instead, so that
they can be used idiomatically in Scala code.

Function types

js.Function and its subtypes

js.FunctionN[T1, ..., TN, R] is, as expected, the type of a JavaScript
function taking N parameters of types T1 to TN, and returning a value of
type R.

There are implicit conversions from scala.FunctionN to js.FunctionN and
back, with the obvious meaning.
These conversions are the only way to create a js.FunctionN in Scala.js.
For example:

valf:js.Function1[Double, Double]={(x:Double)=>x*x}

defines a JavaScript function object which squares its argument.
This corresponds to the following JavaScript code:

varf=function(x){returnx*x;};

You can call a js.FunctionN in Scala.js with the usual syntax:

valy=f(5)

js.ThisFunction and its subtypes

The series of js.ThisFunctionN solve the problem of modeling the this
value of JavaScript in Scala. Consider the following call to the each method
of a jQuery object:

Inside the closure, the value of this is the DOM element currently being
enumerated. This usage of this, which is nonsense from a Scala point of view,
is standard in JavaScript. this can actually be thought of as an additional
parameter to the closure.

In Scala.js, the this keyword always follows the same rules as in Scala,
i.e., it binds to the enclosing class, trait or object. It will never bind to
the equivalent of the JavaScript this in an anonymous function.

To access the JavaScript this in Scala.js, it can be made explicit using
js.ThisFunctionN. A js.ThisFunctionN[T0, T1, ..., TN, R] is the type of a
JavaScript function taking a this parameter of type T0, as well as N
normal parameters of types T1 to TN, and returning a value of type R.
From Scala.js, the this parameter appears as any other parameter: it has a
non-keyword name, a type, and is listed first in the parameter list. Hence,
a scala.FunctionN is convertible to/from a js.ThisFunction{N-1}.

Skipping over the irrelevant details, note that the parameter li completely
corresponds to the JavaScript this. Note also that we have ascribed the
lambda with : js.ThisFunction explicitly to make sure that the right implicit
conversion is being used (by default it would convert it to a js.Function1).
If you call a statically typed API which expects a js.ThisFunction0, this is
not needed.

The mapping between JS this and first parameter of a js.ThisFunction also
works in the other direction, i.e., if calling the apply method of a
js.ThisFunction, the first actual argument is transferred to the called
function as its this. For example, the following snippet:

Dynamically typed interface: js.Dynamic

Because JavaScript is dynamically typed, it is not often practical, sometimes
impossible, to give sensible type definitions for JavaScript APIs.

Scala.js lets you call JavaScript in a dynamically typed fashion if you
want to. The basic entry point is js.Dynamic.global, which is a dynamically
typed view of the JavaScript global scope. You can select any global variable
of JavaScript as a a member of js.Dynamic.global, e.g.,
js.Dynamic.global.Math, which will be typed as a
js.Dynamic.

You can read and write any field of a js.Dynamic, as well as call any method
with any number of arguments, and you always receive back a js.Dynamic.

For example, this snippet taken from the Hello World example uses the
dynamically typed interface to manipulate the DOM model.