padEnd()

ES2017+

Pads the current string from the end with another string until the resulting string reaches the given length.

Syntax

string.padEnd(targetLength, padString)

Parameters

targetLength number

The length of the resulting string

padString string optional

The string to pad with (default: space)

Return Value

string

The padded string

Examples

JavaScript

const str = 'abc';
console.log(str.padEnd(6, '123'));

Output:

// 'abc123'

📌 When to Use

Use padEnd() for right-aligning text in fixed-width displays, creating table columns, formatting output for terminals, or ensuring consistent string lengths for storage or comparison.

⚠️ Common Mistakes

Confusing padEnd() with padStart() - padEnd() adds padding to the right side, making the original text left-aligned.

Expecting padEnd() to truncate strings - it only pads, never shortens. Use slice() first if you need to limit length.

Not considering multi-byte characters - emoji and CJK characters may count as multiple units, affecting alignment.

✅ Best Practices

Use padEnd() combined with padStart() for centering text: text.padStart((width + text.length) / 2).padEnd(width).

For table-like output, calculate the maximum width of each column first, then use padEnd() for consistent alignment.

When dealing with variable-width characters, consider using a library that handles grapheme clusters for proper alignment.

⚡ Performance Notes

padEnd() has the same performance characteristics as padStart() - highly optimized in modern engines. For creating formatted tables with many rows, build the entire output as an array of strings and join() at the end rather than logging each row individually.

🌍 Real World Example

Console Tables and Text Alignment

padEnd() is perfect for creating aligned text output in terminals, formatting data for CLI applications, and building simple ASCII tables.

// Create a formatted table output
function printTable(headers, rows) {
  // Calculate column widths
  const widths = headers.map((h, i) =>
    Math.max(h.length, ...rows.map(row => String(row[i]).length))
  );

  // Print header
  const headerLine = headers
    .map((h, i) => h.padEnd(widths[i]))
    .join(' | ');
  console.log(headerLine);
  console.log('-'.repeat(headerLine.length));

  // Print rows
  rows.forEach(row => {
    console.log(
      row.map((cell, i) => String(cell).padEnd(widths[i])).join(' | ')
    );
  });
}

printTable(
  ['Name', 'Role', 'Salary'],
  [
    ['Alice', 'Developer', 75000],
    ['Bob', 'Designer', 65000],
    ['Charlie', 'Manager', 90000]
  ]
);
// Name    | Role      | Salary
// --------------------------------
// Alice   | Developer | 75000
// Bob     | Designer  | 65000
// Charlie | Manager   | 90000

// Fixed-width field formatting for files
function formatFixedWidth(record, fieldWidths) {
  return Object.entries(record)
    .map(([key, value], i) => String(value).padEnd(fieldWidths[i]))
    .join('');
}

const record = { id: '001', name: 'Smith', amount: '150.00' };
console.log(formatFixedWidth(record, [5, 20, 10]));
// '001  Smith               150.00    '

// Progress display with description
function showProgress(task, percent) {
  const bar = '█'.repeat(percent / 5) + '░'.repeat(20 - percent / 5);
  console.log(`${task.padEnd(20)} [${bar}] ${percent}%`);
}

showProgress('Downloading', 75);
// 'Downloading          [███████████████░░░░░] 75%'

Related Methods

padStart() repeat()