Categories
JavaScript Answers

How to Get a Key in a JavaScript Map by its Value?

Sometimes, we want to get a key in a JavaScript map by its value.

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

Get a Key in a JavaScript Map by its Value

To get a key in a JavaScript map by its value, we can use the spread operator to spread the entries into an array.

Then we can use the filter method to return an array with the entries with the given value.

For instance, we can write:

const people = new Map();
people.set('1', 'john');
people.set('2', 'jasmin');
people.set('3', 'foo');

const keys = [...people.entries()]
  .filter(([, v]) => v === 'john')
  .map(([k]) => k);

console.log(keys);

We create the people map with a few entries.

And we want to find the key for the entry with 'john' as its value.

To do this, we call people.entries() to return an iterator with the key-value pair arrays from the map.

Then we spread the iterator entries into an array with the spread operator.

Next, we call filter with a callback that destructures the v map value from the parameter.

And we return the entries where value v is 'john'.

Finally, we call map to map the k keys from the map and return them in the returned array.

Therefore, keys is ["1"] as we can see from the console log.

Conclusion

To get a key in a JavaScript map by its value, we can use the spread operator to spread the entries into an array.

Then we can use the filter method to return an array with the entries with the given value.

Categories
JavaScript Answers

How to Unbind Event Handlers to Bind Them Again Later with jQuery?

Sometimes, we want to unbind event handlers to bind them again later with jQuery.

In this article, we’ll look at how to unbind event handlers to bind them again later with jQuery.

Unbind Event Handlers to Bind Them Again Later with jQuery

To unbind event handlers to bind them again later with jQuery, we can use the _data to get the event bindinds.

Then we can get the click event binding with the click property.

For instance, if we have:

<a id="test">test</a>

Then we write:

$(document).ready(() => {
  $('#test').click((e) => {
    const events = $._data($('#test')[0], 'events');
    $('#test').unbind('click', events.click[0]);
  });
});

to add the click event listeners with the click method.

In the click event handler callback, we get the bindings with:

$._data($('#test')[0], 'events')

and assign it to events.

Then we unbind the click event handler with:

$('#test').unbind('click', events.click[0]);

Then when we want to bind to the click event, we can use the events to bind the event again.

Conclusion

To unbind event handlers to bind them again later with jQuery, we can use the _data to get the event bindinds.

Then we can get the click event binding with the click property.

Categories
JavaScript Answers

How to Get the Last Value Inserted into a JavaScript Set?

Sometimes, we want to get the last value inserted into a JavaScript set.

In this article, we’ll look at how to get the last value inserted into a JavaScript set.

Get the Last Value Inserted into a JavaScript Set

To get the last value inserted into a JavaScript set, we can spread the set entries into an array.

Then we can call the pop method on the returned array to return the last entry inserted into the set.

For instance, we can write:

const a = new Set([1, 2, 3]);
a.add(10);
const lastValue = [...a].pop();
console.log(lastValue)

We create a new set with the Set constructor.

Then we call add to add a new entry into the set.

Next, we spread a set into an array and then call pop to return the last element from the set and remove that entry from the array.

The returned item is assigned to lastValue.

Therefore, from the console log, we see that lastValue is 10.

Conclusion

To get the last value inserted into a JavaScript set, we can spread the set entries into an array.

Then we can call the pop method on the returned array to return the last entry inserted into the set.

Categories
JavaScript Answers jQuery

How to List All Bindings of an Element with jQuery?

Sometimes, we want to list all bindings of an element with jQuery.

In this article, we’ll look at how to list all bindings of an element with jQuery.

List All Bindings of an Element with jQuery

To list all bindings of an element with jQuery, we can use the _data method.

For instance, if we have the following input:

<input>

Then we can write:

const input = $('input')
input.bind('click', () => {})
input.bind('input', () => {})
$.each($._data($(input)[0], 'events'), (i, e) => {
  console.log(i, e);
});

to get the input with $('input').

Then we add the event handlers with:

input.bind('click', () => {})
input.bind('input', () => {})

Next, we get the event handler bindings with:

$._data($(input)[0], 'events')

Then we use the $.each method to loop through the bindings returned by $._data.

In the callback, i is the event name string and e has the event data,

Conclusion

To list all bindings of an element with jQuery, we can use the _data method.

Categories
JavaScript Answers

How to Search and Replace Specific Query String Parameter Value in JavaScript?

Sometimes, we want to search and replace specific query string parameter value in JavaScript.

In this article, we’ll look at how to search and replace specific query string parameter value in JavaScript.

Search and Replace Specific Query String Parameter Value in JavaScript

To search and replace specific query string parameter value in JavaScript, we can use the URLSearchParams constructor.

For instance, we can write:

const paramsString = "foo=bar";
const searchParams = new URLSearchParams(paramsString);
searchParams.set('foo', 'baz')
const newParamString = searchParams.toString()
console.log(newParamString)

We create a URLSearchParams instance by passing in the paramsString string as its argument.

Then we use the set method from the returned object to replace the value of the foo query parameter with a new value.

We just pass in the key of the value to replace and the value to replace it with.

Finally, we call toString to return the new search parameter string.

Therefore, newParamString is now 'foo=baz' according to the console log.

Conclusion

To search and replace specific query string parameter value in JavaScript, we can use the URLSearchParams constructor.