Categories
JavaScript Answers

How to Parse a String with a Comma Thousand Separator to a Number with JavaScript?

We can parse a number string with commas thousand separators into a number by removing the commas, and then use the + operator to do the conversion.

For instance, we can write:

const num = +'123,456,789'.replace(/,/g, '');
console.log(num)

We call replace with /,/g to match all commas and replace them all with empty strings.

And then we use the unary + operator to convert the string without the commas to a number.

Therefore, num is 123456789.

Categories
JavaScript Answers

How to Compare ES6 Sets for Equality?

We can compare ES6 sets for equality by looping through its contents and check if any element in one set is missing in the other and check that their sizes are equal.

For instance, we can write:

const a = new Set([1, 2, 3]);
const b = new Set([1, 3, 2]);

const eqSet = (as, bs) => {
  if (as.size !== bs.size) {
    return false;
  }
  for (const a of as) {
    if (!bs.has(a)) {
      return false;
    }
  }
  return true;
}

console.log(eqSet(a, b));

We created the a and b sets which we want to compare.

Then we create the eqSet function with the as and bs parameters which are sets.

In the function, we compare is as and bs have different sizes. If they don’t then we return false .

Then if they have the same size, we loop through the as set with the for-of loop.

In the loop body, we check if bs is missing any items in as .

If something is missing, we return false .

If the loop is finished then we return true since both sets have the same size and has all the same elements.

Therefore, the console log should log true .

Categories
JavaScript Answers

How to Get the CSS Top Property Value as a Number Rather Than a String with JavaScript?

To get the CSS top property’s value as a number rather than a string, we should remove px from the end of the string.

Then we can convert that to a number with the + operator.

For instance, if we have the following div:

<div style='position: absolute; top: 10px'>  
  hello  
</div>

Then we can get the top CSS property’s value by writing:

const topCss = +$('div').css('top').replace('px', '')  
console.log(topCss)

We call css with 'top' to get the top property value as a pixel.

Then we call replace to remove 'px' by calling it with 'px' and an empty string.

Then we use the unary + operator to convert the number string into a number.

So topCss is 10.

Categories
JavaScript Answers

How to Avoid Extra Wrapping div in React?

To group multiple elements together without an extra wrapper div in React, we can use fragments.

To add them, we can use the React.Fragment component or <></> for short.

For instance, we can write:

import React from "react";

export default function App() {
  return (
    <>
      <div>a</div>
      <div>b</div>
      <div>c</div>
    </>
  );
}

or:

import React from "react";

export default function App() {
  return (
    <React.Fragment>
      <div>a</div>
      <div>b</div>
      <div>c</div>
    </React.Fragment>
  );
}
Categories
JavaScript Answers

How to Find Out What Character Key is Pressed with JavaScript?

We can find out which character key is pressed with the e.which property and the String.fromCharCode method.

For instance, if we have the following input:

<input type="text"  />

Then we can listen to the keypress event and check which key is pressed by writing:

const input = document.querySelector('input')  
input.addEventListener('keypress', (e) => {  
  console.log(String.fromCharCode(e.which));  
})

We call String.fromCharCode with e.which in the keypress event handler callback to get the character of the key that’s pressed.