필터 메소드 관련 질문입니다.

빠른 답변 정말 감사드립니다.

그런데 그 사이에 추가로 질문이 생겼습니다.

질문 01)

함수 선언할 때 어떤때는 function() {} (function과 소괄호 사이에 띄어쓰기 없음)처럼 쓰시고 어떤때는 function () {}  (한칸띄고 소괄호)로 쓰시는데 이건 매개변수와 상관이 있는건가요? 정해진 규칙같은게 있는지 궁금합니다.

질문 02)

카드 짝맞추기 강의중 팩토리 패턴과 프로토타입과 비교에서 프로토타입의 장점이 여러 객체를 동시에 수정가능한 점이라고 말씀해주셨는데요, 그런데 카드공장 함수만 조금 수정한다면 프로토타입을 사용하지 않고도 동시 수정이 가능하지 않은가 해서 질문드립니다.

예를들어,

function 카드공장(name, att, hp) {

     var 카드  = {

               name: name,

               att: att,

               hp: hp,

               type: '장난감'

      }

      return 카드;

};

이렇게 장난감공장 함수에서 선언된 카드라는 변수에 type: '장난감'을 추가한다면 카드공장을 통해서 리턴된 모든 객체는 type 속성으로 '장난감'을 가지게 되지 않나요? 물론 __proto__ 속성은 생략 가능하다고 하셨기 때문에 프로토타입으로 장난감을 적용해도 결과적으로 차이는 없겠지만 프로토타입을 사용해야 하는 이유를 잘 모르겠습니다. (너무 기본적인 질문인 것 같지만 막상 찾으려니 찾을수가 없어서 질문드립니다...)

-----------------------

마지막으로 카드 짝맞추기 코드 중 오타를 발견한 것 같아서 말씀드리겠습니다. 강의 마지막 부분에서 완성카드 배열을 통해 짝이 맞춰진 카드를 관리하는 부분이 있었는데요, 클로저 함수 안에서 includes 메소드를 사용해

if(클릭플래그 && !완성카드.includes(c)) {

    c.classList.toggle('flipped');

     클릭카드.push(c);

}

로 처리해서 같은 카드가 중복해서 클릭카드 배열에 들어가지 않도록 처리되었습니다.

그런데 이렇게 처리할 경우 동일한 카드를 두번 클릭해도 완성카드 배열에 들어가버려서 카드 한짝이 남아버리는 문제가 발생했습니다. (완성카드 배열은 클릭카드[0]과 클릭카드[1] 뒷면의 backgroundColor 속성을 비교 후 일치하는 경우에 div element가 들어가기 때문에 동일 카드가 두번 들어가는 것 같습니다.)

또한 그 후에 if문에서 완성카드 배열에 대해 includes 메소드가 실행되는데,  같은 카드를 연속해서 클릭시 이미 완성카드 배열에 동일 카드가 (두번) 들어가버려서 그다음부터 뒤집어지지 않는 현상이 발생했습니다.

그래서 if문 안에 있는 !완성카드.includes(c) 부분을 !클릭카드.includes(c)로 바꿧더니 잘 동작하게 되었습니다. 혹시 이 부분이 오타가 아닌가 해서 댓글로 남기게 되었습니다. 

설명을 단게별로 너무 잘 해주셔서 따라 치기만 하는데도 동작원리가 이해되는 것 같아서 정말 감사드립니다.

아직 테트리스까지 다 듣지는 않았지만 남은 강의가 더 기대됩니다.

그리고 이전 질문에 빠르게 답변해주신 점 다시한번 감사드립니다.

그럼 좋은 하루 되세요!

1. 띄어쓰기는 마음대로입니다. 아무 영향이 없습니다.

2. 프로토타입 없이 공장 함수로도 할 수 있긴 합니다. 다만 나중에 배우는 상속같은 것을 구현할 때는 프로토타입이 조금 더 편하긴 합니다.

3. 카드 짝맞추기 부분은 현재 유튜브에서 2021년 버전으로 강좌 진행중입니다. 말씀하신대로 그 부분은 코드가 수정되었습니다. 같은 카드를 두 번 연달아 클릭하지 못하도록요.