심층 자바스크립트(6)클래스 상속 및 객체타입 확인
객체를 사용할 때 타입(type)을 확인하는 일은 중요하다. 가령, 로그인 기능을 만들 때를 생각해보자. 로그인과 비슷한 프로그램에서는 사용자의 정보를 입력받고, 요청받은 정보를 도출해야 한다. 이때 사용자가 입력한 내용이 숫자인지 문자인지, DB에 있는 값이 객체인지 배열인지 등.. 조건을 찾아야 한다.
살아있는 코드는 끊임없이 유저의 정보를 받고 확인하고 검증하고 계산하는 기능을 해야 한다. 이 과정에서 반드시 필요한 작업이 'type확인'이다.
1 『타입확인(typeof)」
자바스크립트에서는 기본적으로 typeof연산자를 사용한다. 코드를 통해 확인해보자.
let brand = '나이키';
let price = '58000';
let size = '280';
let color = 'white';
let as;
let nullVal = null;
let shoes = {};
let sales = function( time, people ){
return time + '동안' + people +'명, 선착순';
}
function Factory(){
this.location = '경남 김해';
this.size = '2만평';
}
let factory = new Factory();
let factory = new Factory();
console.log(typeof brand); //>> string
console.log(typeof price); //>> number
console.log(typeof isNew); //>> boolean
console.log(typeof as); //>> undefined
console.log(typeof nullVal); //>> object
console.log(typeof shoes); //>> object
console.log(typeof sales); //>> function
console.log(typeof Factory); //>> function
console.log(typeof factory); //>>object
위에서 눈여겨 볼 부분은 null값이다. null은 객체이며, 단지 비어있을 뿐이며, 인식할 수 없는 undefined와 다르다. 그리고 프로토타입 객체로 선언한 Factory가 함수라는 점과 인스턴스로 받은 factory는 객체가 된다는 점도 알아둘 필요가 있다.
일반적으로 실전이 아닌 교과서적인 방식에서는 typeof까지 설명을 한다. 하지만 실전에서는 typeof보다 instanceof 연산자가 더 중요하다. (객체지향식 코드에서) instanceof연산자는 객체의 유형을 확인하고, 객체의 상위 생성자를 확인할 때 유용하다. 아래 코드를 살펴보자.
class Wine{
constructor(){
this.name = '조닌 끼안티';
this.price = 37000;
}
}
let redwine = new Wine();
console.log(redwind instanceof Wine);
//>>true
console.log(redwine instanceof Object);
//>>true
console.log(redwine instanceof Boolean);
//>>false
기본적으로 instanceof는 객체의 유형을 알려주는 역할을 한다. 그리고 아래와 같이 상속관계가 발생할 때 좀더 유용하게 사용할 수 있다.
2 「class상속 및 객체확인(instanceof)」
class Shoe{
constructor(){
this.brand = "nike";
}
getName(name){
return this.brand + name;
}
}
let shoe = new Shoe();
console.log(shoe instanceof Shoe);
//true
class Moka extends Shoe{
constructor(){
super();
this.brand ="clacks"
}
}
let moka = new Moka();
console.log(moka instanceof Moka);
console.log(moka.constructor === Shoe);
console.log(moka.constructor === Moka);
console.log(Moka instanceof Function);
console.log(moke instanceof Object);
Moka.getName('모카신');
let new_shoes = moka.getName('모카신');
console.log(new_shoes);
//>>clacks모카신
위의 코드에서 Moka는 Shoe클래스를 상속받는다. 상속구문에서 constructor()안의 'super()'는 상위 클래스의 속성을 모두 받아온다는 의미다. (super();가 없으면 에러 발생) 위에서는 this.brand 속성값만 변경하고, getName()메서드는 그대로 상속받았다.
new_shoes라는 변수를 만들고 moka의 getName()메서드를 실행하면 moka라는 객체가 Shoe클래스의 메서드와 속성까지 모두 상속받았음을 알 수 있다.
자바스크립트에서 class구문과 let범위가 좀더 엄격하게 적용됨으로써 복잡한 프로토타입 객체와 인스턴스 생성 과정이 줄어들었다. 클래스 구문은 뒤에 나오는 자바스크립트 패턴사용에 결정적인 역할을 한다. 다음 포스팅에서는 클래스 상속과 연관(메서드)된 내용을 알아보자.