-4

I'm still a newbie to JavaScript and I'm noticing some differences in (syntax only I'm hoping) the way methods are defined.

Some (according to http://www.w3schools.com/js/js_object_methods.asp) are defined as

MyObj = function(){
    myMethod: function(){...}
}

Whereas other times they may be defined as

MyObj = function(){
    function myMethod(){...}
}

I'm hoping this is just two different ways of doing the same thing, that is also treated (and represented internally) the same way.

Is this the case?

Is it also permissible to write the method in the same pattern as the class such as

MyObj = function(){
    myMethod = function(){...}
}
WoodMath
  • 521
  • 2
  • 8
  • 14
  • Your first snippet mixes function and object literal definition and is not valid Javascript (e.g. Firefox says *SyntaxError: function statement requires a name* because it considers `myMethod:` as a label and the subsequent function definition lacks a name). – Frédéric Hamidi Sep 06 '15 at 17:03
  • 1
    Neither of those is correct. Without seeing what you're actually asking about, we can't help you. – T.J. Crowder Sep 06 '15 at 17:04
  • Maybe you want to read [this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects) and [this](http://stackoverflow.com/q/1635116/5247200) – David Sep 06 '15 at 17:11
  • How am I misinterpreting the info located at http://www.w3schools.com/js/js_object_methods.asp then? – WoodMath Sep 06 '15 at 17:12
  • 3
    @WoodMath: That's your mistake: w3schools is notoriously rubbish. Consider examples here on SO instead, on [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript) (which is *usually* pretty good), or just about anywhere else. That said, if I follow that link, I don't see anything actually *wrong*, nor do I see the examples you've given above. I do see a page that's really unclear (which is part of why w3schools is rubbish) and examples without context. Context is a really big deal in programming. – T.J. Crowder Sep 06 '15 at 17:13
  • T.J. Crowder: The code I was referencing is the First snippet at http://www.w3schools.com/js/js_object_methods.asp under the first section called Accessing Object Methods reading "methodName : function() { code lines }". Try looking a little harder next time. – WoodMath Sep 06 '15 at 17:20
  • Just to give you an idea how bad w3schools is, I run a browser plug-in that automatically removes them from all search results when I'm searching. There are so many good Javascript resources on the internet, you really should not spend any time with w3schools. I pretty much always start with MDN and StackOverflow as good places to look. – jfriend00 Sep 06 '15 at 17:22
  • What you referred to "Accessing Object Methods" show partial and incomplete pieces of Javascript, not full working examples. You have to put that code into the right context for it to work. This is yet another reason why it's a bad site that has somehow mastered good SEO even though it has poor content. – jfriend00 Sep 06 '15 at 17:24
  • @WoodMath: Right: Context is everything. That line is valid in an object initializer, as I said in my answer. It is not valid where you've put it in your question. – T.J. Crowder Sep 06 '15 at 17:26
  • @WoodMath: *"Try looking a little harder next time."* There's exactly zero call to be rude. Did you miss the minor fact that **I've tried to help you here**? With the comments, with an answer. I'm off to help someone polite. – T.J. Crowder Sep 06 '15 at 17:27
  • @T.J. Crowder: Unfortunatley I really had no way of knowing about w3schools as up until about a week ago, I had no experience in web programming. – WoodMath Sep 06 '15 at 17:28
  • @T.J. Crowder: You're right, it was rude, and I apologize. But when you write short unhelpful responses such as "neither is correct", and when I provide the source of my info, but you reply you don't see anything, it doesn't exactly help the situation. Have you ever tried learning something new only to feel that the "knowledgeable" people were more belittling to you than actually being helpful? I was responding out of frustration and I apologize. – WoodMath Sep 06 '15 at 17:35
  • @WoodMath: Yes -- **and** I also posted an answer doing my best to answer the question. Anyway, water under the bridge. – T.J. Crowder Sep 06 '15 at 17:38
  • 1
    @T.J. Crowder: Thank you for your understanding and you patience. Though I explained where my frustration was coming from, it does not negate the fact that it uncalled for and unhelpful to the situation. As you also pointed out, it was especially so when responding to someone that was attempting to help me. And again, I apologize. – WoodMath Sep 06 '15 at 17:42

1 Answers1

1

Both of your examples are incorrect. I suspect you mean:

MyObj = {
    myMethod: function(){/*...*/}
};

and

MyObj.myMethod = function myMethod(){/*...*/};
// or
MyObj.myMethod = function(){/*...*/};

In the first example, an object initializer is being used to create the object and assign it to the variable MyObj. An object initializer consists of a series of property initializers in the form propertyName: propertyValue. In that example, the property name is myMethod and the property value is an anonymous function declaration.

In the second example, the object already exists, and we're just adding a property to the existing object using a normal assignment expression.

In both cases, yes, you end up with a property called myMethod which refers to a function.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • What would happen if instead it was declared as "MyObj.myMethod = function anotherMethod(){/*...*/};" where the the names of the method did not match? It was my understanding that this was actually using the method 'anotherMethod' to assign a value to the property called 'myMethod'. Is this whats going on or is there some other interpretation I'm not aware of? – WoodMath Sep 06 '15 at 17:22
  • What would happen if instead it was declared as "MyObj.myMethod = function anotherMethod(){/*...*/};" where the the names of the method did not match? It was my understanding that this was actually using the method 'anotherMethod' to assign a value to the property called 'myMethod'. Is this whats going on or is there some other interpretation I'm not aware of? – WoodMath Sep 06 '15 at 17:36
  • 1
    @WoodMath: The name of a function has no relation to the property name it may be assigned to. In that example you have a *named function expression*. You can learn more about them here: https://kangax.github.io/nfe/ – Felix Kling Sep 06 '15 at 17:37
  • If you did that, you'd have a property called `myMethod` which referred to a function with the name `anotherMethod`. You'd call it via `MyObj.myMethod`. Within the function, it could refer to itself with the name `anotherMethod`. – T.J. Crowder Sep 06 '15 at 17:38
  • Does the first line reading MyObj = { myMethod : function(){/*...*/} } create a 'class' called 'MyObj' or a 'Class Instance' called 'MyObj'? It was my understanding that when using syntax such as 'VarName = {/*...*/}' you were actually creating a (generic, not in the OOP sense) class instance who had data memebers that are part of the instance, but not of the class itself? What would you use to define the constructor if you say needed to initialize as say 'MyObj(1,2)'? – WoodMath Sep 06 '15 at 18:08
  • 1
    @WoodMath: It creates a one-off object. JavaScript doesn't have classes. It does have *constructor functions* (which are a form of factory function) that you use with `new` and which create objects with a prototype object that backs them up. ES6 adds semantics for doing that with a keyword `class`, but it's not really class, it's just syntactic sugar for constructor functions. – T.J. Crowder Sep 06 '15 at 18:47