JavaScript function declaration, a colon in function declaration

Related searches

What is the difference between function declaration function test() and test: function() in JavaScript?

function test() {
    …
}

vs.

test: function() {
    …
}

In the question «var functionName = function() {} vs function functionName() {}» functions were declared like:

function test() {
    …
}

and

var test = function() {
    …
};

Which is a bit different from syntax perspective comparing to my question.

function test() is normal function declaration which you can call directly using function name. While test: function() is the function defined inside some object, so it has to be called using object on which it is defined.

Example

Function Declaration

function test() {
    alert('In Test');
}

test(); // Calling test

Method

var myObj = {
    test: function() {
        alert('Inside test');
    }
};

myObj.test(); // Calling test

6 Ways to Declare JavaScript Functions, It has also removed (or deprecated) syntax that many JavaScript Do NOT include semi-colons at the end of function declarations, loops,� When the function is called in lines (*) and (**), the given values are copied to local variables from and text. Then the function uses them. Here’s one more example: we have a variable from and pass it to the function. Please note: the function changes from, but the change is not seen outside, because a function always gets a copy of the value:

Consider this javascript object :

{ "name" : "Joe",
  "age" : "23"}

Javascript being weakly typed, you can replace "23" (string) with 23 (number) :

{ "name" : "Joe",
  "age" : 23}

No error, works perfectly.

Actually, you can replace 23 with anything else : a boolean

{ "name" : "Joe",
  "age" : true}

another object

{ "name" : "Joe",
  "age" : {"2014" : 22 , "2015": 23 } }

or even a function

{ "name" : "Joe",
  "age" : function(){ alert("23");} }

Sidenote : some people hate Javascript for being so lax. Other people (like me) love Javascript for this very same reason, because this flexibility is its power (that and being asynchrounous).

You can name that object "person" and ask for his name and age :

var person = { "name" : "Joe",
      "age" : function(){ alert("23");} }

console.log( person.name ); // will log "Joe"
person.age(); // "age" is a function, so you need to call it. It will alert 23.

Now you can create a function that will return that object :

function Person() {
    return{
      "name" : "Joe",

      "age" : function(){ alert("23");},

      sayHello : function() {
        alert("Hello");
      },

      sleep : function() {
        alert("I'm sleeping");
      }
    }
};

console.log( Person().name ); // logs "Joe"
Person().age(); // alerts "23"
Person().sayHello(); // alerts "Hello"
Person().sleep(); // alerts "I'm sleeping".

age, sayHello and sleep are functions, that are called methods of the Person function.

One usually avoids calling Person() multiple times, and create a new Person instead :

var person = new Person();
person.sayHello(); // alerts "Hello"
person.sleep(); // alerts "I'm sleeping".

This method allows to create many persons, by passing parameters :

function Person(name, age) {
    return{
        "name" : name,

        "age" : function(){ alert(age);},

        sayHello : function() { // sayHello or "sayHello", both work
          alert("Hello, my name is "+ this.name );
        },

        sleep : function() {
          alert("I'm sleeping");
        }
     }
};

var person = new Person("John", 25);
person.sayHello(); // alerts "Hello, my name is John"
person.age(); // alerts "25".

This method currently replace classes, that Javascript 5 (EcmaScript 5) lacks. But EcmaScript 6 will come soon, with proper classes.

A Guide to Enhanced Readability with semi-colons in ES6, The point is to both bind and call the function with the obj as context. the :: syntax can still be useful to better highlight the programmer's intention of referencing� An arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.target keywords. Arrow function expressions are all suited as methods, and they cannot be used as constructors.

There are three differences in the test:function() and function test().

Calling:

test:function() will a function defined inside the object. So you will need it to call from that object. function test() is a normal function you call call it using test(). Consider this example.

const obj = {
  insidefunc:function(){
    console.log("Inside");
  }
}
function test(){
  console.log("Outside");
}

obj.insidefunc(); //Inside
test(); //Outside

insidefunc(); //Uncaught ReferenceError: insidefunc is not defined
 

What is the point of double colon with method calls? : javascript, What you're doing is creating an object using a literal declaration and json What you are attempting to do is to write a function the wrong way. The main difference in this way of declaring a function is that, with the function declaration, the function is hoisted. This means that, when your app runs, the function is defined at the top of your Javascript instead of where it actually appears in the code.

JavaScript: why colon (:) and not equals (=), The same is for the function name and definition. On the other hand, the property name and value are separated by a ":" i.e. colon symbol in literal� Declarations in Program or Function Body (no-inner-declarations) In JavaScript, prior to ES6, a function declaration is only allowed in the first level of a program or the body of another function, though parsers sometimes erroneously accept them elsewhere. This only applies to function declarations; named or anonymous function expressions can

Constructor Vs Literal Notation In JavaScript, In JavaScript, if no return value is specified, the function will return undefined. Functions are objects. Define a Function. There are a few different ways to define a function in JavaScript: A Function Declaration defines a named function. To create a function declaration you use the function keyword followed by the name of the function. When

Function Declarations. A function declaration tells the compiler about a function name and how to call the function. The actual body of the function can be defined separately. A function declaration has the following parts − return_type function_name( parameter list ); For the above defined function max(), the function declaration is as

Comments
  • possible duplicate of var functionName = function() {} vs function functionName() {}
  • The questions are not the same. It's not a dublicate
  • The second one is a syntax error. Couldn't you have tried that out yourself?
  • test: function() is not a syntax error. This function is declared inside the object. Tushar explained it well
  • it's a great intro to JS classes but it doesn't answer the OP's question.