Category: JavaScript Answers

To clone HTML element objects in JavaScript, we can call the cloneNode method with true to clone the element.

For instance, if we have the following element:

<div>  
  hello world  
</div>

Then we can clone the div by writing:

const clone = document.querySelector('div').cloneNode(true);  
console.log(clone)

We call document.querySelector to get the div.

Then we call cloneNode with true to clone the div and assign it to clone .

So clone would have the cloned div.

We can get the form that contains the input element with the form property of the input.

For instance, if we have the following form:

<form>  
  <input>  
</form>

Then we can get the form that contains the input by writing:

const input = document.querySelector('input')  
console.log(input.form)

We just use the form property to get the form element that contains the input.

To get the dimensions of the HTML5 video element with JavaScript, we have to listen to the loadedmetadata event.

For instance, if we have the following video element:

<video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"></video>

Then can get the dimensions of the video element by writing:

const video = document.querySelector("video");  
video.addEventListener("loadedmetadata", (e) => {  
  const {  
    videoHeight,  
    videoWidth  
  } = e.target  
  console.log(videoHeight, videoWidth)  
});

We get the video element with the document.querySelector method.

Then we call addEbentListener with 'loadedmetadata' to listen to the loadedmetadata event.

In the event handler callback, we get the video element with e.target .

And then we get the videoHeight and videoWidth properties to get the height and width of the video respectively in pixels.

We can get the min or max value of a property in objects in a JavaScript object array by calling map to create an array of the property values.

Then we can use the Math.min or Math.max methods to get the min or max values from the array by spreading the value array as arguments into the methods.

For instance, we can write:

const myArray = [{
  id: 1,
  cost: 200
}, {
  id: 2,
  cost: 1000
}, {
  id: 3,
  cost: 50
}, {
  id: 4,
  cost: 500
}]
const min = Math.min(...myArray.map(item => item.cost))
const max = Math.max(...myArray.map(item => item.cost));

console.log(min);
console.log(max);

to get the min and max value of the cost property in myArray .

We call myArray.map to create an array with the cost property value in each object in the array.

Then we spread the values as arguments into Math.min or Math.max to get the min and value of the cost property respectively.

Therefore, min is 50 and max is 1000.

Sometimes, we want to clone a map or set in JavaScript.

In this article, we’ll look at how to clone a map or set in JavaScript.

Shallow Clone a Map or Set in JavaScript

To shallow clone a map or a set, we can just pass in the original map or set into the Map or Set constructor respectively.

For instance, we can write:

const originalMap = new Map([
  ['foo', 1],
  ['bar', 2]
])
const clonedMap = new Map(originalMap)

const originalSet = new Set([1, 2, 3])
const clonedSet = new Set(originalSet)

We create the originalMap and originalSet which we want to shallow clone.

To do that, we just pass them into the Map and Set constructors respectively.

Deep Clone a Map or Set in JavaScript

To shallow clone a map or a set, we can just pass in the original map or set that has been stringified into JSON and parsed back into arrays into the Map or Set constructor respectively.

For instance, we can write:

const originalMap = new Map([
  ['foo', 1],
  ['bar', 2]
])
const deepClonedMap = new Map(JSON.parse(JSON.stringify([...originalMap])))

const originalSet = new Set([1, 2, 3])
const deepClonedSet = new Set(JSON.parse(JSON.stringify([...originalSet])))

To spread the originalMap and originalSet into arrays. Then we call JSON.stringify to convert the arrays into JSON strings.

And then we call JSON.parse to parse the JSON strings back to arrays.

Then finally, we pass them back into the Map or Set constructors to create new maps or sets from them.

Conclusion

To shallow clone a map or a set, we can just pass in the original map or set into the Map or Set constructor respectively.

To shallow clone a map or a set, we can just pass in the original map or set that has been stringified into JSON and parsed back into arrays into the Map or Set constructor respectively.