자바스크립트 챌린지 4: 누가 좋아하는가 - [ES2021]

This article was originally posted on my blog. Head over to inspiredwebdev.com for more articles and tutorials. Check out my JavaScript course on Educative to learn everything from ES6 to ES2020.

이 기사에서는 CodeWars의 Who Likes It 챌린지를 함께 해결할 것입니다. 여기link에서 찾을 수 있습니다. 이번 챌린지의 난이도는 쉽습니다.

함께 작업을 읽어 봅시다.

You probably know the "like" system from Facebook and other pages. People can "like" blog posts, pictures or other items. We want to create the text that should be displayed next to such an item.

Implement a function likes :: [String] -> String, which must take in input array, containing the names of people who like an item. It must return the display text as shown in the examples:

likes [] -- must be "no one likes this"
likes ["Peter"] -- must be "Peter likes this"
likes ["Jacob", "Alex"] -- must be "Jacob and Alex like this"
likes ["Max", "John", "Mark"] -- must be "Max, John and Mark like this"
likes ["Alex", "Jacob", "Mark", "Max"] -- must be "Alex, Jacob and 2 others like this"

For 4 or more names, the number in and 2 others simply increases.

이 챌린지는 이전에 살펴본 것보다 조금 더 쉬우며 해결하는 데 많은 시간이 걸리지 않습니다.

먼저 기존의 방식으로 해결을 시도한 다음 ES2021의 새로운 기능 중 하나로 어떻게 접근할 수 있는지 보여드리겠습니다.

Switch 문을 사용하여 챌린지 완료

이 챌린지에서는 switch 문을 사용하고 각 사례에 대해 요청된 문자열을 반환합니다.

다음과 같이 시작하겠습니다.

function likes(names) {
  names = names || [];
  switch(names.length){
    case 0: return 'no one likes this'; break;
  }
}

간단한 함수를 초기화하고 첫 번째 줄에서 names 가 존재하는지 확인하고, 그렇지 않으면 빈 Array 으로 변환합니다.

그런 다음 사례로 switch names의 길이를 사용하여 Array 문을 시작합니다.

첫 번째는 매우 간단하고 두 번째는 문자열 보간법을 사용합니다.

function likes(names) {
  names = names || [];
  switch(names.length){
    case 0: return 'no one likes this';
    case 1: return `${names[0]} likes this`;
    case 2: return `${names[0]} and ${names[1]} like this`;
    case 3: return `${names[0]}, ${names[1]} and ${names[2]} like this`;
    default: return `${names[0]}, ${names[1]} and ${(names.length - 2)} others like this`;
  }
}

${}의 의미를 모르는 경우 문자열 보간here에 대한 자세한 내용을 참조하십시오.

챌린지가 놀라운 일이 아니었기 때문에 인덱스 0과 1에서 Array 값에 쉽게 액세스하여 모든 사례에 대한 이름을 표시하고 names.length -2를 사용하여 사용할 기본 사례에 남은 수를 표시할 수 있습니다. 이름이 4개 이상인 경우.

ES2021로 해결해보세요

ES2021은 JavaScript에 많은 새로운 추가 사항을 가져올 것입니다. 그 중 하나는 이 챌린지에서 사용하려고 합니다.

ES2021에 제공되는 모든 것에 대해 자세히 알아보려면 여기link에서 내 기사를 확인하십시오.

언어 구분 목록 서식을 활성화하는 생성자Intl.ListFormat를 사용해 보겠습니다.

기본적으로 할 수 있는 일은 접속사 또는 분리사를 사용하여 특정 언어를 기반으로 이니셜Array에서 형식이 지정된 목록을 만드는 것입니다.

const names = ["Max", "John", "Mark"];

const formatter = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' });

console.log(formatter.format(names));
// Max, John, and Mark

아주 멋지죠? 우리 기능을 신청해 봅시다.

function likes(names) {
  names = names || [];
  switch(names.length){
    case 0: 
        return 'no one likes this';
    case 1: 
        return 
            `${new Intl.ListFormat('en', { style: 'long', type: 'conjunction' }).format(names)} likes this`; 
    case 2:
    case 3:
        return 
            `${new Intl.ListFormat('en', { style: 'long', type: 'conjunction' }).format(names)} like this`; 
    default: 
        return `${names[0]}, ${names[1]} and ${(names.length - 2)} others like this`;
  }
}

보시다시피 Intl.ListFormat를 사용하여 case 1 ~ 3을 하나로 합치고, likes와 like를 올바르게 사용하기 위해 case 1을 분할해야 했지만 그 외에는 기능은 동일합니다.

더 많은 예를 보려면 here로 이동하십시오.

챌린지 자체가 매우 쉬움에도 불구하고 이것이 도움이 되었기를 바랍니다. 많은 분들이 아직 모르실 수 있는 것을 보여드리고 싶었습니다.

이 문제를 해결하는 다른 많은 방법이 있습니다. 의견에 귀하의 방법을 알려주십시오.

이러한 유형의 콘텐츠가 마음에 드셨다면 댓글로 알려주시면 더 많은 콘텐츠를 만들겠습니다.

ES6에서 ES2020까지 JavaScript에 대한 모든 것을 배우고 싶다면 Github에서 무료로 읽을 수 있는 제 책을 확인하세요. 과정도 진행 중입니다 Educative.