16

I am currently learning Javascript and I noticed something that, to me, doesn't make much sense.

In an example on the ArcGIS website, there is this piece of code

var map
require(["esri/map", "dojo/domReady!"], function(Map) {
  map = new Map("mapDiv", {
    center: [-56.049, 38.485],
    zoom: 3,
    basemap: "streets"
  });
});

I don't get how you can do "new Map" when Map is the parameter of function(Map). To be able to use new, then Map must be a type and I haven't seen a type being a parameter in other languages.

Improve this question

3 Answers 3

Reset to default
23

The funny thing about Javascript is that there really are no classes. The equivalent of a class in Javascript is just a special kind of function. Actually, forget about the "special" in the previous sentence (just wanted to soften the blow). Any function can "act as a class" and be instantiated with the new operator (although it is really only useful when that function assigns stuff to this so the generated object gains public methods and attributes).

And functions in Javascript are first-class citizens. Functions can be assigned to variables and functions can be passed as arguments to other functions. This makes it perfectly legal to pass a function to another function and then have that other function instantiate it with new.

Yes, this is indeed a very strange concept to wrap a head around which is used to class-oriented programming languages. But it becomes surprisingly intuitive once you understand it.

So what happens in the code you posted in the question is this:

  1. When require is executed, it calles an anonymous function passing a class function to it
  2. the anonymous function assigns that class function to a local variable Map
  3. the anonymous function then creates an instance of that class function.
  4. the instance is assigned to the global variable map
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Ok so, in what happen if put code in the function and not just variables assignments? Will it execute when I do new Map?
I will take the suvroc example below with the Apple function. If there is code that modify the page, or let's say, an alert, will the alert show when I will do var apple = new Apple() ?
@Math yes, it will be executed. Think of it as a constructor in a class-based programming language. It should set up the object but it can theoretically do anything it wants.
I think that I get it now, since variables in the function are declared as they are assigned, that's why there are no classes since there is no variables declarations in Javascript. So calling a constructor (a function) with variables assignments (with this.) already act both as a class declaration + variables declaration + constructor. Is that it?
@Math almost. There actually are variable declarations in Javascript. The var keyword declares a local variable. Any variable you declare by assignment is a global variable and is something you should avoid if possible (in strict mode javascript it is forbidden). In constructor-functions var can take the role of private variables, because locals can not be accessed from the outside but it can be accessed from any public functions declared in the style this.getFoo = function() { return localVariable; }
7

To be able to use new, then Map must be a type

No. For new to work, Map must be a function.

Functions are first class objects in JavaScript and can be treated like any other piece of data (assigned to variables, passed as function arguments, etc).

function One() {
  this.foo = 1;
}

function myCallingThing(arg) {
  alert(new arg().foo + 1);
}

var Two = One;

var instance = new Two;

alert(instance.foo);

myCallingThing(Two);

This is not unique to JavaScript.

#!/usr/bin/perl

use strict;
use warnings;
use v5.10;

sub example {
    say "Hello";
}

sub callme {
    my $var = shift;
    $var->();
}

callme(\&example);

or

#!/usr/bin/python

def example():
    print "Hello\n"

def callme(arg):
    arg();

callme(example)
Improve this answer

1 Comment

Ok I think I get it. The python example seems more like a function pointer to me. I am familiar with this but the use of a function as a class (to use its own variables) is new to me. Thanks!
4

By defining function you can create something like class

function Apple (type) {
    this.type = type;
    this.color = "red";
    this.getInfo = getAppleInfo;
}

Then you can create new instance of your function/class

var apple = new Apple('lobo');

So your Map parameter is a function that define objects

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.