extends, getter/setter (객체 지향 4)

클래스를 만들면 여러 오브젝트를 생성자를 통해 만들고 관리할 수 있다. 그런데 만약에 특정 클래스에서 몇몇 속성이나 함수를 추가하여 새로운 클래스를 만들고 싶다면 어떻게 해야 할까? 이럴 때는 특정 클래스를 상속 받는 클래스를 만들면 된다. 이때 사용하는 문법이 extends이다. extends는 자바에서도 클래스 간 상속을 할 때 사용한다.

 

1. 클래스 상속 extends

• extends는 class를 상속하는 기능이다. 이를 통해 연관된 클래스를 만들 수 있다.

class 할아버지 {
        constructor(name){
            this.성 = 'Kim';
            this.이름 = name;
        }
    }
var 할아버지1 = new 할아버지('만덕');
    
class 아버지 extends 할아버지 {
	constructor(name, age){
        	super(name);
            	this.나이 = age
            }
	}
var 아버지1 = new 아버지('만수', 40);

• 할아버지와 아버지라는 두 개의 클래스가 있는데, 아버지는 할아버지의 상속을 받는 클래스이다. 즉, 아버지라는 클래스는 할아버지에 있는 성 과 이름 속성을 사용할 수 있다. 이 값들은 prototype에 저장되지 않고 오브젝트 자체가 직접 갖는 값이 된다.
  • 아버지가 할아버지의 값들을 가질 수 있는 이유는 아버지의 생성자 안에 할아버지 생성자를 넣어주었기 때문이다. 바로 super() 이다. super()는 상속하는 클래스의 생성자를 뜻하며 위에서는 할아버지 생성자를 뜻한다. 따라서 상속받은 속성 중 이름에 파라미터를 입력받기 위해서 super 안에 name 값을 입력하였다. 입력 안할 시 undefined 할당.
    • 기본적인 생성자 안에는 입력받는 모든 파라미터를 적되, 상속받은 속성에 추가할 값은 super() 안에 넣어주면 된다.
• 아버지는 할아버지가 갖는 성, 이름 뿐만 아니라 새로 추가한 나이라는 속성을 갖는다. (extends를 사용하여 유사한 클래스를 생성할 수 있었다.)
• 상속받은 클래스가 this를 사용하기 위해선 먼저 super()를 써야 한다.

class 할아버지 {
        constructor(name){
            this.성 = 'Kim';
            this.이름 = name;
        }
        sayHi(){
        	console.log('나는 할아버지');
            }
    }
var 할아버지1 = new 할아버지('만덕');
    
class 아버지 extends 할아버지 {
	constructor(name, age){
        	super(name);
            	this.나이 = age
            }
    sayHi(){
    	console.log('나는 아버지');
        }
	}
var 아버지1 = new 아버지('만수', 40);
아버지1.sayHi(); // '나는 아버지' 출력, 아버지 prototype에 있는 sayHi를 사용

• 두 클래스에 동일한 함수가 있을 경우, 자바스크립트는 가장 가까운 쪽의 함수를 찾아 사용한다. 아버지1.sayHi()의 경우, 아버지의 prototype에 sayHi가 있으므로, 이를 사용한다. 만약 아버지에 없다면 할아버지의 sayHi()를 찾아서 사용('나는 할아버지' 출력됨)

class 아버지 extends 할아버지 {
	constructor(name, age){
        	super(name);
            	this.나이 = age
            }
    sayHi(){
    	console.log('나는 아버지');
        super.sayHi();
        }
	}
var 아버지1 = new 아버지('만수', 40);
아버지1.sayHi();

• 만약 super를 사용하여 sayHi 함수를 호출하면 어떻게 될까? 여기서의 super는 할아버지의 prototype을 뜻한다.
  • super는 사용되는 위치에 따라 의미가 다르다.
    1. 생성자 안에서 사용할 경우 : 부모 class의 생성자를 뜻한다.
    2. 생성자 밖에서(prototype 함수 내) 사용할 경우 : 부모 class의 prototype을 뜻한다.
  • 따라서 할아버지의 prototype에 접근하여 sayHi 함수를 호출한다. 출력 순서는 1. '나는 아버지' 2. '나는 할아버지' 이다.

2. 데이터를 안전하게 다루자 getter/setter

• 예전 자바나 파이썬으로 작성된 객체 지향 코드를 보면 값을 가져오거나 변경/추가하는 작업을 함수를 통해서만 접근할 수 있도록 작성된 걸 본적이 있다. API 문서나 기술 문서를 보더라도 단순히 값을 추가하는 것인데도 불구하고 함수가 작성되어 있음을 알 수 있다. 오브젝트가 많아지고, 관계가 복잡할 수록 데이터들은 오류가 적어야 한다. 만약 내가 숫자를 입력해야 하는 상황에서 문자열을 입력했을 때 함수를 작성한다면, 문자열인지 숫자인지 판단하는 조건문을 추가할 수 있을 것이다. 이처럼 함수는 데이터들의 관리에 있어서 오류를 발생하는 실수를 줄일 수 있다.
• 굳이 함수를 만들어서 데이터를 다루는 이유
  1. object 자료가 복잡한 경우, 값을 제어할 때 함수를 사용하면 편리하다.
  2. object 자료 수정/관리 시 편리하다. (오류 가능성 줄임)

var 사람 = {
	name : 'Park',
    age : 30,
    get nextAge(){
    	return this.age + 1
    },
    set setAge(age){
    	this.age = parseInt(age);
    }
}

사람.setAge = 20; // == 사람.setAge(20)
사람.getAge; // == 사람.getAge()

• 이처럼 age 값을 가져오거나 변경하기 위한 함수를 오브젝트 안에 작성하였다. 이때 값을 가져오는 함수는 get을, 값을 추가하거나 변경하는 함수는 set을 붙인다.
• get의 경우, 값을 가져오는 함수이기 때문에 반드시 return 문이 있어야 한다. (getter)
• set의 경우, 값을 집어넣는 함수이기 때문에 반드시 파라미터가 1개 이상 있어야 한다. (setter)
  • set 함수에서 문자열이 전달될 경우 이를 숫자로 바꿔준다. (함수로 데이터에 접근할 경우 작성 가능)
• 함수를 호출하는 경우에도 일반 함수처럼 ( )를 붙이지 않는다. 붙일 경우 에러 발생
• getter와 setter를 사용하는 이유 = 함수를 만들어서 데이터를 다루는 이유
  • object에 값을 추가할 때 원하는 조건에 맞게 값을 추가하기 위해서 setter를 사용할 수 있다. (함수를 작성함으로써 조건문, 반복문 등 여러 검수하는 작업들을 할 수 있다.) getter는 그에 따라 있어야만 하는 존재이다. ( 값을 추가했으면 가져오는 함수도 있어야 하므로 )

3. getter,setter 예제

• 숫자를 입력받아 짝수는 even에, 홀수는 odd에 넣는 코드를 작성한다.
• 값을 받아 분류하는 함수는 set 함수(setArr), 값을 받아오는 함수는 get 함수(getArr)이다.
• set 함수로 입력받은 여러 인자를 배열로 담기 위해 rest 파라미터를 사용하였다.
  • 여기서 반복문은 forEach((a) => {}) 를 사용하도록 하자 (아직 익숙X)
    • 이 때 콜백 함수가 아닌 arrow 함수를 사용해야 this로 접근할 수 있다. (콜백 함수를 사용할 경우 this는 window를 가리키므로)
• get 함수에서 odd와 even을 합치기 위해서 spread 오퍼레이터를 사용하였다. odd와 even의 요소들을 꺼내 total이라는 새로운 배열에 다 집어넣었다.

var data = {
        odd : [],
        even : [],
        set setArr(number){
            var arr = [...number];
            for(let i = 0; i<arr.length; i++){
                if (arr[i] % 2 == 0){
                    this.even.push(arr[i])
                    continue
                }
                this.odd.push(arr[i]);
            }
        },
        get getArr(){
            var total = [...this.odd, ...this.even];
            return total.sort();
        }
    }
    
 data.setArr(1,2,3,4);
 data.getArr;

 

자료 출처 : https://codingapple.com/

코딩애플 온라인 강좌 - 개발자도 단기완성!