[프로그래머스 42576] 완주하지 못한 선수 (Javascript)

👩🏻‍💻문제링크

[프로그래머스 42576] 완주하지 못한 선수 (Javascript)
문제 설명
수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다.

마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요.

제한사항
마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다.
completion의 길이는 participant의 길이보다 1 작습니다.
참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다.
참가자 중에는 동명이인이 있을 수 있습니다.
입출력 예
participant completion return
["leo", "kiki", "eden"] ["eden", "kiki"] "leo"
["marina", "josipa", "nikola", "vinko", "filipa"] ["josipa", "filipa", "marina", "nikola"] "vinko"
["mislav", "stanko", "mislav", "ana"] ["stanko", "ana", "mislav"] "mislav"
입출력 예 설명
예제 #1
"leo"는 참여자 명단에는 있지만, 완주자 명단에는 없기 때문에 완주하지 못했습니다.

예제 #2
"vinko"는 참여자 명단에는 있지만, 완주자 명단에는 없기 때문에 완주하지 못했습니다.

예제 #3
"mislav"는 참여자 명단에는 두 명이 있지만, 완주자 명단에는 한 명밖에 없기 때문에 한명은 완주하지 못했습니다.

✍️Idea Sketch

2021-06-18

1. 완주하지 못한 선수의 이름을 return 한다

2. (주의) 동명이인이 있을 수 있다 --> arr.filter 쓸 수 있나?

• completion을 중복없는 배열인 Set 으로 변환
• 완주자 명단에 있는 경우, 완주자 Set 에서 제거하면 된다.

participant.filter(p => {
  if (!s.has(p)) return p;
  else s.delete(p);
}

3. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주

• 단 한 명의 선수를 찾으면 연산을 종료하고 싶음
• arr.filter()는 배열 끝까지 확인하므로 효율성이 낮지 않을까?
• arr.map(), arr.filter(), arr.reduce()는 끝까지 확인함 --> arr.forEach()를 써볼까?

문제점 : arr.forEach()의 특징

return true; // continue
return false; // continue
return something; // undefined

 

2021-06-23

1. 효율성 통과를 위해 completion 배열의 원소 삭제없이 구현방법 고안

2. sort() 사용 후 처음부터 끝까지 일치/불일치 확인

• 배열의 처음부터 끝까지 확인하므로 효율성 문제가 있을 것이라 예측

실행결과, 예상과 달리 효율성 통과

✍️소스코드

2021-06-18 정확성 2개 실패, 효율성 실패

function solution(participant, completion) {
  let s = new Set(completion);

  return participant.filter((p) => {
    if (!s.has(p)) return p;
    else s.delete(p);
  })[0];
}

2021-06-23 정확성 성공, 효율성 성공

function solution(participant, completion) {
  participant = participant.sort();
  completion = completion.sort();
  for (let i = 0; i < participant.length; i++) {
    if (participant[i] !== completion[i]) return participant[i];
  }
}

✍️명답

고수의 코드

var solution=(_,$)=>_.find(_=>!$[_]--,$.map(_=>$[_]=($[_]|0)+1))

• 가독성을 위해 풀어쓴 코드 (step 1)

var solution=(participant,completion)=>participant.find(name=>!completion[name]--,completion.map(name=>completion[name]=(completion[name]|0)+1))  // 1

• 가독성을 위해 풀어쓴 코드 (step 2)

var solution = (participant, completion) => {
  completion.map((name) => (completion[name] = (completion[name] | 0) + 1));  // 2
  return participant.find((name) => !completion[name]--);  // 4
};

댓글 인용한 설명

1. participant.find(콜백 애로우 함수, 맵펑션)에서 맵평션이 먼저 실행되는 이유

• participant.find(콜백 애로우 함수, 맵펑션) 이렇게 두개의 argument(전달인자)가 주어진거고, 뒤의 맵펑션이 콜백 전에 실행이 됩니다. 그러므로 함수가 시작이 되면 콜백 애로우 함수 보다 두번째 맵 함수가 먼저 실행이 됩니다.

2. completion[name]=(completion[name]|0)+1) 의미

• completion[name]을 정의를 하는데 (=), 뭐로 만드냐면, OR 을 사용해서, "만약 completion[name]이 존재하면, 그 값에 +1 을 한 것", 이고, "존재 안하면, 0 + 1 (즉 1이죠)"으로 정의해라.

3. 자바스크립트의 배열은 사실, 객체입니다.

• typeof 로 아무 배열 만드셔서 확인해보시면 오브젝트가 나오죠. 그러므로 completion[name]을 하면 단순히 우리가 객체에서 'key-value' 페어에서 밸류 접근하듯이 "completion 객체 중 name이라는 키의 값이 뭐니" 가 됩니다. 그리고 만약에 그런 키-밸류 페어가 존재하지 않으면 undefined를 리턴하게 되고, 이것은 false가 되므로, 위의 OR 구절에서 앞이 false였으므로 뒤의 값인 0 이 출동하게 되고, 실제로 정의되는 값은 0 + 1인 1 이되죠. 그러므로 컴플리션 배열 안에 "하나만 있는 이름"은 모두 이름 : 1 이렇게 변하게 됩니다.
• 만약에 이름이 두개인 경우에는 completion[name]이 이미 존재해서 1 이라는 값을 리턴 할거고, 그러면 1 + 1 이되어서 2개가 되고, 이름이 더 많으면 뭐 계속 더해지겠죠. completion 배열의 각 요소에 대해 이 작업을 끝내주면 이 '맵펑션' 부분의 존재 이유가 달성이 되고 completion은 처음에 인풋 받았던 배열이 아닌, 이름: 갯수 들이 "추가가 된" 배열이 되죠. 실제로 바뀐 배열을 체크해보면 이렇습니다. ['cake', 'ball', 'sauce', 'cake', cake: 2, ball: 1, sauce: 1].

4. !completion[name]-- 의미

• participant에 find를 했으므로 이제 모든 참가자의 이름을 갖고 completion에 이 이름이 몇 개 존재 했었나를 보게 됩니다. 그러면 만약에 이름이 1개 였으면 "불려오는 순간에는 1이므로 이것은 불리언으로 보면 참", 그리고 find의 참거짓 판별은 앞의 ! 느낌표로 인해 참은 거짓으로 변해서 '거짓'이 됩니다. 1 이상이었어도 마찬가지로 0이상의 숫자였을거니까, 거짓으로 판명이 나고 find 함수는 계속 이어집니다. 그러면 언제 "참"이 나오냐면, 그것은 completion[name]이 '거짓'이 되는 값을 반환했을 때 뿐입니다.
• 거짓이 될 값은 0 이거나, 아니면 'name'에 해당하는 페어가 completion에 존재하지 않을 때는 undefined를 리턴 하겠죠. 그럼 false들을 리턴하게 되고, ! 로 인해서 true로 바뀌고 정답 개봉박두 입니다.

도움되는 댓글 한마디

1. 배열에 대해서는 for … in 구문 보다는 for를 사용하거나 ES6의 forEach 함수를 사용하는 것을 권장합니다.

• for … in은 객체 내의 프로퍼티 속성 중 enumerable: true인 모든 프로퍼티를 순회하여 검색하는 용도이기 때문에 적합하지 않습니다.
• 최근의 브라우저는 배열에 대해 for … in을 사용해도 오류가 나지 않지만, Old IE의 경우에는 배열 인덱스 외에 검출되는 프로퍼티가 있기 때문에 undefined 와 같은 오류가 발생합니다.

2. arr.length 식은 매번 루프때마다 메소드를 실행시키니 length 선언한 값을 변수로 뺀 후 그 변수를 사용하면 성능이 조금 더 향상합니다.