如何将 function 作为参数传递给其他函数以避免重复代码

Question

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)); }

Answer 1

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);

Answer 2

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));
}

Answer 3

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));
}

PS 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

Answer 4

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
//

Answer 5

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();