Author: John Au-Yeung

Sometimes, we may want to get the key of a JavaScript object by its value.

In this article, we’ll look at how to get a key in a JavaScript object by its value.

Object.keys and Array.prototype.find

We can use the Object.keys method to return an array of non-inherited string keys in an object.

And we can use the JavaScript array’s find method to return the first instance of something that meets the given condition in an array.

For instance, we can write:

const object = {
  a: 1,
  b: 2,
  c: 3
}
const value = 2;
const key = Object.keys(object).find(key => object[key] === value);
console.log(key)

We have the object object that we want to search for the key in.

And value is the value of the key that we want to search for.

We get all the keys of object with Object.kets .

Then we call find with a callback that returns object[key] === value .

key is the object key being iterated through to find the key name for the given value .

Therefore, we should see that key is 'b' from the console log.

Object.keys and Array.prototype.filter

We can replace the find with filter and destructure the result from the array returned by filter .

For instance, we can write:

const object = {
  a: 1,
  b: 2,
  c: 3
}
const value = 2;
const [key] = Object.keys(object).filter(key => object[key] === value);
console.log(key)

And we get the same result for key as in the previous example.

Object.entries and Array.prototype.find

We can use the Object.entries method to return an array of arrays of key-value pairs of an object.

Therefore, we can use the returned array to find the key of the object with the given value.

For instance, we can write:

const object = {
  a: 1,
  b: 2,
  c: 3
}
const value = 2;
const [key] = Object.entries(object).find(([, val]) => val === value);
console.log(key)

We call find with a callback that has the parameter with the val variable destrutured from the parameter.

val has the value of the in the key-value pair array.

So when we return val === value , we return the same boolean expression as the first example.

From the returned result of find , we can get the key of from the returned key-value pair by destructuring it.

And so we get the same value of key logged in the console log.

Conclusion

We can find a key that has the given value by using native JavaScript object methods.

Sometimes, we want to prepend or append a child element in a parent element on our web page.

In this article, we’ll look at how to prepend and append an element with regular JavaScript.

Prepend an Element

We can prepend an element by using the insertBefore method.

For instance, if we have the following HTML:

<div id='parent'>  
  <p>  
    hello world  
  </p>  
</div>

Then we can prepend an element before the p element in the div by writing:

const parent = document.getElementById("parent");  
const child = document.createElement("div");  
child.innerHTML = 'Are we there yet?';  
parent.insertBefore(child, parent.firstChild);

We get the div with document.getElementById .

Then we create a div with document.createElement .

And then we add some content to the child div by setting the innerHTML property.

Finally, we call parent.insertBefore with the child element we want to insert and parent.firstChild to prepend child before the first child node of parent .

Append an Element

We can append an element into a container element by using the appendChild method.

For instance, if we have the following HTML:

<div id='parent'>  
  <p>  
    hello world  
  </p>  
</div>

Then we can add a child after the p element by writing:

const parent = document.getElementById("parent");  
const child = document.createElement("div");  
child.innerHTML = 'Are we there yet?';  
parent.appendChild(child);

The first 3 lines are the same as the previous example.

The only difference is that we call parent.appendChild with child to add child after the p element.

Conclusion

We can use the insertBefore method to prepend an element as the first child element.

And we can use the appendChild method to add a child element as the last child of the parent element.

Sometimes, we want to format a moment.js date as a 24-hour date-time.

In this article, we’ll look at how to format a moment.js date as a 24-hour date-time.

Use the HH Formatting Tag

We can use the HH formatting tag to format the hour into 24-hour format.

For instance, we can write:

const date = moment("01:15:00 PM", "h:mm:ss A").format("HH:mm:ss")  
console.log(date)

Then we get:

'13:15:00'

as a result.

Use the H Formatting Tag

Alternatively, we can use the H formatting tag to format the hour to 24-hour format.

For instance, we can write:

const date = moment("01:15:00 PM", "h:mm:ss A").format("H:mm:ss")  
console.log(date)

Then we also get:

'13:15:00'

as a result.

Conclusion

We can use the H or HH formatting tag to format the hour of a date-time as a 24-hour format time.

Oftentimes, we want to unpack JavaScript array entries into their own variables.

In this article, we’ll take a look at how to unpack a JavaScript array into separate variables with JavaScript.

Use the Destructuring Syntax

We should use the JavaScript array destructuring syntax to unpack JavaScript array entries into their own variables.

For instance, we can write:

const [x, y] = ['foo', 'bar'];
console.log(x);
console.log(y);

Then we assign 'foo' to x and 'bar' to y .

So x is 'foo' and y is 'bar' .

We can assign an array directly to variables on the left side.

For instance, we can write:

const arr = ['one', 'two'];
const [one, two] = arr;

We assign 'one' to one and 'two' to two .

Also, we can set a default value in case a value isn’t assigned to the variable.

To do this, we write something like:

const [one = 'one', two = 'two', three = 'three'] = [1, 2];
console.log(one);
console.log(two);
console.log(three);

We assign default values to one , two and three with the assignment statements on the left side.

So one is 1, two is 2, and three is 'three' .

three is 'three' since there’s no array entry assigned to it.

Conclusion

We can unpack JavaScript array entries into their own variables easily by using the destructuring syntax.

Sometimes, we may run into the “document.getElementByClass is not a function” error in the console when we run our JavaScript code.

In this article, we’ll look at how to fix the “document.getElementByClass is not a function” error in our JavaScript code.

The Correct Method Name is document.getElementByClassName

The correct method name for the method that we use to get the elements with a given class name is the document.getElementByClassName method.

For instance, if we have the following HTML:

<div class='text'>
  foo
</div>
<div class='text'>
  bar
</div>
<p>
  baz
</p>

Then we can get all the elements with the class attribute set to text by writing:

const texts = document.getElementsByClassName("text");
console.log(texts)

We call document.getElementsByClassName with the class attribute value for the elements we want to select.

Therefore texts is an HTMLCollection object with the divs with the class text in it.

Conclusion

To get all the elements with the given class attribute value, we use the document.getElementsByClassName method.

There is not document.getElementsByClass method in the browser.

This will stop us from running into the run into the “document.getElementByClass is not a function” error when we run our JavaScript code.