인프런 커뮤니티 질문&답변

안녕하세요! 강의 항상 잘 듣고 있습니다.

현재 '5. 함수와 타입' 섹션 중 '30. 함수 타입의 호환성' 토픽을 복습하고 있습니다.

강의 영상 12:00 경, 함수 매개변수 타입 호환성 개념을 설명해주시면서 아래와 같은 코드를 예시로 보여주셨습니다.

let testFunc1 = (animal: Animal) => {
  console.log(animal.name);
  console.log(animal.color); // 문제가 되는 부분
};

let testFunc2 = (dog: Dog) => {
  console.log(dog.name);
};

해당 코드를 통해 매개변수 타입 호환성(반공변성)의 핵심 개념은 잘 이해했습니다. 다만 이후 함수 변수에 새로운 함수를 재할당하는 과정을 떠올릴 때, 원래 함수의 '매개변수 이름'이나 '내부 로직'이 할당받는 변수의 타입 정의에 의해 바뀌는 것처럼 혼동할 여지가 있을 수도 있겠다는 생각이 들었습니다.

즉 animalFunc = dogFunc;와 같이 할당했을 때, dogFunc 내부의 dog라는 매개변수 이름이나 dog.color 접근 코드가 animal이라는 이름과 animal.color 로의 접근으로 바뀌는 것이 아니라는 점을 학습자가 명확히 인지하지 못하고 변수의 타입이 함수의 내부 구현에 영향을 준다고 오해할 수도 있다는 관점입니다.

이런 혼동을 줄이고 타입 시스템의 검사와 자바스크립트 런타임 동작(코드 불변성)을 명확히 구분하기 위해 아래와 같이 변수의 타입을 명시적으로 지정하고 할당하는 방식으로 예시를 구성하는 것은 어떨지 조심스럽게 생각해 보았습니다.

let testFunc1: (animal: Animal) => void = (dog: Dog) => {
  console.log(dog.name);
  console.log(dog.color);
};

let testFunc2: (dog: Dog) => void = (animal: Animal) => {
  console.log(animal.name);
};

첫 번째 라인 (animal: Animal 타입 변수에 (dog: Dog) => ... 함수 할당)이 매개변수 반공변성 규칙에 따라 유효하지 않은 할당의 예시라는 점을 명확히 보여주시면서 (Animal을 기대하는 자리에 Dog를 기대하는 함수를 넣으면 왜 위험한지),

두 번째 라인 (dog: Dog 타입 변수에 (animal: Animal) => ... 함수 할당)은 유효한 할당 예시임을 설명해주시는 방식입니다.

이 과정에서 '함수 변수에 다른 함수를 할당하더라도, 원래 할당하려는 함수의 코드 로직이나 내부에서 사용된 매개변수 이름은 전혀 변경되지 않고 그대로 유지된다'는 점을 한번 더 명확하게 강조해주시면, 학습자들이 타입 호환성 개념과 JavaScript 런타임의 함수 동작 방식을 혼동하지 않고 더 깊이 이해하는데 큰 도움이 될 것 같습니다.

언제나 좋은 강의 감사드립니다! 앞으로도 열심히 수강하겠습니다.