CODEWITHSUNDEEP
javascriptfunction
e-d-i
e-d-i

Reputation: 39

How to pass a function as argument to other functions in order to avoid repeating code

I'm trying to implement handleLocalStorage into some other functions in order to avoid repeating code.

But how exactly can I pass the above mentioned function to other functions?

Any help is much appreciated.

function handleLocalStorage() {
  let localTodos;
  if (localStorage.getItem("localTodos") === null) {
    localTodos = [];
  } else {
    localTodos = JSON.parse(localStorage.getItem("localTodos"));
  }
}

function saveTodos(todo) {
  // let localTodos;
  // if (localStorage.getItem("localTodos") === null) {
  //   localTodos = [];
  // } else {
  //   localTodos = JSON.parse(localStorage.getItem("localTodos"));
  // }

  localTodos.push(todo);
  localStorage.setItem("localTodos", JSON.stringify(localTodos));
}

function getTodos(todo) {
  // let localTodos;
  // if (localStorage.getItem("localTodos") === null) {
  //   localTodos = [];
  // } else {
  //   localTodos = JSON.parse(localStorage.getItem("localTodos"));
  // }

  localTodos.forEach(function(todo) {
    const newTodoDiv = document.createElement("div");
    newTodoDiv.classList.add("todo");

    const todoTitle = document.createElement("li");
    todoTitle.innerText = todo;
    todoTitle.classList.add("todo-item");
    newTodoDiv.appendChild(todoTitle);

    const checkedBtn = document.createElement("button");
    checkedBtn.innerHTML = "<i class='far fa-check-square'></i>";
    checkedBtn.classList.add("checked-btn");
    newTodoDiv.appendChild(checkedBtn);

    const delBtn = document.createElement("button");
    delBtn.innerHTML = "<i class='far fa-trash-alt'></i>";
    delBtn.classList.add("del-btn");
    newTodoDiv.appendChild(delBtn);

    todoList.appendChild(newTodoDiv);
  });
}

function clearTodos(todo) {
  // let localTodos;
  // if (localStorage.getItem("localTodos") === null) {
  //   localTodos = [];
  // } else {
  //   localTodos = JSON.parse(localStorage.getItem("localTodos"));
  // }

  const todoIndex = todo.children[0].innerText;
  localTodos.splice(localTodos.indexOf(todoIndex), 1);
  localStorage.setItem("localTodos", JSON.stringify(localTodos));
}

Upvotes: 0

Views: 68

Answers (5)

rahulg510
rahulg510

Reputation: 63

You can have handleLocalStorage return localTodos instead of passing it to other functions and simply call it where it is needed.

function handleLocalStorage() {
  let localTodos;
  if (localStorage.getItem("localTodos") === null) {
    localTodos = [];
  } else {
    localTodos = JSON.parse(localStorage.getItem("localTodos"));
  }
  return localTodos;
}


function saveTodos(todo) {
  let localTodos = handleLocalStorage();
  localTodos.push(todo);
  localStorage.setItem("localTodos", JSON.stringify(localTodos));
}

P.S. In javascript, if you need to pass function to a different function, you can simply pass it like you would any other argument.

function funcA(){return 10;}
function funcB(fun){console.log(fun());}
funcB(funcA);
//logs 10

Upvotes: 1

Nitheesh
Nitheesh

Reputation: 19986

If you want to pass a function as an argument to an another function, you can specify the name of function as the argument.

Working Example

function handleLocalStorage() {
  console.log('Inside handleLocalStorage function');
}

function saveTodos(listner) {
  //listner is handleLocalStorage function
  console.log('Inside saveTodos function');
  console.log('clearTodos saveTodos calls handleLocalStorage');
  listner();
}

function getTodos(listner1, listner2) {
  //listner1 is saveTodos function
  //listner2 is saveTodos handleLocalStorage
  console.log('Inside getTodos function');
  console.log('clearTodos getTodos calls saveTodos');
  listner1(listner2);
}

function clearTodos(todo) {
  console.log('Inside clearTodos function');
  console.log('clearTodos function calls getTodos');
  getTodos(saveTodos, handleLocalStorage);
}

clearTodos();

Upvotes: 0

Hussain
Hussain

Reputation: 224

You can easily pass functions to parameters of other functions. For example:

function foo() {
  console.log("foo");
}

function bar(functionParam) {
  functionParam();
  console.log("bar");
}

bar(foo); // The console output is `foo\nbar`

However, I think this will not help you. You can simply use function calls to achieve the effect you want. Like so:

function getLocalTodos() {
  let localTodos;
  if (localStorage.getItem("localTodos") === null) {
    localTodos = [];
  } else {
    localTodos = JSON.parse(localStorage.getItem("localTodos"));
  }
  return localTodos;
}

function saveTodos(todo) {
  let localTodos = getLocalTodos();

  localTodos.push(todo);
  localStorage.setItem("localTodos", JSON.stringify(localTodos));
}

Upvotes: 1

Asad Hayat
Asad Hayat

Reputation: 400

let funcA = function () { 
    console.log("Hello from funcA"); 
}
let funcB = function(funcAsArgument, otherArgument) {
    funcAsArgument();
    console.log("Other Argument: ", otherArgument);
}

funcB(funcA, "Dummy Argument") //Passing funcA() as argument to funcB

// Prints
// Hello from funcA
// Other Argument:  Dummy Argument
//

Upvotes: 0

Liad
Liad

Reputation: 844

you can pass a function as a parameter to another function, this is usually referred to as "callback functions".

first i would make the handleLocalStorage function return the localTodos value:

function handleLocalStorage() {
  const localTodos = localStorage.getItem("localTodos");
  if (localTodos === null) {
    return [];
  }

  return JSON.parse(localTodos);
}

then add another argument to your function's signature and then call this argument (like you call a function)

function saveTodos(getLocalTodos, todo) {
  const localTodos = getLocalTodos();
  ... //rest of code

then just send it as an argument:

saveTodos(handleLocalStorage, todo);

Upvotes: 1

Related Questions