DEV Community: Prosen Ghosh

JavaScript

Prosen Ghosh — Fri, 02 Jul 2021 17:28:28 +0000

Why is using javascript “for loop” for array iteration a bad idea?

Prosen Ghosh — Wed, 30 Jun 2021 17:58:09 +0000

Sometimes using loop for array iteration can be bad. Let's see how?

Let's create a 10 empty slot array using Array constructor.

const array = Array(10);
console.log(array); //[empty × 10]

Now let's iterate over the array element using for loop. This loop will log Hi 10 times to the console, which we do not want to do.

But our for loop iterates over the empty slot, that is bad for our software performance.

const array = Array(10);
const len = array.length;
console.log(array); //[empty × 10]

for(let i = 0; i < len; i++){
   console.log("Hi");
}

Let's see another example.

const array = [1, 2, 3];
array[4] = 10;

const len = array.length;
for(let i = 0; i < len; i ++){
    console.log("Hi");
}

In the above snippet index 3 of the array is an empty slot, but the console.log will execute 5 times.

Now let's try using one of the array methods.

forEach() method invoked the passed callback function for each element.

But in this case our array slot is empty and our forEach() method is not going to invoke the log function for the empty slot.

So, the below code will print nothing to the console.

const array = Array(10);
const log = () => console.log("Hi");

array.forEach(log); // NOT GOING TO INVOKE THE LOG FUNCTION

If we try our second for...loop example using forEach() method it will execute 4 times. The passed callback function not going to invoke for empty slot.

const array = [1, 2, 3];
array[4] = 10;

const len = array.length;

array.forEach(() => {
    console.log("Hi");
})

Also you can try .map() method insted of for..loop.

Today I Learn About CSS Position Property

Prosen Ghosh — Mon, 28 Jun 2021 17:04:27 +0000

By using CSS position property, we can set the position of the document element.

Below are the property value. We can use any of the mentioned values for an element.

For setting a specific location to the element we have to use offset (top, left, bottom, right) property with the position property. This four property will set the exact location of the element.

{
    position: static;
    position: relative;
    position: absolute;
    position: fixed;
    position: sticky;
}

Let's determine the position property one by one.

Static

This is the default value of an HTML document. If we set any element position to static (we don't need to), we will not get any effect. The offset (top, left, bottom, right) property also has no effect with static position.

Let's try a CSS code.

From the above snippet we can see that the static box has no effect. We used the property value to 100px left, but it didn't move from its default position.

Relative

Relative property works on the normal flow of an HTML document unless we set the offset of the element using (top, left, bottom, right). The offset will change the position of the element from the default position of that elelement.

Setting offset property for that element does not affect the position of any other elements;

Absolute

When the document position set to absolute then the element removed from the normal document flow.

No space is created for the element in the page layout. It is positioned to its closest ancestor unless we set the offset value for that element using (top, left, bottom, right).

Uncomment the offset property of the .absolute class and see the effect in action for the absolute position.

We can see that the absolute box element does not take any space from the container layout it sit over the static box element. We can set the location if the absolute box layout by setting the offset value.

Fixed

When the document position set to fixed, then the element removed from the normal document flow.

No space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, unless we set the offset value for that element using (top, left, bottom, right).

Uncomment the offset property from .fixed class and scroll down the page then we will see that the fixed box not going to scroll up it is sitting the exact position.

Sticky

Sticky position property works on the normal flow of an HTML document and then offsets relative to its nearest scrolling ancestor and containing block. The offset does not affect the position of any other elements.

See the above code example.

That's for today. We will continue tomorrow. Happy Coding 🎉.

Remove multiple item from an array in JavaScript.

Prosen Ghosh — Thu, 24 Jun 2021 09:06:47 +0000