javascript recommend better way to handle Repeat block javascript [closed]

[BrilliantBrilliant is verified member.]

Handling repeated code blocks efficiently in JavaScript is important for maintainability and performance. If you are encountering repetitive blocks of code, consider these approaches to streamline your code:


---

1. Use Functions

Encapsulate repeated logic in a reusable function. This eliminates duplication and makes it easier to update or modify the behavior in one place.

Example:

Before:

document.getElementById('btn1').addEventListener('click', () => {

    console.log('Button 1 clicked');

    alert('Action for Button 1');

});



document.getElementById('btn2').addEventListener('click', () => {

    console.log('Button 2 clicked');

    alert('Action for Button 2');

});

After:

function handleButtonClick(buttonId, message) {

    console.log(`${buttonId} clicked`);

    alert(message);

}



document.getElementById('btn1').addEventListener('click', () => handleButtonClick('btn1', 'Action for Button 1'));

document.getElementById('btn2').addEventListener('click', () => handleButtonClick('btn2', 'Action for Button 2'));





---

2. Use Loops

If your repeated code involves similar operations on multiple elements, use a loop (e.g., for, forEach, or map) to dynamically bind logic.

Example:

Before:

document.getElementById('input1').addEventListener('change', () => console.log('Input 1 changed'));

document.getElementById('input2').addEventListener('change', () => console.log('Input 2 changed'));

document.getElementById('input3').addEventListener('change', () => console.log('Input 3 changed'));

After:

const inputs = document.querySelectorAll('input');



inputs.forEach((input, index) => {

    input.addEventListener('change', () => console.log(`Input ${index + 1} changed`));

});





---

3. Event Delegation

Instead of attaching event listeners to multiple elements, use event delegation to attach a single listener to a parent element and handle events based on the target.

Example:

Before:

document.getElementById('item1').addEventListener('click', () => console.log('Item 1 clicked'));

document.getElementById('item2').addEventListener('click', () => console.log('Item 2 clicked'));

After:

document.getElementById('container').addEventListener('click', (event) => {

    if (event.target.matches('.item')) {

        console.log(`${event.target.id} clicked`);

    }

});





---

4. Use Higher-Order Functions

For more complex scenarios, use higher-order functions that accept callbacks to encapsulate varying behavior.

Example:

function executeOnElements(selector, callback) {

    document.querySelectorAll(selector).forEach(callback);

}



executeOnElements('.buttons', (button) => {

    button.addEventListener('click', () => {

        console.log(`${button.id} clicked`);

    });

});





---

5. Abstract Repeated Code into Classes or Modules

If your logic involves reusable components or repeated behavior across an application, use classes or modules for better scalability.

Example:

class ButtonHandler {

    constructor(buttonSelector) {

        this.buttons = document.querySelectorAll(buttonSelector);

        this.init();

    }



    init() {

        this.buttons.forEach((button) => {

            button.addEventListener('click', () => this.handleClick(button));

        });

    }



    handleClick(button) {

        console.log(`${button.id} clicked`);

    }

}



new ButtonHandler('.buttons');





---

6. Template Literals for Repeating HTML

If you’re dynamically generating similar HTML blocks, use template literals for better readability and fewer repetitions.

Example:

Before:

document.body.innerHTML += '<div class="item">Item 1</div>';

document.body.innerHTML += '<div class="item">Item 2</div>';

document.body.innerHTML += '<div class="item">Item 3</div>';

After:

const items = [1, 2, 3];

document.body.innerHTML += items.map((i) => `<div class="item">Item ${i}</div>`).join('');





---

7. Leverage Libraries

If your project allows, use JavaScript libraries like Lodash to simplify repetitive tasks like iterations, filtering, or mapping.


---

By combining these techniques, you can eliminate redundancy, reduce errors, and make your JavaScript code more maintainable.