머리글
지난주 목요일에 듣다가 지쳐서 잠시 미뤄두었던 자바스크립트 기초 강의를 이어서 수강했다. class의 상속부터 정리하겠다.
자바스크립트 기초(2)
1) Class의 상속
class를 '상속'한다는 것은, 이미 만들어 둔 특정 class를 통해 자식 class를 만든다는 것을 의미한다. 코드를 작성하며 살펴보았다.
기존에 작성한 'Cat'은 name을 받아서 console로 name을 입력해주는 class였다. name과 더불어 'age'도 입력해주는, 자식 class인 'MyCat'을 생성했다.
'extend'는 확장, 연장한다는 뜻을 가진 단어이다. 새로운 class는 'Cat으로부터 확장된 class'라는 의미로 extends라는 keyword를 사용한다. 말이 어려운데 그냥 MyCat은 Cat으로부터 class를 상속받는다는 의미다.
새로운 class도 '초기화'를 위해 기본적으로 'constructor()'를 입력했다. 오늘도 역시 나의 기억력에 감탄했다. '초기화'의 정의를 TIL 어딘가에 분명 정리했는데, 놀라울만큼 기억이 나지 않았다. 괜찮다...또 정리하자...
-초기화: 객체를 선언하고, 값을 최초로 할당하는 것
name과 age를 출력하는 class를 만들 예정이니, constructor에 name과 age를 투입했다. 그런데 name을 출력하는 매커니즘은 이미 부모 class에서 설정한 바 있다. 이런 상황에 사용하는 것이 'super' method이다.
'super method'는 '자식 constructor' 내부에서 '부모 constructor'를 호출하며 인수를 전달한다. 이후 this를 사용할 수 있게 해준다.
name은 부모 constructor에서 가져왔으니, 추가적으로 age를 설정했다.
그런데 'showName'이라는 부모 class 내장함수를 자식 class에서 그대로 사용하면 어떻게 될까?
부모 class에서의 showName 내장함수가 사라지는 것은 아니지만, 자식 class의 내장함수가 우선적으로 출력됨을 '+입니다'를 통해 확인할 수 있다.
2) Spread 문법
Spread 문법은 객체 내부에 있는 값을 객체 바깥으로 꺼낼 때 사용하는 문법이다. 역시 코드를 통해 살펴보았다.
Spread 문법은 다양한 상황에서 적용할 수 있지만, 해당 강의에서는 spread가 무엇인지 정도만 살펴보았다. 어제 해결하지 못한 부분에 대한 단서가 될 수 있겠다는 생각이 들었다. 역시나 단서가 아니었다.
map 직접 구현하기
분명 어제 객체를 빈 배열에 투입하는 것까지 성공하고, '.name'으로 접근하면 될 거 같다고 생각해서 위 코드와 동일하게 시도했었다. 어제는 죽어도 안 돼서 오만가지 고민을 다 했는데, 왜 오늘은 뻔뻔하게 잘 되는 거지? 원인을 알 수 없는 성공이 그리 통쾌하지는 않다...
회고
어찌어찌 기존에 사용하던 map method를 'for 문'을 통해 직접 구현해 내는데 성공했다. 귀신이 곡할 노릇이다. 컴퓨터는 거짓말을 안 하니까 내 잘못이다. 아무튼 내일은 react 프로젝트를 위한 마지막 기초 자바스크립트 강의를 수강하고 filter method를 직접 구현해 보겠다. 생각할수록 분노가 끓어오른다.
