Introduction to Repeat Element in JavaScript

Repeating elements is a common task in front-end development. Whether you’re creating lists, rendering components multiple times, or managing repetitive data inputs, understanding how to implement repeat logic efficiently can save you a ton of time and make your code more maintainable. In this article, we’ll delve into various ways to repeat elements in JavaScript and explore several APIs to help make this task easier.

API Examples

1. Using the Array.fill() Method

The Array.fill() method is a simple yet powerful tool for repeating elements in an array. Below is a quick example:

  const repeatItem = (ele, num) => {
    return Array(num).fill(ele);
  }
  console.log(repeatItem('a', 5));  // ['a', 'a', 'a', 'a', 'a']

2. Using the Array.map() Method

This method is useful when you need to create an array of repeated elements with complex values.

  const repeatItem = (ele, num) => {
    return Array.from({ length: num }, () => ele);
  }
  console.log(repeatItem('b', 3));  // ['b', 'b', 'b']

3. Using for Loop

The traditional for loop also offers a robust solution for repeating elements, especially when performance is a concern.

  const repeatItem = (ele, num) => {
    const result = [];
    for (let i = 0; i < num; i++) {
      result.push(ele);
    }
    return result;
  }
  console.log(repeatItem('c', 4));  // ['c', 'c', 'c', 'c']

Application Example

Now that we've covered various methods, let’s use them in a mini-project. We'll create a simple app that generates a list of repeated items based on user input.

HTML

  
  
  
  
    
    
    
  
  
    

      
      
      Generate
      

    

    
  
  

JavaScript

  // script.js
  const generateList = () => {
    const element = document.getElementById('element').value;
    const number = parseInt(document.getElementById('number').value || 0, 10);
    const result = document.getElementById('result');

    result.innerHTML = '';

    const items = Array.from({ length: number }, () => element);
    items.forEach(item => {
      const listItem = document.createElement('li');
      listItem.textContent = item;
      result.appendChild(listItem);
    });
  }

This simple app takes user input for an element and a number, then generates a list of repeated items, displaying them on the screen.

Hash: 703b0158082a87fddc99bbf095b97fab8e3ad5592faa8ce727809dc81272a2cb