TODO APP: Is one monster function better than several smaller functions?

Question

I am learning to code by making a todo app in pure javascript. My first attempt can be seen here: conquerjs.com/todo

It's all cosmetic, meaning it stores no information, generates no objects or arrays, though it was sure fun to learn how to manipulate DOM elements in pure javascript and building my first "program"!

I am rebuilding it in a more OOP manner. In this first Jsfiddle: https://jsfiddle.net/zv6ohr9b/

when(toDo, "keypress", function(event){
  if (event.key == "Enter" || event.keyCode == 13) {
    pushArray();
    toDo.value = "";
  }
});

function pushArray(){
  var nt = new Task(toDo.value, "No note yet");
  fruits.push(nt);
  var task = document.createElement("div");
  task.setAttribute("class", "taskitem");
  task.innerHTML = nt.Name;
  var t = document.createElement("input");
  t.setAttribute("class", "tasknote");
  task.appendChild(t);
  when(t, "keypress", function(event){
  if (event.key == "Enter" || event.keyCode == 13) {
    nt.Note = t.value;
    this.parentNode.innerHTML = nt.Name + " " + nt.Note;
    t.value = "";
  }
});

  result.appendChild(task);
  console.log(fruits);
}

hitting enter fires a function that does everything. creates a new task object, pushes it to the array, displays the task and appends a note that can be updated anytime, for example - task:get milk note:almond milk. However I eventually want to rebuild this app again using local storage, and again with ajax and JSON. I'm thinking I'm going to have a hard time injecting that functionality into this single function without breaking it. So I did it again and broke the steps down into several smaller functions that 'plug' into each other: https://jsfiddle.net/8wm0r345/

  function Task(name, note) {
  this.Note = note;
  this.Name = name;
  this.completed = false;
}

function pushArray() {
  var nt = new Task(toDo.value, "No note yet");
  taskArray.push(nt);
  displayArray(result, nt.Name);
  appendNote(result, nt);
}

function displayArray(x, obj) {
  var task = make("div", "class", "taskitem", obj);
  x.appendChild(task);
}

function appendNote(el, obj) {
  var t = make("input", "class", "tasknote");
  el.appendChild(t);
  when(t, "keypress", submitNote.bind(null, obj, t));
}

function submitNote(newTask, theInput) {
  if (event.key == "Enter" || event.keyCode == 13) {
    newTask.Note = theInput.value;
    var n = make("div", "class", "hasNote", newTask.Note);
    var t = theInput;
    t.parentNode.insertBefore(n, t.nextSibling);
    t.parentNode.removeChild(t);
    when(n, "dblclick", function() {
      n.parentNode.insertBefore(t, n.nextSibling);
      n.parentNode.removeChild(n);
    });
  }
}

My question is: What is the recommended approach to building a small program like this? And are there any alarming issues in either code presented here? Thank you.

This sounds more like [code review](http://codereview.stackexchange.com/) — Matt Burland, Jan 12 '16 at 21:56
Although after looking around on there the questions are exactly the same as are asked on here. I'm basically asking the best implementation of functionality with functions in a small program...I thought it was a question in similar style to http://stackoverflow.com/questions/483073/getting-a-better-understanding-of-callback-functions-in-javascript?rq=1 which is upvoted a lot. — codemon, Jan 12 '16 at 22:06
That was a question from 2009. The standards have evolved since then (not I haven't voted to close your quesiton - although some others have). It's also a question that is much more focused and smaller in scope. — Matt Burland, Jan 12 '16 at 22:07
*"Is one monster function better than several smaller functions?"* - this is very opinion based. If each small function is called only once, then there is no need for them to be in separate functions. It might make it more readable, but this is very subjective. Sometimes a function can be created even when it is called only once, because it reduces indentation and therefore improves readability, but this too is subjective. — Artjom B., Jan 12 '16 at 22:11
[Cross-posted to Code Review](http://codereview.stackexchange.com/q/116607/9357). — 200_success, Jan 12 '16 at 22:33

score 2 · Answer 1 · answered Jan 12 '16 at 22:14

2

To answer your question directly: generally it is better to have several smaller functions rather than one large function. Generally speaking, it is easier to re-use code that is in discreet pieces and it is generally easier / quicker to unit-test smaller functions. Small functions can be chained together into one large function (if it makes sense to do so due to application function requirements).

answered Jan 12 '16 at 22:14

Rob Welan

2,070
1
11
20

Thank you, indeed I want to continue adding functionality to this app, from localstorage, to ajax calls, to various slide-toggle animations etc. Since I'm doing this in pure javascript it might add up to a decent amount of code. Using smaller functions that do fewer things seems good practice. It also seems to help with making code more modular, which seems to be the recommended way of doing things. – codemon Jan 12 '16 at 22:19
look for javascript libraries that you can plug-in that take on the "heavy lifting" of local storage transactions. – Rob Welan Jan 12 '16 at 22:21
I will eventually but I'm trying to use pure js as much as I can for now without any libraries or frameworks. – codemon Jan 12 '16 at 22:25

TODO APP: Is one monster function better than several smaller functions?

1 Answers1