DEV Community: Ramkumar.barani

Understanding Loops in JavaScript

Ramkumar.barani — Mon, 03 Mar 2025 09:20:25 +0000

Introduction

Loops are fundamental in JavaScript, allowing us to execute code repeatedly and iterate through data structures like arrays and objects. In this guide, we'll explore different types of loops, their use cases, and best practices to optimize your code.

Different Ways to Create a Loop in JavaScript

1. `for` Loop

The for loop is one of the most commonly used loops, giving you full control over iteration.

Syntax & Explanation:

for (let i = 0; i < 5; i++) {
  console.log(i); // Outputs 0 to 4
}

let i = 0; → Initializes the loop counter.
i < 5; → The loop runs while this condition is true.
i++ → Increments the counter after each iteration.

When to Use:

When the number of iterations is known.
When precise control over each step is required.

2. `while` Loop

A while loop executes as long as its condition remains true.

Syntax & Explanation:

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

The condition i < 5 is checked before each iteration.
If true, the loop executes; otherwise, it stops.
i++ ensures the loop does not run indefinitely.

Be Careful: Infinite Loops

An infinite loop occurs if the condition never becomes false:

while (true) {
  console.log("This will run forever!");
  break; // Stops the loop
}

When to Use:

When the number of iterations is unknown.
When looping depends on a condition instead of a fixed counter.

3. `forEach` (For Arrays)

forEach provides a concise way to iterate over arrays.

Syntax:

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => console.log(num));

When to Use:

When iterating through an array without modifying it.
When you do not need to exit the loop early (forEach does not support break).

Modern Ways to Loop

`.map()` – Transforming Data

.map() creates a new array by applying a function to each element.

const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

Use .map() when:

You need a new array with modified values.
The main difference between forEach and map is that map returns a new array, whereas forEach does not.

`.filter()` – Filtering Data

.filter() returns a new array containing elements that meet a condition.

const numbers = [1, 3, 5, 7, 9, 2, 4, 6, 8];
const greaterThanFive = numbers.filter(num => num > 5);
console.log(greaterThanFive); // [7, 9, 6, 8]

Use .filter() when:

You need to extract specific elements from an array.

Looping Through Objects

Objects are not directly iterable like arrays, but you can use for...in, Object.keys(), Object.values(), or Object.entries().

`for...in`

const user = { name: "John", age: 30, job: "Developer" };
for (let key in user) {
  console.log(`${key}: ${user[key]}`);
}

`Object.entries()`

Object.entries(user).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

Use these when:

Working with objects instead of arrays.
Efficiently iterating through properties.

Traditional vs. Modern Approaches

Example 1: Filtering & Transforming Data

Traditional Approach: Using a `for` Loop

const activeUsers = [];
for (let i = 0; i < users.length; i++) {
    if (users[i].status === 'active') {
        activeUsers.push({
            name: users[i].name,
            lastLogin: users[i].lastLogin
        });
    }
}

Modern Approach: Using `.filter()` & `.map()`

const activeUsers = users
    .filter(user => user.status === 'active')
    .map(user => ({
        name: user.name,
        lastLogin: user.lastLogin
    }));

Example 2: Doubling Even Numbers

Traditional Approach: Using a `for` Loop

const doubledEvens = [];
for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] % 2 === 0) {
        doubledEvens.push(numbers[i] * 2);
    }
}

Modern Approach: Using `.filter()` & `.map()`

const doubledEvens = numbers
    .filter(num => num % 2 === 0)
    .map(num => num * 2);

Best & Bad Practices

✅ Best Practices

Use .map() and .filter() for cleaner transformations.
Use for...of for better readability when looping over arrays.
Use Object.entries() for efficient object iteration.

❌ Bad Practices

Avoid modifying arrays directly inside loops.
Avoid for...in for arrays (it iterates over properties, not values).
Be cautious with infinite loops (while (true) {} without break).

Performance Considerations

for loops are generally the fastest since they avoid function calls.
map, filter, and forEach are more readable but slightly slower.
For large datasets, use for loops when performance is critical.

Conclusion

Loops are essential in JavaScript, and choosing the right one depends on the use case. Modern array methods like .map() and .filter() help write cleaner, more maintainable code. Understanding the trade-offs between readability and performance will make you a better JavaScript developer. Start experimenting with these techniques today! 🚀

Understanding Feature Flags: A Simple Guide

Ramkumar.barani — Mon, 16 Sep 2024 14:08:09 +0000

When building software, releasing new features quickly without breaking anything can be tricky. Feature flags make this easier. After reading about Vercel’s Feature Flag SDK, I thought it would be helpful to study more about feature flags and explain what they are, how they work, and how you can build one on your own.

What are Feature Flags?

Feature flags (also called feature toggles) allow developers to turn features on or off without needing to change the code or redeploy the application. This means you can:

Release features gradually: Let only some users see the new feature and slowly roll it out to everyone.
Test new features in production: You can enable the feature for yourself or a small group of testers without making it available to all users.
Quickly roll back a feature: If a new feature causes issues, you can disable it without redeploying.

With feature flags, you control when users can access features, separate from when the code is deployed.

Why Use Feature Flags?

Continuous Delivery

Feature flags help teams release code more frequently. You can merge unfinished work into the main codebase, hide it behind a flag, and deploy it without affecting users.
A/B Testing

You can test two versions of a feature with different user groups to see which performs better. This helps improve the user experience based on real data.
Controlled Rollouts

You can release a feature to a small group of users, monitor its performance, and then release it to everyone else.
Quick Rollbacks

If something goes wrong, turning off the feature flag is much faster than reverting code changes, helping to keep the app stable.

Using Feature Flags in Next.js with Vercel's Flags SDK

flags.ts (Server-side)

import { unstable_flag as flag } from "@vercel/flags/next";

export const showBanner = flag({
  key: "banner",
  decide: () => false,
});

The decide function determines the flag’s value, which can be provided from various sources such as:

Environment variables
Other feature flag providers
Vercel's Edge Config (data config store)
Databases, etc.

app/page.tsx

import { showBanner } from "../flags";

export default async function Page() {
  const banner = await showBanner();
  return (
    <div>
      {banner ? <Banner /> : null}
      {/* other components */}
    </div>
  );
}

Since the flags are functions, we can easily change the implementation without modifying anything on the calling side. This flexibility allows your application to adapt to new requirements without needing to alter the core structure of the flag logic.

How to Build Your Own Feature Flag System

Let’s build a simple feature flag system that you can improve over time.

Step 1: Create a Custom Hook for Retrieving Feature Flags

This step involves creating a custom hook that will allow you to retrieve feature flags dynamically. You can easily reuse this hook in any part of your React application to check if a feature is enabled or disabled.

import { useState, useEffect } from 'react';

export const useFeatureFlag = (key: string): boolean => {
  const [isEnabled, setIsEnabled] = useState<boolean>(false);

  useEffect(() => {
    const fetchFeatureFlag = async () => {
      try {
        const response = await fetch(`http://localhost:3001/api/feature-flags/${key}`);
        if (response.ok) {
          const data = await response.json();
          setIsEnabled(data.is_enabled);
        }
      } catch (error) {
        console.error('Failed to fetch feature flag:', error);
      }
    };

    fetchFeatureFlag();
  }, [key]);

  return isEnabled;
};

Step 2: React Component

Next, create a component that uses the custom hook to render different features based on whether the flag is enabled or disabled. This will allow your application to seamlessly switch between old and new functionality without any disruption to the user experience.

import React from 'react';
import { useFeatureFlag } from './useFeatureFlag';

const FeatureFlaggedComponent: React.FC = () => {
  const isNewFeatureEnabled = useFeatureFlag('new-feature');

  return (
    <div>
      <h1>Feature Flag Example</h1>
      {isNewFeatureEnabled ? (
        <div>
          <h2>New Feature</h2>
          <p>This is the new feature enabled by the feature flag.</p>
        </div>
      ) : (
        <div>
          <h2>Old Feature</h2>
          <p>This is the old feature displayed when the new feature is disabled.</p>
        </div>
      )}
    </div>
  );
};

export default FeatureFlaggedComponent;

Conclusion

Feature flags are an excellent way to release features safely, test in production, and make quick changes without redeploying code. You can build a simple feature flag system using JavaScript or use more advanced tools like Vercel, LaunchDarkly, or Optimizely for larger projects.

Using feature flags will make your development process more flexible and efficient, allowing you to deliver new features faster and more confidently.

Thanks for reading, and please feel free to share your comments!

Understanding Flex Properties in CSS

Ramkumar.barani — Wed, 11 Sep 2024 10:51:50 +0000

Introduction:

Designing a website is like creating art. Just as a painting’s arrangement tells a story, a website's layout speaks more about its message. Flexbox is a powerful tool for achieving this.

Before Flexbox, developers had to use techniques like floating elements, margin hacks, and table layouts to create responsive designs. These methods worked but weren't scalable and required additional media queries to adjust for different screen sizes.

Flexbox changed this by providing a simple, efficient way to align, distribute, and size elements within a container.

What is Flexbox?

Flexbox is a layout model that helps you create complex layouts easily. It allows you to align items horizontally or vertically within a container. Flexbox is one-dimensional, meaning it controls the layout along a single axis (either horizontal or vertical) at a time.

Horizontal Alignment: You can easily align items side by side in rows.
Vertical Alignment: Aligning items in columns.

In this blog, we'll dive into the key properties of Flexbox and how they simplify layout management.

Flex Container Properties:

Before diving into flex properties, it's important to understand the two axes of Flexbox:

Main Axis
Cross Axis

Understanding these axes is important because some properties align items along the main axis, while others align them along the cross axis. Knowing this will help you better understand how the properties work.

flex-direction: row | column

Flexbox is all about aligning items in rows or columns. By default, it's set to row.

row: Aligns items horizontally (default).
column: Aligns items vertically.

<div style="display: flex; flex-direction: row;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

flex-wrap: nowrap | wrap | wrap-reverse

It allows flex items to wrap into the next line instead of shrinking them. The default is nowrap.

nowrap: All flex items will be on one line (default).
wrap: Flex items will wrap to the next line if they don’t fit.
wrap-reverse: Flex items will wrap in the reverse direction.

<div style="display: flex; flex-wrap: wrap;">
  <div class="box">Item 1</div>
  <div class="box">Item 2</div>
  <div class="box">Item 3</div>
</div>

Used to align items along the main axis. For flex-direction: row, the x-axis is the main axis and the y-axis is the cross axis.

flex-start: Aligns items to the start of the container.
flex-end: Aligns items to the end.
center: Centers items.
space-between: Distributes items with space between them.
space-around: Distributes items with space around them.
space-evenly: Evenly distributes space between items.

<div style="display: flex; justify-content: space-between;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

align-items: flex-start | flex-end | center | stretch | baseline

Used to align items along the cross axis. For column flex-direction, the y-axis is the main axis and the x-axis is the cross axis.

flex-start: Aligns items to the start of the cross axis.
flex-end: Aligns items to the end.
center: Centers items on the cross axis.
stretch: Stretches items to fill the container.
baseline: Aligns items based on their text baseline.

<div style="display: flex; align-items: center; height: 200px;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Flex Item Properties

align-self: flex-start | flex-end | center | stretch | baseline
The align-self property allows you to align an individual child along the cross-axis.

<div style="display: flex; height: 200px;">
  <div style="align-self: flex-start;">Item 1</div>
  <div style="align-self: center;">Item 2</div>
  <div style="align-self: flex-end;">Item 3</div>
</div>

Growing and Shrinking
3 properties to know: flex-grow, flex-shrink, and flex-basis.

flex-grow:

This property defines how much a flex item will grow relative to the other items inside a flex container when there is extra space available. By default, flex-grow is set to 0, meaning items won't grow beyond their natural size. Setting flex-grow: 1 allows the item to expand and occupy the remaining available space within the container.

If multiple items have flex-grow:1 applied, they will divide the extra space proportionally, based on the grow values set for each item.

Imagine a dashboard layout where you have a sidebar and a main content area. You want the sidebar to stay fixed in size, but the main content area should expand and take up the remaining space.

<div style="display: flex;">
  <div style="flex-grow: 0; width: 200px;">Sidebar</div> <!-- Fixed width sidebar -->
  <div style="flex-grow: 1;">Main Content Area</div> <!-- Expanding content area -->
</div>

flex-shrink:

When the container size reduces, items inside will also shrink proportionally.

For example, consider a profile card with a rounded image and a name. As the container shrinks, the image may distort, turning from a circle to an oval. To prevent this, you can set flex-shrink: 0, ensuring the image retains its original size while the rest of the content adapts.

<div style="display: flex;">
  <img src="profile.jpg" style="flex-shrink: 0; width: 50px; height: 50px; border-radius: 50%;" alt="Profile Picture"> <!-- Image won't shrink -->
  <div style="flex-shrink: 1;">User Name</div> <!-- Name can shrink -->
</div>

While you might think of using min-width to achieve the same effect, flex-shrink is a more straightforward and flexible approach within the Flexbox algorithm.

flex-grow controls how extra space is distributed among items.
flex-shrink controls how space is reduced when the container size decreases.

flex-basis: Setting the Initial Size

The flex-basis property defines the initial size of a flex item. If the flex-direction is set to row, flex-basis controls the width of the items. If the flex-direction is column, it controls the height.

flex-basis is similar to the width or height properties, but with one key difference: it only sets the initial size, while allowing the item to grow or shrink depending on the available space and the flex-grow and flex-shrink values.

If flex-basis is set to auto or content, the size of the item is based on its content.
If you want to define a fixed starting size but still allow the item to grow or shrink, use flex-basis.

.child {
  flex-basis: 25%;  /* Starts at 25% width, but can grow to fill space */
  flex-grow: 1;     /* Will grow to take up more space if available */
}

In this example, the child element initially takes up 25% of the container’s width, but it can grow beyond that if there’s more space available.

Setting a fixed size:

If you want the item to have a fixed size (not grow or shrink), you can use the flex shorthand, like this:

.child {
  flex: 0 0 100px; /* No growth, no shrinking, stays fixed at 100px */
}

This shorthand breaks down as:

0 (flex-grow): The item will not grow.
0 (flex-shrink): The item will not shrink.
100px (flex-basis): The item has a fixed size of 100px.

Using width instead of flex-basis inside a flex layout can lead to issues sometimes.because the item defined with width and won't adjust if the container grows or shrinks, making the layout less responsive. So use it appropriately.

align-content:

We've already learned about flex-wrap. Flex-wrap allows flex items to wrap to the next lines instead of shrinking, right?

Each of these flex lines acts like a separate "mini flex container". We also know that the align-items property is used to align items on the cross axis. Here, this align-items property will work inside this flex line only, because as I mentioned, each line itself is a mini flex container. We also have an outer flex container, right? If we need to align these lines with respect to the outer container, we need one more property that aligns these flex lines on the cross axis. That property is align-content.

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  height: 300px;
}

.item {
  width: 30%;
  height: 50px;
  background-color: #3498db;
  margin: 5px;
}

In this example, we have a flex container with multiple items that wrap onto multiple lines. The align-content: center; property centers the wrapped lines along the container's cross-axis.

The possible values for align-content include:

flex-start: Lines are aligned toward the start of the container.
flex-end: Lines are aligned toward the end of the container.
center: Lines are centered in the container.
space-between: Lines are evenly distributed; the first line is at the start of the container while the last one is at the end.
space-around: Lines are evenly distributed with equal space around each line.
stretch (default): Lines stretch to take up the remaining space.

Gaps

The gap property was not available in earlier versions of Flexbox. Previously, developers relied on margin properties to create space between flex items. The introduction of the gap property marked a significant improvement in Flexbox functionality.

It provides a straightforward method for creating space between flex items, simplifying the layout process.

.flex-container {
  display: flex;
  gap: 10px; /* Adds a 10px gap between all flex items */
}

Auto margins

margin: auto:

Last but not least, a commonly used spacing trick

The margin: auto property in Flexbox is a powerful tool for aligning flex items. It automatically uses the leftover space around the item, making it useful for centering or pushing items to opposite sides of a container.

For example, you can use margin-left: auto to push an item to the right side of a flex container:

.flex-container {
  display: flex;
}

.push-right {
  margin-left: auto;
}

This technique allows for quick and easy alignment without the need for additional positioning properties.

Conclusion

In this guide, we explored how Flexbox has simplified the task of aligning and distributing items within a webpage. Flexbox isn't just a layout tool—it's a critical skill for any web developer aiming to create responsive, well-structured designs. I hope this guide has helped you understand the power of Flexbox.

Try these demos and feel free to share your thoughts or questions. Thanks!

Test post

Ramkumar.barani — Sun, 08 Aug 2021 06:49:52 +0000

Test data

test post

DEV Community: Ramkumar.barani

Understanding Loops in JavaScript

Introduction

Different Ways to Create a Loop in JavaScript

1. for Loop

Syntax & Explanation:

When to Use:

2. while Loop

Syntax & Explanation:

Be Careful: Infinite Loops

When to Use:

3. forEach (For Arrays)

Syntax:

When to Use:

Modern Ways to Loop

.map() – Transforming Data

.filter() – Filtering Data

Looping Through Objects

for...in

Object.entries()

Traditional vs. Modern Approaches

Example 1: Filtering & Transforming Data

Traditional Approach: Using a for Loop

Modern Approach: Using .filter() & .map()

Example 2: Doubling Even Numbers

Traditional Approach: Using a for Loop

Modern Approach: Using .filter() & .map()

Best & Bad Practices

✅ Best Practices

❌ Bad Practices

Performance Considerations

Conclusion

Understanding Feature Flags: A Simple Guide

What are Feature Flags?

Why Use Feature Flags?

Using Feature Flags in Next.js with Vercel's Flags SDK

How to Build Your Own Feature Flag System

Step 1: Create a Custom Hook for Retrieving Feature Flags

Step 2: React Component

Other Feature Flag Solutions in the Market

Conclusion

Understanding Flex Properties in CSS

Auto margins

Conclusion

Test post

1. `for` Loop

2. `while` Loop

3. `forEach` (For Arrays)

`.map()` – Transforming Data

`.filter()` – Filtering Data

`for...in`

`Object.entries()`

Traditional Approach: Using a `for` Loop

Modern Approach: Using `.filter()` & `.map()`

Traditional Approach: Using a `for` Loop

Modern Approach: Using `.filter()` & `.map()`