Clarifications...

This is a clever way to make the code more compact.

The object nameActions contains several methods with names that are the same as the legends on the buttons that will be used to invoke them. So when you put the text from the button into the string variable action, it can then be used as an index to select the desired method.

So, for example if action contains the string "edit", then nameActions[action] will be the same thing as nameActions["edit"] which is also the same as nameActions.edit — all of these refer to the edit method.

Then, adding parentheses to the method name causes that method to be invoked (or "called").

So, when action = "edit" then nameActions[action]() will be the same thing as nameActions.edit()`. This allows one line of code to do the same job as several lines that test the value of action and then call a different method.

This can also cause problems if you're not consistent with how you write the names (lowercase vs. capitalized). My 'Edit' and "Remove' were capitalized here:

const li = document.createElement('li'); appendToLI('span', 'textContent', text);
appendToLI('label', 'textContent', 'Confirmed') .appendChild(createElement('input', 'type', 'checkbox'));
appendToLI('button', 'textContent', 'Edit'); appendToLI('button', 'textContent', 'Remove'); return li;

but lowercase here:

ul.addEventListener('click', (e) =>{ if (e.target.tagName === 'BUTTON') { const button = e.target; const li = button.parentNode; const ul = li.parentNode; const action = button.textContent; const nameActions = { remove: () => { ul.removeChild(li); }, edit: () => { const span = li.firstElementChild; const input = document.createElement('input'); input.type = 'text'; input.value = span.textContent; li.insertBefore(input, span); li.removeChild(span); button.textContent = 'save'; }, save: () => { const input = li.firstElementChild; const newSpan = document.createElement('span'); newSpan.textContent = input.value; li.insertBefore(newSpan, input); li.removeChild(input); button.textContent = 'edit'; } };

So, I kept getting this:

Uncaught TypeError: nameActions[action] is not a function at HTMLUListElement.ul.addEventListener (app.js:115)

Be careful!

nameActions is a collection of objects. action is the key in the key:value pair. Such as when we have an object:

const someObject = { 
  key0: value0,
  key1: value1,
  key2: value2
}

If you want to access a value in that collection, you use the syntax collection name square brackets key. For example: someObject[key0] will return value0. Does that help?