JavaScript - 객체 액세서

안녕하세요, 열망하는 프로그래머 여러분! 오늘 우리는 JavaScript 객체 액세서의 fascineting 세계로 접어들입니다. 프로그래밍에 새로운 사람이라면 걱정하지 마세요; 저는 여러분을 단계별로 안내해 드릴 것입니다. 제가 수년 동안 많은 학생들에게 가르쳐온 것처럼 말이죠. 그러니 커피 한 잔 (또는 여러분의 좋아하는 음료)을 들고, 이 흥미로운 여정을 함께 떠나보세요!

JavaScript - Object Accessors

객체 액세서 속성

액세서의 구체적인 내용에 들어가기 전에, 객체에 대해 간단히复習해 보겠습니다. JavaScript에서 객체는 관련된 데이터와 기능을 담는 컨테이너입니다. 실제 세계의 객체들의 디지털 버전을 생각해 보세요. 예를 들어, 차 객체는 색상, 브랜드, 속도와 같은 속성을 가질 수 있습니다.

이제, 액세서 속성은 우리가 값에 대해 더 잘 통제할 수 있도록 하는 특별한 종류의 속성입니다. 그들은 우리 객체의 데이터의 게이트keeper와 같습니다. 예제를 통해 이 개념을 더 깊이 탐구해 보겠습니다.

기본 객체 예제

let car = {
brand: "Toyota",
model: "Camry",
year: 2022
};

console.log(car.brand); // 출력: Toyota

이 예제에서 우리는 brand 속성을 직접 접근하고 있습니다. 하지만 우리가 이 속성에 대한 접근이나 수정을 더 잘 통제하고 싶다면 어떻게 하면 좋을까요? 이때 액세서가 도움이 됩니다!

JavaScript Getters

Getters는 특정 속성의 값을 가져오는 메서드입니다. 그들은 저장된 값을 단순히 반환하는 대신, 값을 실시간으로 계산할 수 있게 해줍니다. Getter를 사용하는 방법을 보겠습니다:

let person = {
firstName: "John",
lastName: "Doe",
get fullName() {
return `${this.firstName} ${this.lastName}`;
}
};

console.log(person.fullName); // 출력: John Doe

이 예제에서 fullName은 Getter입니다. 그는 firstName과 lastName을 결합하여 전체 이름을 계산하고 반환합니다. person.fullName과 같이 속성처럼 사용하는 것에 주목하세요. 메서드로 호출하는 것(person.fullName())과는 다릅니다.

JavaScript Setters

Setters는 Getters의 반대입니다. 그들은 특정 속성의 값을 설정하며, 속성이 변경되려고 할 때 코드를 실행할 수 있게 해줍니다. 다음은 예제입니다:

let thermostat = {
_temperature: 22, // 관례: 밑줄은 "プライベ이 티" 변수를 나타냅니다.
get temperature() {
return this._temperature;
},
set temperature(value) {
if (value > 30) {
console.log("너무 더워!");
} else if (value < 10) {
console.log("너무 추워!");
} else {
this._temperature = value;
}
}
};

thermostat.temperature = 25; // 온도를 25로 설정
console.log(thermostat.temperature); // 출력: 25

thermostat.temperature = 35; // 출력: 너무 더워!
console.log(thermostat.temperature); // 출력: 25 (변경되지 않음)

이 예제에서 우리는 온도를 위한 Getter와 Setter를 가진 thermostat 객체를 만들었습니다. Setter는 새로운 온도가 허용된 범위 내에 있는지 확인한 후 설정합니다.

JavaScript 객체 메서드 vs. Getters/Setters

Getters와 Setters 대신 일반 메서드를 사용할 수 없을까요? 훌륭한 질문입니다! 비교해 보겠습니다:

let rectangle = {
width: 5,
height: 3,
// 메서드
calculateArea: function() {
return this.width * this.height;
},
// Getter
get area() {
return this.width * this.height;
}
};

console.log(rectangle.calculateArea()); // 출력: 15
console.log(rectangle.area); // 출력: 15

calculateArea()와 area는 같은 결과를 주지만, Getter area는 속성처럼 보이고 느껴집니다. 그것은 더 직관적이고 코드를 깨끗하게 만들 수 있습니다.

데이터 품질과 보안

Getters와 Setters는 편리함만이 아니라, 데이터 품질과 보안을 유지하는 강력한 도구이기도 합니다. 그들은 다음과 같은 작업을 수행할 수 있습니다:

설정하기 전에 데이터를 검증합니다.
실시간으로 값 계산
내부 속성에 대한 접근을 제어

다음 예제는 이러한 이점을 보여줍니다:

let bankAccount = {
_balance: 1000, // "_" 관례로 "プライ베이 티" 속성
get balance() {
return `$${this._balance}`;
},
set balance(value) {
if (typeof value === 'number' && value >= 0) {
this._balance = value;
} else {
console.log("잘못된 잔액 입력");
}
}
};

console.log(bankAccount.balance); // 출력: $1000
bankAccount.balance = 1500;
console.log(bankAccount.balance); // 출력: $1500
bankAccount.balance = -500; // 출력: 잘못된 잔액 입력
console.log(bankAccount.balance); // 출력: $1500 (변경되지 않음)

이 예제에서 우리는 잔액이 항상 음수가 아닌 숫자인지 확인하고 있습니다.

Object.defineProperty()를 사용하여 getters/setters 정의

때로는 기존 객체에 액세서를 추가하고 싶을 수 있습니다. 이를 위해 Object.defineProperty()를 사용할 수 있습니다. 다음은 방법입니다:

let car = {
brand: "Toyota",
model: "Camry"
};

Object.defineProperty(car, 'fullName', {
get: function() {
return `${this.brand} ${this.model}`;
},
set: function(value) {
[this.brand, this.model] = value.split(' ');
}
});

console.log(car.fullName); // 출력: Toyota Camry
car.fullName = "Honda Civic";
console.log(car.brand); // 출력: Honda
console.log(car.model); // 출력: Civic

이 방법은 당신이 생성하지 않은 객체나 동적으로 액세서를 추가하고 싶을 때 특히 유용합니다.

getters/setters 사용 이유

요약하면, 우리가 getters와 setters를 사용하는 주요 이유는 다음과 같습니다:

이유	설명
데이터 캡슐화	내부 속성에 대한 접근을 제어
계산된 속성	값 계산
데이터 검증	설정하기 전에 데이터 무결성을 보장
이전 버전 호환성	기존 코드를 변경하지 않고 새로운 기능 추가
깨끗한 문법	계산된 속성을 일반 속성처럼 접근

기억하시라, 프로그래밍은 기능적이지만 깨끗하고 유지보수가 가능하며 보안이 있는 코드를 작성하는 것입니다. Getters와 Setters는 이러한 목표를 달성하는 데 강력한 도구입니다.

그럼 여러분! JavaScript 객체 액세서의 세계를 함께 탐험했습니다. 이 가이드가 여러분에게도 저와 같이 유익했기를 바랍니다. 연습이 완벽을 만든다는 것을 기억하고, 이 개념들을 자신의 코드에서 실험해 보세요. 행복한 코딩!

Credits: Image by storyset