Category: JavaScript

Sometimes, we want to convert characters to hex in JavaScript.

In this article, we’ll look at how to convert characters to hex in JavaScript.

How to convert characters to hex in JavaScript?

To convert characters to hex in JavaScript, we can use the string charCodeAt method.

For instance, we write:

const strAsUnicode = (str) => {
  return str.split("").map((s) => {
    return `\\u${s.charCodeAt(0).toString(16).padStart(4, '0')}`;
  }).join("");
}

console.log(strAsUnicode('abc'))

to define the strAsUncode function that calls str.split to split the string into an array of characters.

Then we call map on the array with a callback that calls charCodeAt to return the character of code of character s.

Then we convert it to a hex string with toString(16).

And then we call padStart to pad the returned string to 4 characters by prepending 0’s.

Finally, we call join with an empty string to join the returned string array back to a string.

As a result, the console log logs "\u0061\u0062\u0063".

Conclusion

To convert characters to hex in JavaScript, we can use the string charCodeAt method.

Sometimes, we want to convert string array representation back to an array with JavaScript.

In this article, we’ll look at how to convert string array representation back to an array with JavaScript.

How to convert string array representation back to an array with JavaScript?

To convert string array representation back to an array with JavaScript, we can use JSON.parse.

For instance, we write:

const s = '["item1", "item2", "item3"]'
const a = JSON.parse(s)
console.log(a)

to call JSON.parse with s to convert s back to an array.

Therefore, a is ["item1", "item2", "item3"].

Conclusion

To convert string array representation back to an array with JavaScript, we can use JSON.parse.

Sometimes, we want to remove certain properties from object in JavaScript.

In this article, we’ll look at how to remove certain properties from object in JavaScript.

How to remove certain properties from object in JavaScript?

To remove certain elements from map in JavaScript, we can use some object methods and the array filter method.

For instance, we write:

const obj = {}
obj.XKey1 = "Value1";
obj.XKey2 = "Value2";
obj.YKey3 = "Value3";
obj.YKey4 = "Value4";

const entries = Object.entries(obj).filter(([key]) => key.includes('XKey'))
const newObj = Object.fromEntries(entries)
console.log(newObj)

to call Objec.entries to return an array of key-value pair arrays.

Then we call filter to check if the key string has 'XKey' in it.

Next, we call Object.fromEntries with entries to create an object from the key-value pair array returned by filter.

Therefore, newObj is

{
  XKey1: "Value1",
  XKey2: "Value2"
}

Conclusion

To remove certain elements from map in JavaScript, we can use some object methods and the array filter method.

Sometimes, we want to calculate average with the array reduce method in JavaScript.

In this article, we’ll look at how to calculate average with the array reduce method in JavaScript.

How to calculate average with the array reduce method in JavaScript?

To calculate average with the array reduce method in JavaScript, we can call reduce with a callback to return the partial sum of the average.

For instance, we write:

const array = [129, 139, 155, 176]
const average = array.reduce((avg, value, _, {
  length
}) => {
  return avg + (value / length);
}, 0);
console.log(average)

to call array.reduce with a callback that return avg + (value / length), which is the partial sum of the average so far.

The 2nd argument of 0 so the initial value of avg is 0.

Therefore, average is 149.75.

Conclusion

To calculate average with the array reduce method in JavaScript, we can call reduce with a callback to return the partial sum of the average.

Sometimes, we want to scroll element to top of page by clicking anchor inside element or anywhere inside containing div ID with JavaScript.

In this article, we’ll look ay how to scroll element to top of page by clicking anchor inside element or anywhere inside containing div ID with JavaScript.

How to scroll element to top of page by clicking anchor inside element or anywhere inside containing div ID with JavaScript?

To scroll element to top of page by clicking anchor inside element or anywhere inside containing div ID with JavaScript, we can call the scrollTo method.

For instance, we write:

<button>
  scroll
</button>

to add a button.

Then we write:

const button = document.querySelector('button')
button.onclick = () => {
  window.scrollTo(0, 0)
}

to select the button with querySelector.

Then we set button.onclick to a function that calls window.scrollTo with 2 0’s to scroll to the top of the page.

Conclusion

To scroll element to top of page by clicking anchor inside element or anywhere inside containing div ID with JavaScript, we can call the scrollTo method.