Category: JavaScript Answers

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 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 get the hour difference between two times with moment.js and JavaScript.

In this article, we’ll look at how to get the hour difference between two times with moment.js and JavaScript.

Get the Hour Difference Between Two Times with Moment.js and JavaScript

To get the hour difference between two times with moment.js and JavaScript, we can use the duration, diff, asHours and asMinutes methods.

For instance, we can write:

const startTime = moment("12:26:59 am", "HH:mm:ss a");
const endTime = moment("06:12:07 pm", "HH:mm:ss a");
const duration = moment.duration(endTime.diff(startTime));
const hours = parseInt(duration.asHours());
const minutes = parseInt(duration.asMinutes()) % 60;

console.log(hours, minutes);

We parse 2 times into moment objects with the moment function.

We pass in the format of the time as the 2nd argument.

Then we call moment.duration with the difference between endTime and startTime that we get with the diff method.

Next, we get the hours part of the duration with the asHours method.

And we get the minutes part of the duration with the asMinutes method and get the remainder of that divided by 60.

Therefore, we get 17 45 from the console log.

Conclusion

To get the hour difference between two times with moment.js and JavaScript, we can use the duration, diff, asHours and asMinutes methods.

Sometimes, we want to get paragraph text inside an element with JavaScript.

In this article, we’ll look at how to get paragraph text inside an element with JavaScript.

Get Paragraph Text Inside an Element with JavaScript

To get paragraph text inside an element with JavaScript, we can use the innerHTML property of the element.

For instance, if we have:

<p>
  hello world
</p>

Then we write:

const text = document.querySelector('p').innerHTML;
console.log(text)

to get the p element with document.querySelector.

Then we use the innerHTML property to return the text.

Therefore, from the console log, we see that text is:

  hello world

Conclusion

To get paragraph text inside an element with JavaScript, we can use the innerHTML property of the element.

Sometimes, we want to get the text node after an element with JavaScript.

In this article, we’ll look at how to get the text node after an element with JavaScript.

Get the Text Node After an Element with JavaScript

To get the text node after an element with JavaScript, we can use the nextSibling property to get the the text node after an element.

For instance, if we have:

<input type="checkbox" name='something' value='v1' /> hello world <br />

Then we write:

const text = document
  .querySelector('input[name="something"]')
  .nextSibling.nodeValue;
console.log(text)

We call document.querySelector with the selector string of the checkbox input to select it.

Then we get the value of the text node next to the checkbox with the nextSibling.nodeValue

Therefore, text is hello world according to the console log.

Conclusion

To get the text node after an element with JavaScript, we can use the nextSibling property to get the the text node after an element.