JavaScript로 게시물 좋아요 표시하기 — 좋아요를 누른 사람들의 이름을 배열로 처리하는 방법

문제 상황

소셜 네트워킹 사이트에서 특정 게시물에 좋아요를 누른 사람들의 이름이 문자열 배열로 주어진다고 가정해 봅시다. 우리는 이 배열을 입력으로 받아 적절한 문구를 반환하는 JavaScript 함수를 작성해야 합니다.

규칙은 다음과 같습니다.

• 좋아요를 누른 사람이 3명 이하라면, 함수는 좋아요를 누른 모든 사람의 이름을 그대로 포함한 문구를 반환합니다.
• 좋아요를 누른 사람이 4명 이상이라면, 함수는 첫 번째와 두 번째 이름만 표시하고, 나머지 인원수를 함께 반환합니다.

예를 들어, 아무도 좋아요를 누르지 않았다면 'no one likes this'를, 한 명만 눌렀다면 해당 이름을, 두 명 이상이라면 이름들을 쉼표로 구분하여 표시합니다.

코드 예제

다음은 위 규칙을 구현한 코드입니다.

const names = ['Ram', 'Manohar', 'Jay', 'Kumar', 'Vishal'];
const displayLikes = (names) => {
    return [
        'no one likes this',
        `${names[0]} likes this`,
        `${names[0]} and ${names[1]} like this`,
        `${names[0]}, ${names[1]} and ${names[2]} like this`,
        `${names[0]}, ${names[1]} and ${names.length - 2} others like this`,
    ][
        Math.min(4, names.length)
    ];
};
console.log(displayLikes(names));

동작 원리

이 코드의 핵심은 템플릿 리터럴로 만든 문구 배열과 Math.min()의 조합입니다.

1. 배열의 각 요소는 좋아요 수(0명, 1명, 2명, 3명, 4명 이상)에 따라 반환될 문구를 미리 정의해 둔 것입니다.
2. Math.min(4, names.length)는 이름 배열의 길이가 4보다 클 경우 인덱스를 4로 고정합니다. 덕분에 4명 이상일 때는 항상 마지막 문구인 '첫 두 이름 + 나머지 인원수' 형식이 선택됩니다.
3. 마지막 문구에서 ${names.length - 2}는 전체 인원에서 앞의 두 명을 제외한 나머지 사람 수를 계산합니다.

출력 결과

Ram, Manohar and 3 others like this

위 예제에서는 총 5명('Ram', 'Manohar', 'Jay', 'Kumar', 'Vishal')이 좋아요를 눌렀기 때문에, 앞의 두 이름인 'Ram'과 'Manohar'가 표시되고 나머지 3명은 '3 others'로 요약된 것을 확인할 수 있습니다.