Author: John Au-Yeung

Sometimes, we want to destructure an object and ignore one of the results with JavaScript.

In this article, we’ll look at how to destructure an object and ignore one of the results with JavaScript.

How to destructure an object and ignore one of the results with JavaScript?

To destructure an object and ignore one of the results with JavaScript, we can use the object rest operator.

For instance, we write:

const props = {
  a: 1,
  b: 2,
  c: 3
};
const {
  a,
  ...propsNoA
} = props;
console.log(propsNoA);

We have the props object with a few properties in it.

Then we destructure props by destructuring a and leave the rest of the properties in one object with the rest operator, which is the 3 dots.

propsNoA is an object with properties b and c inside.

Therefore, propsNoA is {b: 2, c: 3} according to the console log.

Conclusion

To destructure an object and ignore one of the results with JavaScript, we can use the object rest operator.

Sometimes, we want to set the background image of a div via a function and function parameter with JavaScript.

In this article, we’ll look at how to set the background image of a div via a function and function parameter with JavaScript.

How to set the background image of a div via a function and function parameter with JavaScript?

To set the background image of a div via a function and function parameter with JavaScript, we can create a function that takes the image URL of the background image and returns the CSS background-image property value as a string.

For instance, if we have:

<div>
  hello world
</div>

Then we write:

const getBackgroundImg = (imageUrl) => {
  const urlString = `url(${imageUrl})`
  return urlString
}

const div = document.querySelector('div')
const imageUrl = 'https://image.shutterstock.com/image-photo/nature-background-table-wood-product-260nw-285662423.jpg'

div.style.backgroundImage = getBackgroundImg(imageUrl)

We have the getBackgroundImg function that takes the imageUrl parameter and returns the CSS backgroundImage property value as a string.

Then we select the div with document.querySelector.

And then we define the imageUrl of the background image.

Next, we set div.style.backgroundImage to the background image URL value returned by getBackgroundImg .

Now we should see the background image displayed in the div.

Conclusion

To set the background image of a div via a function and function parameter with JavaScript, we can create a function that takes the image URL of the background image and returns the CSS background-image property value as a string.

Sometimes, we want to wrap a function with JavaScript.

In this article, we’ll look at how to wrap a function with JavaScript.

Wrap a Function with JavaScript

To wrap a function with JavaScript, we can return a function inside a function.

For instance, we write:

const wrap = (someFunction) => {
  const wrappedFunction = (...args) => {
    const newArgs = [...args, 'another argument']
    return someFunction(...newArgs)
  }
  return wrappedFunction
}

const doThing = (...args) => {
  console.log('do thing', args)
}


const wrappedDoThing = wrap(doThing)
wrappedDoThing('one', 'two', 'three')
doThing('one', 'two', 'three')

We have the wrap function that takes the someFunction function.

Then we define the wrappedFunction function inside the it that takes an unlimited amount of arguments.

We use the rest operator to get all the arguments and put them into the args array.

Next, we define the newArgs array with all the args spread into the array.

And we put 'another argument' into it as its last element.

Then we call someFunction with newArgs‘s element as the arguments by spreading it.

Finally, we return the wrappedFunction function.

Next, we have the doThing function that takes an unlimited number ofd arguments and we get them with the rest operator in an array and log them all.

Then we call wrap with doThing and assign it to wrappedDoThing.

Now we call wrappedDoThing and doThing with the same arguments.

And we should see:

"do thing", ["one", "two", "three", "another argument"]
"do thing", ["one", "two", "three"]

logged in the console.

We see that the first entry has an extra argument since we called wrappedFunction which is returned in wrap.

That added the extra argument.

Conclusion

To wrap a function with JavaScript, we can return a function inside a function.

Sometimes, we want to get the value of the currently selected Selectize.js input item.

In this article, we’ll look at how to get the value of the currently selected Selectize.js input item.

How to get the value of the currently selected Selectize.js input item?

To get the value of the currently selected Selectize.js input item, we can add a onChange handler into the Selectize option object.

For instance, we write:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.css" />

<select id='searchTextbox'>
  <option>apple</option>
  <option>orange</option>
  <option>grape</option>
</select>

to add the jQuery scripts, Selectize script and the Selectize CSS.

We also add the select element we use to convert to a Selectize drop down.

Then we write:

$('#searchTextbox').selectize({
  maxItems: 1, 
  maxOptions: 30, 
  onChange(value) {
    console.log(value);
  }
});

to select the select element with $.

And we call selectize on it with an object with the onChange method.

It takes the value parameter which is the selected item’s value.

Now when we select an item from the Selectize drop down, we should see the value logged in the console.

Conclusion

To get the value of the currently selected Selectize.js input item, we can add a onChange handler into the Selectize option object.