Author: John Au-Yeung

Sometimes, we want to add named function parameters with JavaScript.

In this article, we’ll look at how to add named function parameters with JavaScript.

How to add named function parameters with JavaScript?

To add named function parameters with JavaScript, we can make a function accept an object as a parameter.

Then we can destructure the object’s properties into variables.

For instance, we write:

const callApi = ({
  url,
  callback,
  query = {},
  body = {}
}) => {

}

callApi({
  url: "/api/..",
  callback: (x => console.log(x)),
  body: {
    a: 2
  }
})

We have the callApi function that takes an object with the url, callback, query and body properties.

We set the default value of query and body to an empty when it’s not set.

Then we call it with an object with those properties set.

Conclusion

To add named function parameters with JavaScript, we can make a function accept an object as a parameter.

Then we can destructure the object’s properties into variables.

Sometimes, we want to use is the equivalent of Ruby’s binding.pry for JavaScript console to debug JavaScript apps.

In this article, we’ll look at what is the equivalent of Ruby’s binding.pry for JavaScript console to debug JavaScript apps.

What is the equivalent of Ruby’s binding.pry for JavaScript console?

The equivalent of Ruby’s binding.pry for JavaScript console to debug JavaScript apps is the debugger keyword.

To use it, we add debugger into our code.

And when the browser developer tools is open, the app will stop at the point where the debugger keyword is at.

For Node.js apps, we can use node debug appname.js with `debugger to achieve equivalent functionality

Conclusion

The equivalent of Ruby’s binding.pry for JavaScript console to debug JavaScript apps is the debugger keyword.

Sometimes, we want to create ul and li elements in JavaScript.

In this article, we’ll look at how to create ul and li elements in JavaScript.

How to create ul and li elements in JavaScript?

To create ul and li elements in JavaScript, we can use the document.createElement method.

For instance, we write:

const createList = (spaceCrafts) => {
  const listView = document.createElement('ol');
  for (const s of spaceCrafts) {
    const listViewItem = document.createElement('li');
    listViewItem.appendChild(document.createTextNode(s));
    listView.appendChild(listViewItem);
  }
  return listView;
}

const spaceCrafts = ['foo', 'bar', 'baz']
const ol = createList(spaceCrafts)
document.body.appendChild(ol)

We create the createList function that takes the spaceCrafts array.

In it, we call document.createElement with 'ol' to create an ordered list element.

Then we loop through the spaceCrafts array with the for-of loop.

In the loop, we call document.createElement with 'li' to create an li element.

And we call listViewItem.appendChild with a text node that we create from a spaceCraft entry s.

Finally, we call listView.appendChild with listViewItem to attach it to the listView as its child.

Next, we call createList with spaceCrafts to create the list.

And then we call document.body.appendChild(ol) to append the ol element as a child of the body element.

Conclusion

To create ul and li elements in JavaScript, we can use the document.createElement method.

Sometimes, we want to convert a JavaScript plain object into model class instance.

In this article, we’ll look at how to convert a JavaScript plain object into model class instance.

How to convert a JavaScript plain object into model class instance?

To convert a JavaScript plain object into model class instance, we can use the Object.assign method.

For instance, we write:

class Model {
  constructor(obj) {
    Object.assign(this, obj)
  }
  print() {
    console.log(this.a);
  }
}

const obj = {
  a: 'a',
  b: 'b',
  c: 'c'
}
const m = new Model(obj)
console.log(m)
m.print()

to call Object.assign with this and obj in the Model class constructor.

This will merge the contents of obj into this.

Next, we instantiate a Model instance with obj.

And then we call m.print to print the content of this.a, which is 'a'.

Conclusion

To convert a JavaScript plain object into model class instance, we can use the Object.assign method.

Sometimes, we want to dynamically add a new column to an HTML table with JavaScript.

In this article, we’ll look at how to dynamically add a new column to an HTML table with JavaScript.

How to dynamically add a new column to an HTML table with JavaScript?

To dynamically add a new column to an HTML table with JavaScript, we can loop through each row and add td elements into them.

For instance, we write:

<table id="table">
  <tr>
    <th><input type="text" value="test 1" /></th>
  </tr>
  <tr>
    <td><input type="text" value="test 2" /></td>
  </tr>
</table>

<button type="button">add column</button>

to add a table with an add column button.

Then we write:

const addColumn = () => {
  for (const [i, row] of [...document.querySelectorAll('#table tr')].entries()) {
    const input = document.createElement("input")
    input.setAttribute('type', 'text')
    const cell = document.createElement(i ? "td" : "th")
    cell.appendChild(input)
    row.appendChild(cell)
  };
}

document.querySelector('button').onclick = addColumn

to add the addColumn function and assign that as the click handler of the button.

In addColumn, we loop through each row with a for-of loop.

In the loop block, we create an input and set the type attribute of it with:

const input = document.createElement("input")
input.setAttribute('type', 'text')

Then we create a new table cell with:

const cell = document.createElement(i ? "td" : "th")

Next, we add the input into the cell with:

cell.appendChild(input)

Finally, we add the column cell to the row with:

row.appendChild(cell)

And we repeat this for the other rows.

Now when we click on the add column button, we see a new column added.

Conclusion

To dynamically add a new column to an HTML table with JavaScript, we can loop through each row and add td elements into them.