[JavaScript] 객체지향 구문 (ES2015)

 

 

클래스 정의하기 - class 명령

ES2015 에서는 객체지향 구문이 크게 달라졌다. class 명령이 도입되었다. class 명령으로 정의된 클래스는 내부적으로는 함수이다. 자바스크립트에서 말하는 클래스가 도입된 것이 아닌 알기 쉽게 표현하기 위해서 class 명령만 도입되었다는 것에 가깝다. class 명령은 프로토타입 기반의 객체지향 구문을 간결하게 만드는 간편 표기법이라고도 할 수 있다.

 

메소드도 직접적으로 정의하는 표현법이 생겼다. class 블록 구문 하에서 메소드를 '이름(args, ...) {}' 구문으로 정의하는 것이 가능하다.

class Member {
    // 생성자
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    // 메소드
    getInfo() {
       return `${this.name} : ${this.age}`;
    }
}

let m = new Member('시온', 13);
console.log(m.getInfo());       // 시온 : 13

 

생성자의 이름은 constructor 로 고정되었다. 'this.프로퍼티명 = 값' 의 형식으로 값을 등록한다. 생성자와 메소드를 정의할 때 public, protected, private 와 같은 액세스 한정자를 사용할 수 없다. 자바스크립트의 클래스는 모든 멤버가 public 이다.

 

 

+ 클래스를 정의하기 전에는 호출할 수 없다. 

fuction 명령은 정적 구조이므로 정의하기 전에 클래스도 호출할 수 있다.(단, 함수 리터럴에 의한 선언에서는 불가능하다.)

other();    // ------

let m = new Member('시온', 13);

class Member {
    // 생성자
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    // 메소드
    getInfo() {
       return `${this.name} : ${this.age}`;
    }
}

function other() {
    console.log('------');
}

 

 

 게터와 세터 정의하기

class Person{
    constructor(sex) {
        this.sex = sex;
    }
    
    get sex() {
        return this._sex;
    }

    set sex(value) {
        this._sex = value;
    }
}

var p = new Person('남');
console.log(p.sex);    // 남
p.sex = "여";
console.log(p.sex);    // 여

 

 

 정적 메소드 정의하기

static 키워드를 메소드 정의의 앞에 부여하여 정적 메소드를 정의할 수 있다.

class Member {
    // 생성자
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    static printInfo(name, age) {
        console.log(`${name} : ${age}`);
    }
}

Member.printInfo('수린', 20);    // 수린 : 20

 

 

 기존 클래스 계승하기

클래스의 계승도 extends 키워드를 사용하여 기존 클래스를 계승한 서브 클래스를 정의한다. super 키워드로 상위 클래스의 생성자나 메소드를 호출할 수 있다.

class Person{
    constructor(sex) {
        this.sex = sex;
    }
    
    get sex() {
        return this._sex;
    }

    set sex(value) {
        this._sex = value;
    }
}

class Member extends Person {
    // 생성자
    constructor(sex, name, age) {
        super(sex);
        this.name = name;
        this.age = age;
    }

    getInfo() {
        console.log(`${super.sex} : ${this.name} : ${this.age}`);
    }
}

var mem = new Member('남', '수린', 20);
mem.getInfo();   // 남 : 수린 : 20

 

+ 메소드 오버라이드

상위 클래스에 정의된 메소드 혹은 생성자는 하위 클래스에서 재정의할 수 있다. 이것을 메소드 오버라이드라고 한다.

class Person{
    constructor(sex) {
        this.sex = sex;
    }
    
    get sex() {
        return this._sex;
    }

    set sex(value) {
        this._sex = value;
    }

    getInfo() {
        console.log(this._sex);
    }
} 

class Member extends Person {
    // 생성자
    constructor(sex, name, age) {
        super(sex);
        this.name = name;
        this.age = age;
    }

    getInfo() {
        console.log(`${super.sex} : ${this.name} : ${this.age}`);
    }
}

var mem = new Member('남', '수린', 20);
mem.getInfo();   // 남 : 수린 : 20

 

 

프로퍼티 동적으로 생성하기

프로퍼티 명을 대괄호로 묶음으로써 식의 값으로부터 동적으로 프로퍼티명을 생성할 수 있다.(Computed property names)

let i = 0;
let person = {
    name: "",
    age: 22,
    ['memo'+ ++i]: '과장',
    ['memo'+ ++i]: '부장',
}

console.log(person.memo1);   // 과장

 

 

모듈 - 애플리케이션을 기능 단위로 모으기

애플리케이션의 규모가 커질수록 애플리케이션을 기능 단위로 분할/정리하는 모듈의 존재가 필요하다. 자바스크립트에서 ES2015에서는 비로소 언어로서의 모듈이 지원되었다.

 

 

 모듈의 기본

모듈은 하나의 파일로 정의하는 것이 기본이다. 파일의 이름이 Test.js 라면 Test 모듈이 된다. 모듈로서 외부에서 액세스할 수 있는 멤버에는 export 키워드를 부여한다. 변수/상수/함수 등의 선언에도 부여할 수 있다. 기본적으로 모듈 안의 멤버는 비공개이다.

 

예시) Test.js 파일

const AUTOR = "YADDE";

export class Person {
    constructor(name) {
        this.name = name;
    }

    set name(value) {
        this._name = value;
    }

    get name() {
        return this._name;
    }
}

export class Member {
    constructor() {}

    static getInfo(name) {
        console.log(name);
    }
}

 

예시) main.js

import { Person, Member } from "./Test";

var m = new Person("이하니");

console.log(m.name);
Member.getInfo("유유윤");

 

 

반복자 - 열거 가능한 객체 정의하기

반복자(iterator)는 객체의 내용을 열거하기 위한 구조를 갖춘 객체이다. Array, String, Map, Set 등 내장 객체는 모두 디폴트로 반복자를 갖추고 있기 때문에 for/of 명령으로 내부의 요소를 열거할 수 있다.

 

예시) for/of 열거하기

let data_ary = ['one', 'two', 'three'];
let data_str = "기니디리미";
let data_map = new Map([
    ['one', '월'],
    ['two', '화'],
    ['three', '수']
]);

for(let d of data_ary) {
    console.log(d);
}

for(let d of data_str) {
    console.log(d);
}

for(let [key, value] of data_map) {
    console.log(`${key} : ${value}`);
}

 

 

예시) 원시적인 배열 열거 코드

let data_ary = ['one', 'two', 'three'];
let itr = data_ary[Symbol.iterator]();

let d;
while(d = itr.next()) {
    if(d.done) break;

    // 데이터 열거
    console.log(d.value);
}

 

 

 자체 제작 클래스에 반복자 구현하기

열거 가능한 객체를 직접 제작하는 경우에도 [Symbol.iterator] 메소드를 구현하면 반복자를 사용할 수 있다.

class MyObject {
    constructor(data) {
        this.data = data;
    }

    [Symbol.iterator]() {
        let current = 0;
        let that = this;

        return {
            next() {
                return current < that.data.length ?
                {value: that.data[current++], done: false} :
                {done: true};
            }
        };
    }
}

var myObj = new MyObject([10, 2, 30, 4, 50]);

for(let value of myObj) {
    console.log(value);
}

 

 

발생자 

열거 가능한 객체는 발생자(Generator)를 이용하면 더욱 쉽게 구현할 수 있다. 

 

예시) 발생자

yield 명령은 return 과 비슷한 명령으로 함수의 값을 호출자에게 반환한다. 그러나 return 명령은 그 자리에서 함수가 종료되는 반면, yield 명령은 처리를 일시 중지할 뿐이다. 다음에 호출될 때는 그 시점부터 처리를 재개한다.

function* myGenerator() {
    yield '아가아아';
    yield '123445';
    yield '가나';
    yield '초콜릿';
}

for(let t of myGenerator()){
    console.log(t);
}