일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- css3
- 자바스크립트 클래스
- 오블완
- 자바스크립트 async await
- 자바스크립트 상속
- HTML
- 자바스크립트 실행 컨텍스트
- css display
- css 포지션
- front-end
- 웹 개발 트렌드
- css position
- javascript
- 프론트엔드
- 자바스크립트 클로저
- 자바스크립트 스코프
- 자바스크립트 반복문
- 자바스크립트 promise
- javascript closure
- 자바스크립트 연산자
- html 주석
- html 코드
- 자바스크립트 프로미스
- 자바스크립트
- javascript opreators
- 자바스크립트 생성자 함수
- CSS
- 티스토리챌린지
- javascript opreator
- 자바스크립트 scope
- Today
- Total
Multi Developer SuHo
자바스크립트 Getter(게터) and Setter(세터) 본문
모든 내용과 소스들은 다음과 같은 강의 플랫폼에서 응용하여 작성하였습니다.
출처: 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 메서드를 이용하여 값을 가져올 수 있는 실행결과를 알 수 있습니다.