The Web Dev

Sometimes, we want to get an element’s padding value using JavaScript.

In this article, we’ll look at how to get an element’s padding value using JavaScript.

Get an Element’s Padding Value Using JavaScript

To get an element’s padding value using JavaScript, we can use the getComputedStyle and getPropertyValue methods.

For instance, if we have the following HTML:

<div style='padding: 20px'>  
  hello world  
</div>

Then we can get the padding-left value of the div by writing:

const div = document.querySelector('div')  
const paddingLeft = window.getComputedStyle(div, null).getPropertyValue('padding-left')  
console.log(paddingLeft)

We call document.querySelector to get the div.

Then we call window.getComputedStyle with the div to get the computed CSS styles of the div.

Then we call getPropertyValue with 'padding-left' to get the padding-left CSS property value.

Therefore, paddingLeft is '20px' according to the console log.

Conclusion

To get an element’s padding value using JavaScript, we can use the getComputedStyle and getPropertyValue methods.

Sometimes, we want to check if the DOM is ready without any JavaScript framework or library.

In this article, we’ll look at how to check if the DOM is ready without any JavaScript framework or library.

Check if the DOM is Ready without Any JavaScript Framework or Library

To check if the DOM is ready without any JavaScript framework or library, we can listen to the DOMContentLoaded or the load event.

Inside the event handlers for each event, we can check the value of the document.readyState property to determine if the DOM is ready or not.

For instance, we can write:

window.addEventListener("DOMContentLoaded", () => {
  if (document.readyState === "complete") {
    console.log('loaded')
  } else if (document.readyState === "interactive") {
    // DOM ready! Images, frames, and other subresources are still downloading.
  }
});

window.addEventListener("load", () => {
  if (document.readyState === "complete") {
    console.log('loaded')
  } else if (document.readyState === "interactive") {
    // DOM ready! Images, frames, and other subresources are still downloading.
  }
});

We listen for the DOMContentLoaded and load events by calling window.addEventListener .

Then in each event handler, we check the document.readyState value.

If the value is 'complete' , then we know the DOM is fully loaded.

If it’s 'interactive' , then the DOM is ready, but images, frames, and other resources are still loading.

Conclusion

To check if the DOM is ready without any JavaScript framework or library, we can listen to the DOMContentLoaded or the load event.

Inside the event handlers for each event, we can check the value of the document.readyState property to determine if the DOM is ready or not.

Sometimes, we want to check if a year is a leap year in JavaScript.

In this article, we’ll look at how to check if a year is a leap year in JavaScript.

Check if a Year is a Leap Year in JavaScript

To check if a year is a leap year in JavaScript, we can check if the year is evenly divisible by 4 and it isn’t evenly divisible by 100, or the year is evenly divisible by 400.

For instance, we can write:

const leapYear = (year) => {  
  return ((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0);  
}  
console.log(leapYear(1900))  
console.log(leapYear(2016))

to create the leapYear function that does the checks.

We check if year is evenly divisible by 4 and it isn’t evenly divisible by 100 with:

(year % 4 === 0) && (year % 100 !== 0)

And we check if year is evenly divisible by 400 with:

year % 400 === 0

We join both expressions together with the OR operator.

Therefore, the first console log should log false since it’s evenly divisble by 4 but not evenly divisble by 100, and it’s not evenly divisible by 400.

On the other hand, the 2nd console log should log true , since it’s evenly divisible by 4 and it’s not evenly divisible by 100.

Conclusion

To check if a year is a leap year in JavaScript, we can check if the year is evenly divisible by 4 and it isn’t evenly divisible by 100, or the year is evenly divisible by 400.

Sometimes, we want to delete duplicate elements from an array with JavaScript.

In this article, we’ll look at how to delete duplicate elements from an array with JavaScript.

Delete Duplicate Elements From an Array with JavaScript

To delete duplicate elements from an array with JavaScript, we can use the array filter method or the Set constructor with the spread operator.

For instance, we can use the array filter method by writing:

const arr = [1, 2, 2, 3, 4, 5, 5, 5, 6, 7, 7, 8, 9, 10, 10]
const unique = arr.filter((elem, index, self) => {
  return index === self.indexOf(elem);
})
console.log(unique)

We call filter with a callback that checks if index is the same as the index returned by indexOf called on the self array with elem .

If it’s not the first instance of elem , then they’ll be different.

self is the same as arr .

Therefore, duplicate instances of elem won’t be present in arr .

So unique is:

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Likewise, we can use the Set constructor with the spread operator to remove the duplicates.

For instance, we can write:

const arr = [1, 2, 2, 3, 4, 5, 5, 5, 6, 7, 7, 8, 9, 10, 10]
const unique = [...new Set(arr)]
console.log(unique)

We pass arr into the Set constructor to convert arr to a set to remove the duplicate elements.

Then we spread that back into an array to convert the set back into an array.

And therefore, unique is the same result as before.

Conclusion

To delete duplicate elements from an array with JavaScript, we can use the array filter method or the Set constructor with the spread operator.

Sometimes, we want to automatically add properties to an object that is undefined with JavaScript.

In this article, we’ll look at how to automatically add properties to an object that is undefined with JavaScript.

Automatically Add Properties to an Object that is Undefined with JavaScript

To automatically add properties to an object that is undefined with JavaScript, we can use the hasOwnProperty method to check if a property exists.

It’ll return true if it exists and false otherwise.

If it returns false , then we can set the property value to the value we want.

For instance, we can write:

const test = {}  
if (!test.hasOwnProperty('hello')) {  
  test.hello = {};  
}  
test.hello.world = "Hello World!"

We have the test object that we want to add the hello property to if it doesn’t exist.

We check that it doesn’t exist with !test.hasOwnProperty(‘hello’) .

And if that’s true , we set test.hello to an empty object.

Then we set test.hello.world to “Hello World!” .

The hasOwnProperty method can be overridden easily since it’s inherited from the Object constructor.

Therefore to make sure we always call the right hasOwnProperty method, we can write:

const test = {}  
if (!Object.prototype.hasOwnProperty.call(test, 'hello')) {  
  test.hello = {};  
}  
test.hello.world = "Hello World!"

We call Object.prototype.hasOwnProperty.call with test to do the same thing as test.hasOwnProperty , but we make sure that we always call the right one from the Object constructor.

Conclusion

To automatically add properties to an object that is undefined with JavaScript, we can use the hasOwnProperty method to check if a property exists.

It’ll return true if it exists and false otherwise.

If it returns false , then we can set the property value to the value we want.