The Web Dev

Sometimes, we want to convert object’s properties and values to array of key value pairs with JavaScript.

In this article, we’ll look at how to convert object’s properties and values to array of key value pairs with JavaScript.

How to convert object’s properties and values to array of key value pairs with JavaScript?

To convert object’s properties and values to array of key value pairs with JavaScript, we can use the Object.entries method.

For instance, we write:

const obj = {
  value1: 'prop1',
  value2: 'prop2',
  value3: 'prop3'
};
const pairs = Object.entries(obj)
console.log(pairs)

We call Object.entries with obj to return an array of key-value arrays from the obj object.

As a result, pairs is:

[
  [
    "value1",
    "prop1"
  ],
  [
    "value2",
    "prop2"
  ],
  [
    "value3",
    "prop3"
  ]
]

The first entry of each nested array is the key and the 2nd entry is the value of the corresponding key.

Conclusion

To convert object’s properties and values to array of key value pairs with JavaScript, we can use the Object.entries method.

Sometimes, we want to change the page title with JavaScript.

In this article, we’ll look at how to change the page title with JavaScript.

How to change the page title with JavaScript?

To change the page title with JavaScript, we can set the document.title property.

For instance, we write:

document.title = 'New Title';

to set the page title to ‘New Title’.

Conclusion

To change the page title with JavaScript, we can set the document.title property.

Sometimes, we want to get position of the element of the array with JavaScript.

In this article, we’ll look at how to get position of the element of the array with JavaScript.

How to get position of the element of the array with JavaScript?

To get position of the element of the array with JavaScript, we can use the array’s indexOf method.

For instance, we write:

const pos = [1, 2, 3, 4].indexOf(3);
console.log(pos)

to call indexOf on [1, 2, 3, 4] with 3 to get the index of 3 in the array.

Therefore, pos is 2 since 3 is in the 3rd position in the array.

Conclusion

To get position of the element of the array with JavaScript, we can use the array’s indexOf method.

Sometimes, we want to add a boolean attribute to an element using JavaScript.

In this article, we’ll look at how to add a boolean attribute to an element using JavaScript.

How to add a boolean attribute to an element using JavaScript?

To add a boolean attribute to an element using JavaScript, we can call setAttribute to set the boolean attribute to the same value as the attribute name to add the attribute.

We can use removeAttribute to remove the attribute.

For instance, we write:

<input>

to add an input.

Then we write:

const input = document.querySelector('input')
input.setAttribute('disabled', 'disabled');

setTimeout(() => {
  input.removeAttribute('disabled');
}, 3000)

to select the input with querySelector.

Then we call input.setAttribute with 'disabled' and 'disabled' to set the disabled attribute to disabled.

And then we call input.removeAttribute with 'disabled' in the setTimeout callback to remove the attribute in 3 seconds.

Conclusion

To add a boolean attribute to an element using JavaScript, we can call setAttribute to set the boolean attribute to the same value as the attribute name to add the attribute.

We can use removeAttribute to remove the attribute.

Sometimes, we want to check if a string has any non-ASCII characters in it with JavaScript.

In this article, we’ll look at how to check if a string has any non-ASCII characters in it with JavaScript.

How to check if a string has any non-ASCII characters in it with JavaScript?

To check if a string has any non-ASCII characters in it with JavaScript, we can check with a regex.

For instance, we write:

const str = 'abc'
const hasMoreThanAscii = !/^[\u0000-\u007f]*$/.test(str)
console.log(hasMoreThanAscii)

const str2 = '😀'
const hasMoreThanAscii2 = !/^[\u0000-\u007f]*$/.test(str2)
console.log(hasMoreThanAscii2)

to use the /^[\u0000-\u007f]*$/ regex to check if any characters in str and `str2 have only ASCII characters.

ASCII characters have codes ranging from u+0000 to u+007f.

We call test to check if str and str2 matches the regex pattern.

Then we negate the result to check if the string has any non-ASCII characters.

Therefore, hasMoreThanAscii is true and hasMoreThanAscii2 is false.

Conclusion

To check if a string has any non-ASCII characters in it with JavaScript, we can check with a regex.