Is this a method?

[nixnerd]

Is the variable ‘rules’ a method?

var rules = {
  required: function(x) {
    return !!x
  },
  email: function(x) {
    return emailRegex.test(x)
  },
  phone: function(x) {
    return phoneRegex.test(x)
  }
}

var validate = function(value, rule) {
  return rules<a href="value">rule</a>
}

input.addEventListener('keyup', function() {
  var isValid = validate(this.value, this.dataset.rule)
  this.classList.toggle('valid', isValid)
})

[__]

no, it’s a plain object which contains methods.

[Alen]

JavaScript objects have no methods. Objects have properties that contain function objects. :)

[__]

JavaScript objects have no methods. Objects have properties that contain function objects. :)

: p

[christopherfuston]

No

[nixnerd]

Damn. Still kinda lost. I’ll keep plugging away and see if I can figure out what I need to.

[JacobPeters]

JavaScript objects have no methods. Objects have properties that contain function objects. :)

I would have to disagree with that. Objects have ‘.prototype’ that holds their methods, and I think that functions in the module pattern are very method like. Properties define state. Methods define actions on that state.

Also, if you want to call everything in an Object a property, then Objects have properties that are function objects. The Object contains function objects. The Object’s property is a function object.
(note: I’m not saying that objects must contain function objects or that all object properties have to be function objects)

[__]

I can’t speak for him, but I don’t think @alenabdula’s comment was an argument as much as a technical point.

From a practical perspective, function properties are methods, because that’s how you use them. But they are implemented in exactly the same way as non-function properties, and —in terms of how they are assigned, referenced, etc.— are functionally indistinguishable. You can’t tell the difference until you inspect the value of the property itself. Even an object’s .prototype is really just a named property that refers to the object it inherits from.

Joe, what are you “lost” on?

[nixnerd]

Joe, what are you “lost” on?

Quite honestly I’m not sure. This is a rough piece of code for a form I’m building (but not working on today). Basically, I’m trying to have proper abstraction/separation. Basically, I need to house all the rules for the input fields in an object… and I guess pass the input to that object for everything to be checked.

Does that make sense?

All I know is… I was doing this with if/else… which apparently makes me a horrible person.

[__]

You want something like this?

var validator = (function(){
    
    var onChange = function( input,rule ){
            try{
                if( typeof thisObject[rule] !== 'function' ){
                    throw new Error( '"'+rule+'" is not a rule' );
                }
                if( ['INPUT','SELECT','TEXTAREA'].indexOf( input.tagName ) === -1 ){
                    throw new Error( '[input] is not a form input' );
                }
                if( thisObject[rule]( input.value ) ){
                    input.classList.remove( 'invalid' );
                    input.classList.add( 'valid' );
                    return true;
                }
                else{
                    input.classList.remove( 'valid' );
                    input.classList.add( 'invalid' );
                    return false;
                }
            }
            catch( e ){ /*  do error handling stuff  */ }
        },
        RX = {
            email: /put your regex here/,
            phone: /put your regex here/
        },
        thisObject = {
            addRule:  function( input,rule ){
                input.addEventListener(
                    'change',
                    function(){ onChange( input,rule ); },
                    false
                );
            },
            required: function( value ){ return !!value; },
            email:    function( value ){ return RX.email.test( value ); },
            phone:    function( value ){ return RX.phone.test( value ); }
        };
    
    return thisObject;
})();

example pen

A few things could be better, but this works so far. Since you used .classList in your original code, I figured you don’t need to worry too much about IE.

[nixnerd]

I need to take a look at that. However… I didn’t write the original code. Some dude on #Javascript IRC channel did.

I’m going to need to go through it step by step to really understand. I hate taking code on faith.

Thanks for writing up that example dude. Really appreciate it.

[JacobPeters]

Here it is implemented in a slightly different way. I know it always helped me to see how different people implemented the same thing when I was learning.

http://codepen.io/jacobcpeters/pen/qAILc

__, I basically stole your functions but implemented them in a more traditional OOP way.

Also, I like keyup better than change for input validation. I feel it gives more useful feedback to the user.

[nixnerd]

Wow… you guys are amazing. I can’t wait to dig into this tomorrow. Amazing.

[Alen]

@JacobPeters good stuff

[JacobPeters]

Personally, I see methods as a pattern more than anything else. OOP is just a code organization pattern. It all gets turned into machine code. Variables and functions are both the same at that point. There is no differentiation between private and public functions when you get down to it. It’s all 1’s and 0’s.

Functions are instruction data, and variables are state data. Methods are functions that operate on a group of variables. In C++ a class is essentially a struct for each instance of the class and a virtual method table (vtable). When you call a class method you lookup the memory address of the method in the vtable. Then the method is called with a pointer to memory address of the state struct as the first argument of the function.

In short, you write this:classInstance.classMethod(x, y), and what really happens is this: classMethod(&classInstance, x, y).

That first argument is the this pointer. However, javascript’s this doesn’t work the same way though, and it can make things frustrating sometimes. I think this is why some say that javascript doesn’t have methods, but I reject that. Methods are not syntax sugar to make working with state variables easier. They are simply functions that work on a group of state variables. Any language can implement that.

The fact that javascript is dynamically typed and functions look the same as variables in the implementation is completely orthogonal to the discussion of whether methods can or cannot exist in a language.

[Author]

Posts