Category: JavaScript

Sometimes, we want to format numbers with commas with JavaScript.

In this article, we’ll look at how to format numbers with commas with JavaScript.

How to format numbers with commas with JavaScript?

To format numbers with commas with JavaScript, we can use the toLocaleString method.

For instance, we write:

const no = 3456;
const noStr = no.toLocaleString();
console.log(noStr)

to call toLocaleString to return a number string with digit groups separated by commas.

Therefore, noStr is '3,456'.

Conclusion

To format numbers with commas with JavaScript, we can use the toLocaleString method.

Sometimes, we want to destructure an array of objects with JavaScript.

In this article, we’ll look at how to destructure an array of objects with JavaScript.

How to destructure an array of objects with JavaScript?

To destructure an array of objects with JavaScript, we can use the array destructuring syntax.

For instance, we write:

const someArray = [{
  data: 1
}, {
  data: 2
}, {
  data: 3
}]
const [{
    data: array0
  },
  {
    data: array1
  },
  {
    data: array2
  }
] = someArray

console.log(array0, array1, array2)

to define the someArray array and get the data property values from each object with destructuring.

We assign the data property of the first someArray to array0.

And we assign the data property of the first someArray to array1.

Finally, we assign the data property of the first someArray to array2.

Therefore, console log logs 1 2 3.

Conclusion

To destructure an array of objects with JavaScript, we can use the array destructuring syntax.

Sometimes, we want to create circles around a circle with JavaScript.

In this article, we’ll look at how to create circles around a circle with JavaScript.

How to create circles around a circle with JavaScript?

To create circles around a circle with JavaScript, we can use some DOM methods.

For instance, we write:

<div id="parentDiv"></div>

to add a div.

Then we write:

const div = 360 / 6;
const radius = 150;
const parent = document.querySelector('#parentDiv')
const offsetToParentCenter = parseInt(parent.offsetWidth / 2);
const totalOffset = offsetToParentCenter;
for (let i = 1; i <= 6; ++i) {
  const childDiv = document.createElement('div');
  childDiv.className = 'div2';
  childDiv.style.position = 'absolute';
  const y = Math.sin((div * i) * (Math.PI / 180)) * radius;
  const x = Math.cos((div * i) * (Math.PI / 180)) * radius;
  childDiv.style.top = (y + totalOffset).toString() + "px";
  childDiv.style.left = (x + totalOffset).toString() + "px";
  parent.appendChild(childDiv);
}

We get the parent div with querySelector.

Then we add a for loop.

In the loop, we create a div with createElement and assign it to childDiv.

Next, we add a the class name for the childDiv.

Then we set the position of childDiv to 'absolute'.

And then we set the x and y position of the div so that they’re positioned in a circle.

Next, we call appendChild with childDiv to add them.

Finally, we add:

.div2 {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #ac5;
  border-radius: 100px;
}

to add styles to the div.

Now we should see 6 divs arranged in a circle.

Conclusion

To create circles around a circle with JavaScript, we can use some DOM methods.

Sometimes, we want to get the index of an element in JavaScript.

In this article, we’ll look at how to get the index of an element in JavaScript.

How to get the index of an element in JavaScript?

To get the index of an element in JavaScript, we can use the spread operator to spread a node list into an array.

Then we can use the array’s indexOf method to get the index.

For instance, we write:

const nodes = document.getElementsByTagName('*');
const nodesArr = [...nodes]
const index = nodesArr.indexOf(document.body)
console.log(index)

to select all elements with getElementsByTagName.

Then we spread the nodes into an array and assign it to nodesArr.

Next, we call nodesArr.indexOf with the element we’re trying to find the index for.

Then we get that the index is 0 or greater if the element we’re searching for is in the array.

Conclusion

To get the index of an element in JavaScript, we can use the spread operator to spread a node list into an array.

Then we can use the array’s indexOf method to get the index.