What is the use of the colon in JavaScript?

4

What is the use of the colon : in JavaScript, like the example below:

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

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

    
asked by anonymous 15.01.2016 / 23:41

3 answers

9

Well, the use of the colon is basically used in objects:

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

With the object you simply "navigate" between levels of the keys:

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 = , used for general variables.

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

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

You have a function, which has an object, this object receives a imprime key, it receives a function that returns a concatenation of the first two arguments of the function, that is:

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 example above, assuming this code is inside a function, you are saying: If the number of arguments is greater than zero the variable "color" will be equal to the first argument, otherwise it will be the same to "black" .

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

There are also 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 label to identify a loop , and then use break or #

I left the latter option only for curiosity level I almost never see subjects about these labels , I also do not use too often, but they are very interesting, I recommend you to see the links.

    
15.01.2016 / 23:53
7

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 : which 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 window object with the value of the bar variable. 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.

However to create an object already with a key / value pair, or an object with many pairs, you must use the notation / syntax chave:valor , that is, a literal Object:

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

alert(objeto.foo + ' ' + objeto.bar);
    
16.01.2016 / 00:02
6

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

Then 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 it is a member of the prototype, which in the background is a data map, a hash table a>.

The value saved 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 like this, just for the sake of understanding (not a pure and simple substitution):

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

Or so:

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