[Javascript] Class 클래스 [get,set 구문 오류 필독]

자바스크립트에서의 클래스의 선언 및 활용

 

샘플 예제 ↓

 

class Person {
    //Class 내 생성자
    constructor(name,age){
    	//this를 통한 내부 프로퍼티 초기화
    	this.name = name;
        this.age = age;
    }
    
    //static 변수
    static blog = 'good-memory';
    //static 함수
    static speak = function (){
    	console.log('hello~');
    }
    
    //getter
    get name (){
    	return this._name;
    }
    //setter
    set name (value){
    	this._name = value;
    }
    
    //Class 내 메소드
    information(){
    	console.log(`my name is ${this.name}, I am ${this.age}years old.`);
    }
}

클래스의 내부에 여러가지 프로퍼티를 선언해 보았다.

1. constructor : Class 내에 있는 특별한 메소드로서, 다른 언어의 생성자와 비슷한 역할을 함.

클래스 객체 생성시, 전달되는 파라미터 값을 통해 내부 프로퍼티의 값을 초기화 할수 있다.

 

2. this : Class 내부 변수를 가리키는 키워드이다. this.변수명으로 내부 프로퍼티에 접근한다.

 

3. static : 객체생성이 아닌 클래스 명으로 접근 가능한 변수 및 메소드이다.

(접근방법 : 클래스명.스태틱변수 or 메소드명) c언어의 자료형과 흡사하다.

 

4. get : 사용자의 Class내 변수의 직접 접근을 막기 위해 혹은 추가 연산 등의 작업 이후

값을 리턴해야할 경우 사용 된다. 

 

5. set : 사용자의 Class내 변수의 직접 접근을 막기위해 혹은 추가 연상등의 작업 이후 값을

저장해야할 경우 사용 된다. 

 

★왜 get과 set 내부에 this.name 이 아닌 this._name 으로 작성 되어있나?

   위의 예제로 예를 들자면,

   get, set의 구문을 선언하는 순간 this.name은 더이상 변수가 아닌 

   함수와 비슷한 형태로 바뀐다. 다시말해, 구문 선언 이후 this.name에 접근하는 순간

   get 혹은 set 구문이 호출 된다는 것이다. 

  그래서 만일 set 내부에 this.name = value로 작성 하게되면 

  value값을 this.name에 대입하려는 순간 또 다시 set구문을 호출하게되고,

  해당 로직이 무한 반복 되면서 구문 오류가 나게 되는 것이다.

 

setter 로직 상세 설명