Category: JavaScript Answers

Oftentimes, we may want to duplicate a JavaScript object’s properties into another object.

In this article, we’ll look at how to duplicate JavaScript object properties in another JavaScript object.

Using the Object.assign Method

One way to duplicate an object’s properties in another object is to use the Object.assign method.

For instance, we can write:

const firstObject = {
  a: 1,
  b: 2
}
const secondObject = {
  c: 3
}
Object.assign(secondObject, firstObject);
console.log(secondObject)

We have the firstObject and secondObject objects with some properties.

Then we call Object.assign to copy the properties of the firstObject object into the secondObject .

Therefore, from the console log, we see that secondObject is:

{c: 3, a: 1, b: 2}

after we call Object.assign .

If we don’t want to modify secondObject , we can write:

const firstObject = {
  a: 1,
  b: 2
}
const secondObject = {
  c: 3
}
const thirdObject = Object.assign({}, firstObject, secondObject)
console.log(thirdObject)

Then thirdObject is:

{a: 1, b: 2, c: 3}

and secondObject is unmodified.

Spread Operator

Another way to copy an object’s property into another object is to use the spread operator.

For instance, we can write:

const firstObject = {
  a: 1,
  b: 2
}
const secondObject = {
  c: 3
}
const thirdObject = {
  ...firstObject,
  ...secondObject
}
console.log(thirdObject)

We created a thirdObject object which is created from spreading the properties of firstObject and secondObject into it.

Therefore, thirdObject is:

{a: 1, b: 2, c: 3}

Conclusion

We can use the Object.assign method or the spread operator to copy properties from one object onto another.

In Javascript,m the Math.log method only returns the natural logarithm of the argument we pass in.

However, we may want to do calculations with logarithms of other bases.

In this article, we’ll look at ways to change the base of the logarithm calculation in JavaScript.

Use the Change of Base Formula

We can use the change of base formula to change the base of the logarithm.

To do this, we write:

const log10 = (val) => {  
  return Math.log(val) / Math.log(10);  
}  
console.log(log10(100))

We create the log10 function to compute the logarithm of a number with base 10.

In the function, we use the change of base rule by dividing the natural log of val by the natural log of 10.

Therefore, the console log will log 2 since log with base 10 of 100 is 2.

We can make the function more versatile by making it accept the base of the log in addition to the value to take the log of.

For instance, we can write:

const log = (val, base) => {  
  return Math.log(val) / (base ? Math.log(base) : 1);  
}  
console.log(log(100, 10))

We create the log function that takes the val to take the log of and base of the log.

And then we use the change of base rule by dividing the natural log of val by the natural log of the base if base isn’t 0.

If base is 0, we divide by 1.

Therefore, the console log will log 2 since we take the log of 100 with base 10.

Conclusion

We can apply the change of base rule to check the base of the logarithm with JavaScript.

Sometimes, we may want to disable dragging an image from an HTML page.

In this article, we’ll look at ways to disable dragging an image from a page.

Set the ondragstart Property to a Function that Returns false

One way to disable dragging an image from an HTML page is to set the ondragstart property of an image element to a function that returns false .

For instance, if we have the following HTML:

<img src='https://i.picsum.photos/id/49/200/300.jpg?hmac=mC_cJaZJfrb4JZcnITvz0OOwLCyOTLC0QXH4vTo9syY'>

We can write:

const img = document.querySelector('img')
img.ondragstart = () => {
  return false;
};

to set ondragstart to a function that returns false .

Set the pointer-event CSS Property to none

Another way to disable dragging an image is to set the pointer-event CSS property to none .

For example, if we have the following HTML:

<img src='https://i.picsum.photos/id/49/200/300.jpg?hmac=mC_cJaZJfrb4JZcnITvz0OOwLCyOTLC0QXH4vTo9syY'>

Then we can disable dragging by writing:

img {
  pointer-events: none
}

Setting the draggable HTML Attribute to false

We can also set the draggable HTML attribute of the img element we want to disable dragging for to false .

To do this, we write:

<img draggable="false" src='https://i.picsum.photos/id/49/200/300.jpg?hmac=mC_cJaZJfrb4JZcnITvz0OOwLCyOTLC0QXH4vTo9syY'>

to disable dragging.

To do the same thing with JavaScript, we can use the setAttribute method:

const img = document.querySelector('img')
img.setAttribute("draggable", false);

We call setAttribute with the attribute name and value respectively.

Conclusion

There are several ways to disable dragging of an image with HTML, CSS, or JavaScript.

Sometimes, we may want to add a file upload feature to our web app.

And we have to check the file type of the file before we upload them sometimes.

In this article, we’ll look at how to check the selected file’s MIME type with JavaScript before upload.

Watch the change Event of a File Input

To check the file MIME type with JavaScript before we upload the file, we can listen to the change event of a file input.

For instance, we can write the following HTML:

<input type="file"  multiple>

And the following JavaScript code to watch the files selected:

const control = document.querySelector("input");  
control.addEventListener("change", (event) => {  
  const {  
    files  
  } = control;  
  for (const file of files) {  
    console.log("Filename: ", file.name);  
    console.log("Type: ", file.type);  
    console.log("Size: ", file.size, " bytes");  
  }  
}, false);

We have a file input with the multiple attribute set to enable multiple file selection.

Then in the JavaScript code, we get the file input with document.querySelector .

And then we call addEventListener with the 'change' argument to watch for changes in file selection in the file input.

In the event listener, we get the files from the file input control .

And then we loop through the files and get the name , type , and size properties of each entry.

name has the file name string of the selected file.

type has the MIME type string of the selected file.

And size has file size number in bytes.

Conclusion

We can get the MIME types of the files selected by the file input by listening to the change event.

Then we can get the content of the selected files from the files property of the element.

Oftentimes, we have to get the keys and values of a JavaScript object.

In this article, we’ll look at how to get the keys and values from an object.

Get Object Keys with the Object.keys Method

We can use the Object.keys method to get the keys of an object.

It returns an array with the object’s string keys.

For instance, we can write:

const obj = {
  first: 'someVal',
  second: 'otherVal'
};
const keys = Object.keys(obj)
console.log(keys)

Then keys is [“first”, “second”] .

Get Object Property Values with the Object.values Method

To get an object’s property values, we can use the Object.values method.

It returns an array with the object’s property values.

For example, we can write:

const obj = {
  first: 'someVal',
  second: 'otherVal'
};
const values = Object.values(obj)
console.log(values)

Then values is [“someVal”, “otherVal”] .

Get Object Key-Value Pairs with the Object.entries Method

To get an array of key-value pair arrays of an object, we can use the Object.entries method.

For instance, we can write:

const obj = {
  first: 'someVal',
  second: 'otherVal'
};
const pairs = Object.entries(obj)
console.log(pairs)

Then pairs is:

[
  [
    "first",
    "someVal"
  ],
  [
    "second",
    "otherVal"
  ]
]

Conclusion

We can get a JavaScript’s object keys and values separately or together easily with some JavaScript object methods.