4

In Javascript it's very easy to attach methods to objects, either directly or via the prototype chain. Many libraries that I use have this behaviour. An example would be AngularJS's $resource library where returned objects have some magic methods on them like .$save() and .$delete() which trigger requests to the server.

However, after using Clojure for a while, I've begun to like its methodology of passing data structures to functions to trigger behaviour and for my next JavaScript project I'm considering trying to write it in this style.

My question is, what are the pros and cons to each of these ways of programming?

What are the pros/cons to attaching methods directly to objects (and as a result, usually mutating the object in place) vs. passing the object as a pure data structure into a function which will return a new data structure after processing it.

I realise in AngularJS that to take advantage of the two way binding you generally need to use the first system, however it seems that a framework like React can take advantage of either mutating in place or working with new instances of objects.

Improve this question
6
  • I think you need to read up on the general concept of Object-Oriented Programming. That should explain the value of the method approach. Commented Oct 10, 2014 at 21:58
  • @RobM. function foo(){ } only becomes window.foo in global scope. Commented Oct 10, 2014 at 22:10
  • @Barmar as mentioned in one of the answers, JS supports many different paradigms of programming. I'm interested in the trade offs between an immutable, lisp style implementation of a program vs a mutation based OOP style. Commented Oct 10, 2014 at 23:39
  • @Samuel Mutation is an independent issue. You can do mutation in the function-calling style, since objects and arrays are passed by reference. Commented Oct 11, 2014 at 0:26
  • @Barmar correct, however I would consider an OOP style in JS implying mutation of the object the methods are attached to, whereas a function calling style can modify the passed in object or return a new data structure. Commented Oct 11, 2014 at 0:40

1 Answer 1

Reset to default
1

Very good question.

I'd distinguish "my classes" i.e. the code I control and "foreign classes", i.e. external code I use - be it built-in things or third-party libs.

For my own code I often prefer going the OOP way so I'd rather do myObject.doSomething() than My.doSomething(object), but it really depends.

For the "foreign" code I almost neven "attach" methods there. Only in absolutely exceptional cases. I don't extend built-in objects and classes with my methods. I almost never inject methods into foreight classes and instances.

The main reason for this is compatibility. If I might thing that adding some split method to the ForeignClass is a good idea, someone else may come to the same idea. And their split may do something completely different from mine. Look how AngularJS considers this problem: they use the $method naming conventions in an attempt to make collisions less likely.

If you're focusing less on injecting methods in foreign classes or objects and more on the OOP side, then it really depends on the use case. Don't put your programming paradigm before your actual needs. If you have some domain area, you may be much better of designing it in OO-terms. And vice versa, if you just do stateless functions, there's actually not much need in instances.

This is actually one of the best things in JavaScript - you can implement and use different paradigms at the same time without any technical problems.

Hope it helps.

ps. One of the other relevant terms is anemic data model.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks for the tip on the anemic data model, very interesting.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.