Multi Developer SuHo

자바스크립트 Getter(게터) and Setter(세터) 본문

카테고리 없음

자바스크립트 Getter(게터) and Setter(세터)

Dreaming Developer Student 2023. 10. 7. 21:10
SMALL

모든  내용과 소스들은 다음과 같은  강의 플랫폼에서 응용하여  작성하였습니다.
출처: https://inf.run/xNcEg

 

[무료] [코드팩토리] [입문] 9시간만에 끝내는 코드팩토리의 Javascript 무료 풀코스 - 인프런 | 강의

이 강의 하나만으로 인기 Javascript 프레임워크들과 Typescript를 배울 수 있는 기본을 다질 수 있습니다., 자바스크립트 문법 마스터,9시간 만에 무료로 할 수 있어요! ✨ 자바스크립트 문법,한 강의

www.inflearn.com

자바스크립트에서  Getter와 Setter에 대해 알아보겠습니다. 일단 Getter와 Setter에 개념부터 아는것이 중요하겠죠?  

1. Getter(게터) : Getter는 객체의 속성 값을 얻을 때 사용됩니다.  즉  Getter는 값을 가져올 때 객체의 속성을 읽을 때,  Getter 메서드가 호출되며 그 결과를 반환합니다. Getter는 속성 이름 앞에   " get " 키워드를 사용하여 정의합니다.

 

Getter 메서드 와 Setter 메서드 예시 코드입니다. 

먼저 Getter 메서드 먼저 보겠습니다.

- IdolModel 이라는 클래스를 정의합니다. 

- 생성자 함수를 정의하고 호출합니다.  name, year 두개의 매개변수를 받습니다

- Get 메서드 정의하고 호출합니다. 

 

/**
 * Getter and Setter
 */
class IdolModel{
    name;
    year;

    constructor(name, yaer){
        this.name= name;
        this.year= yaer;
    }
    /**
     * getter - 값을 가져올 때 사용
     * 1) 데이터를 가공해서 새로운 데이터를 반환할때
     * 2) private한 값을 반환할 때
     */
    get nameAndYear(){  //get 키워드를 입력한 순간 하나의 변수처럼, 하나의 오브젝트의 키값인 것처럼 사용가능
        return `${this.name}-${this.year}`;
    }

    set setName(name){ //setter 같은 경우는 무조건 매개변수 하나를 받아야한다
         this.name= name;
    }
}

const winter = new IdolModel('윈터', 2001);
console.log(winter);
console.log(winter.nameAndYear); //get라고 하면은 변수를 키값으로 벨류를 가져오는 것처럼 실행

출력결과 IdolModel 클래스에 입력된 값과  정의된 메서드  Get  nameAndYear ()  를 호출하여 값을 받을 수 있는 결과입니다.  

 

다음은 Setter 메서드입니다.

2. Setter(세터) : Setter 는 객체의 속성 값을 설정 또는 수정할 때 사용됩니다. 객체의 속성을 변경할 때, Setter 메서드가 호출되며 새로운 값을 인자로 받아 속성을 업데이트 합니다. Setter는 속성 이름 앞에 "Set" 키워드를 사용하여 정의합니다

 

set setName(name){ //setter 같은 경우는 무조건 매개변수 하나를 받아야한다
         this.name= name;
    }

Setter 는 새로운 값을 저장하는데 사용됩니다. 

private 값을 적용한 소스코드입니다. 

 

Private 값이란? :  실제로 값을 저장하고 있지만 외부에서 엑세스를 하지 못하는  즉 접근을 하지 못한다는 뜻입니다.

 

Private 값은 외부에서 접근이 불가능 하지만 Getter 를 이용해서 private 값을 가져올 수 있다는 것입니다.

//private 값이란 실제로 값을 저장하고 있지만 외부에서 엑세스를 하지 못하는 값
class IdolModel2{ 
    #name;
    year;

    constructor(name, year){
        this.#name = name;
        this.year = year;
    }

    get name(){
        return this.#name;
    }
    
    set name(name){
        this.#name = name;
    }
}


const winter2 = new IdolModel2('윈터', 2001);
console.log(winter2);
console.log(winter2.name);

winter2.name = '자바스크립트';
console.log(winter2.name);

 

private 값을 외부에서 가져올 수 없지만 Get 메서드를 이용하여 값을 가져올 수 있는 실행결과를 알 수 있습니다.

LIST