What is the use of the two points in Javascript?

Question

What is the use of the two points : in Javascript, as the example below:

function paciente(nome, idade, altura) {
  var clazz = {
    imprime: function() {
      alert("nome: " + nome + ", idade: " + idade);
    }
  return clazz;
}

I know that imprime will receive an anonymous function, but will it be an object? Variable? And why the use of the two points? And when should I use?

Answer 1

Well, the use of the two points is basically employed in objects:

var frutas = {
  "banana":{
    cor: "yellow"
  }
}

With the object you simply "navigate" between key levels:

frutas.banana.cor; // yellow

So whenever a key is used on an object, a value is assigned to it, by means of the two points :, instead of the same =, used for variables, in general.

In your example I believe a key is missing }, but it must have been the glue...

function paciente(nome, idade, altura) {
  var clazz = {
    imprime: function() {
      alert("nome: " + nome + ", idade: " + idade);
    }
  }
  return clazz;
}

You have a function, you have an object, that object receives a key imprime, this takes a function that returns a concatenation of the first two arguments of the function, i.e.:

paciente('João', 35, "1,80m").imprime() // João, 35

There are other uses, for example in conditional variables:

var cor = arguments.length > 0 ? arguments[0] : "black";

In the above example, coming out of the assumption that this code is within a function, you’re saying: if the number of arguments is greater than zero the variable "color" will be equal to the first argument, otherwise it will be equal to "black".

The "else"/"Else" is represented by the Colon (colon).

There are still the labels, implemented with Ecmascript, look:

var i, j;

loop1:
for (i = 0; i < 3; i++) {      // Primeira declaração rotulada "loop1"
   loop2:
   for (j = 0; j < 3; j++) {   // Segunda declaração rotulada "loop2"
      if (i === 1 && j === 1) {
         continue loop1;
      }
      console.log("i = " + i + ", j = " + j);
   }
}

You can use a label to identify a loop, and then use the break or continue to indicate whether a program should interrupt the loop or continue with its implementation.

I left that last option only to the level of curiosity I almost never see subjects about these labels, also not use with a lot of frequencies, but are very interesting, I recommend you see the links.

Answer 2

When you create an object in Javascript you can do it in different ways. An object consists of groups/pairs of keys and values. To create an object you can use this notation with the : that is no more than the separator between the key and the object.

When you use window.foo = bar; you are adding a new property to the object window with the value of the variable bar. You can also do this dynamically, with the notation of straight parentheses:

var x = 'foo';
window[x] = bar;

this example in practice will give the same as the first example.

But to create an object already with a key/value pair, or an object with many pairs you have to use the notation/syntax chave:valor, i.e., a literal Object:

var objeto = {
    foo: 'Olá',
    bar: 'Mundo'
};

alert(objeto.foo + ' ' + objeto.bar);

Answer 3

In this specific context it is the separator between the name of a member and its value, in the initialization of an object. Is used in Object literals.

So in this case the imprime is the name of the member, in other languages it could be considered as the instance variable of a class. In JS he is a member of the prototype, which in the background is a data map, a table hash.

The value stored in it is a function (understand the difference to a normal function). Yes, in JS a function can be stored in a variable to be called later through the variable.

Another way of writing the same in a less convenient way would be so, only for the purpose of understanding (it is not a pure and simple substitution):

clazz.imprime = function() {
    alert("nome: " + nome + ", idade: " + idade);
}

Or so:

clazz["imprime"] = function() {
    alert("nome: " + nome + ", idade: " + idade);
}

I put in the Github for future reference.