1. 자바스크립트 문자열 메서드 padStart(), padEnd()

padStart()와 padEnd()메서드는 자바스크립트 문자열 메서드 중 하나로, 결과 문자열이 주어진 길이에 도달할 때까지 지정된 문자열로 채운다. padStart()는 문자열 시작 부분에 패딩이 적용되며 padEnd()는 끝 부분에 패딩이 적용된다.

우아한테크코스 프리코스 4주차 편의점 과제를 풀 때 이렇게 영수증을 정렬해서 출력하기 위해 사용했던 메서드이다.

1-1. padStart()와 padEnd()의 기본 문법

padStart() 메서드의 기본 문법은 다음과 같다:

padStart(targetLength, padString)
padEnd(targetLength, padString)

이 메서드는 순서대로 대상 문자열의 원하는 길이값(필수 인자)와 패딩으로 채울 값(선택 사항 인자)를 받는다.

대상 문자열의 길이가 targetLength가 될 때까지 padString을 반복해 길이를 채운다. padString이 생략된다면 공백(space)로 채운다.

1-2. padStart(), padEnd() 작성 예시

다음은 padStart(), padEnd()의 작성 예시이다.

// padStart() 예제
const str1 = "123";
console.log(str1.padStart(5, "0")); // 출력: "00123"

const str2 = "AB";
console.log(str2.padStart(6, "-")); // 출력: "----AB"

// padEnd() 예제
const str3 = "123";
console.log(str3.padEnd(5, "0")); // 출력: "12300"

const str4 = "XY";
console.log(str4.padEnd(6, "*")); // 출력: "XY****"

1-3. padStart(), padEnd()의 특징과 주의할 점

• padString의 길이가 targetLength를 초과해도 padStart 또는 padEnd는 필요한 만큼만 padString을 잘라서 사용한다.

const str = "12";
console.log(str.padStart(10, "123")); // 출력: "1231231232"

• 정렬 및 출력 서식 지정에 유용한 메서드이다. 글 첫 부분 영수증 예제처럼 padStart(), padEnd()를 마치 우측정렬 좌측정렬 기능처럼 이용하면 깔끔하게 정렬된다.

const items = [
    { name: "Apple", price: 100 },
    { name: "Banana", price: 150 },
    { name: "Cherry", price: 200 },
];

items.forEach(item => {
    console.log(
        item.name.padEnd(10) + // 이름을 좌측 정렬
        item.price.toString().padStart(6) + "원" // 가격을 우측 정렬
    );
});
// 출력:
// Apple     100원
// Banana    150원
// Cherry    200원

1-4. 활용

 products.forEach((product) => {
      const nameLength = 5 - product.name.length;
      const nameSpace = nameLength + 12;
      const name = product.name.padEnd(nameSpace);
      const quantity = product.quantity.padEnd(6);
      const price = product.price.padStart(10);
      MissionUtils.Console.print(`${name}${quantity}${price}`);
    });

위 코드는 우테코 4주차 프리코스 영수증 출력에서 상품명이 한글이고 각 길이가 다른 점에 따라, 상품명 길이가 달라도 정렬이 바르게 될 수 있도록 리팩토링 때 추가했던 코드이다.

nameLength 에 적은 5는 상품명의 최대 길이를 적은 것이다.
nameSpace는 기본 12번에 추가로 (가장 긴 상품명의 길이) - (현재 상품명의 길이) 번 더 추가된다.
이렇게하면,

글자길이가 2일 때, nameSpace는 3번 더
글자길이가 3일 때, nameSpace는 2번 더
글자길이가 5일 때, nameSpace는 0번 더 추가됨으로써

모든 name칸이 (가장 긴 상품명의 길이)에 맞춰진 상태에서 우측 패딩값을 주는 것과 같은 효과가 되는 것이다.

이렇게 잘 정렬돼서 출력되는 걸 확인할 수 있따.

글 작성 참고 사이트: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padStart