23.9.26
- could -
해당 글은 ChatGPT에게 기본적인 개념에 대한 설명을 요구하고, 해당 내용을 조금 수정하는 방식으로 작성 되었습니다. 온전히 사람이 작성한 Javascript설명보다 나은지 별로인지, 학습에 사용하기에 적합한지 알아보기 위해 작성되고 있는 글입니다.
JavaScript의 객체(Object)는 데이터와 해당 데이터를 조작하는 함수(메서드)를 포함하는 복합적인 데이터 유형입니다. 객체는 중괄호 {}를 사용하여 정의하며, 중괄호 내에 키-값 쌍(key-value pair)을 나열하여 객체를 초기화합니다. 각 키는 문자열 또는 심볼이며, 값은 어떤 데이터 타입이든 될 수 있습니다. 객체의 키는 고유해야 하며, 동일한 키가 중복되지 않습니다.
예시를 통해 객체를 이해해 보겠습니다:
const person = {
firstName: "John",
lastName: "Doe",
age: 30,
isEmployed: true,
greet: function() {
console.log("Hello!");
}
};위의 예제에서 person은 객체이며, 다음과 같은 키-값 쌍을 포함합니다:
firstName: "John"lastName: "Doe"age: 30isEmployed: truegreet: 함수 (메서드)
객체의 특징과 사용법:
- 프로퍼티 (Property): 객체 내에서 데이터 값은 프로퍼티(property)라고 불립니다. 프로퍼티의 값은 다양한 데이터 타입일 수 있습니다.
- 메서드 (Method): 객체 내에서 함수는 메서드(method)라고 불립니다. 메서드는 객체 내의 동작을 정의하고 해당 객체에서 호출될 수 있습니다.
- 점 표기법 (Dot Notation) 및 대괄호 표기법 (Bracket Notation): 객체의 프로퍼티와 메서드는 점 표기법 또는 대괄호 표기법을 사용하여 접근할 수 있습니다.
- 점 표기법:
console.log(person.firstName); // "John"- 대괄호 표기법:
console.log(person["firstName"]); // "John"
- 프로퍼티 추가 및 수정: 객체에는 프로퍼티를 동적으로 추가하거나 수정할 수 있습니다.
person.email = "john@example.com"; // 프로퍼티 추가 person.age = 31; // 프로퍼티 수정- 프로퍼티 삭제:
delete연산자를 사용하여 객체의 프로퍼티를 삭제할 수 있습니다. delete person.age; // age 프로퍼티 삭제- 반복 (Iteration):
for...in루프를 사용하여 객체의 프로퍼티를 반복하고 접근할 수 있습니다. for (let key in person) { console.log(key + ": " + person[key]); }
JavaScript의 객체는 매우 다용도로 사용되며, 웹 개발에서 DOM 조작, 데이터 관리, AJAX 호출, 브라우저 이벤트 처리 등 다양한 작업에 활용됩니다. 객체는 자바스크립트에서 핵심적인 개념 중 하나이며, 객체지향 프로그래밍(OOP)의 기본을 이룹니다.
getter와 setter 함수
JavaScript에서는 객체의 속성을 가져오거나 설정하기 위해 getter와 setter 함수를 사용할 수 있습니다. 이러한 함수는 객체의 속성을 읽고 쓸 때 추가 로직을 수행하거나 속성을 보호하고 검증할 때 유용합니다.
1. Getter 함수:
Getter 함수는 객체 속성을 가져올 때 호출되는 함수로, 일반적인 속성 접근처럼 사용됩니다. Getter 함수는 속성 이름 앞에 get 키워드를 사용하여 정의합니다. Getter 함수는 항상 어떤 값을 반환해야 합니다.
const person = {
firstName: "John",
lastName: "Doe",
get fullName() {
return this.firstName + " " + this.lastName;
}
};
console.log(person.fullName); // "John Doe"위의 예제에서 fullName은 getter 함수로 정의되었으며, 이를 호출할 때는 마치 속성처럼 사용할 수 있습니다.
2. Setter 함수:
Setter 함수는 객체 속성에 값을 할당할 때 호출되는 함수로, 할당 연산자(=)를 사용하여 값을 설정할 때 사용됩니다. Setter 함수는 속성 이름 앞에 set 키워드를 사용하여 정의합니다. Setter 함수는 하나의 매개변수를 받아야 합니다.
const person = {
firstName: "John",
lastName: "Doe",
set fullName(value) {
const parts = value.split(" ");
this.firstName = parts[0];
this.lastName = parts[1];
}
};
person.fullName = "Alice Johnson"; // setter 함수 호출
console.log(person.firstName); // "Alice"
console.log(person.lastName); // "Johnson"위의 예제에서 fullName은 setter 함수로 정의되었으며, 값을 할당할 때 person.fullName = "Alice Johnson"와 같이 사용됩니다. Setter 함수는 전달된 값을 처리하고 객체의 속성을 설정합니다.
Getter와 setter 함수를 사용하면 속성에 접근할 때 추가 동작을 수행하거나 속성을 보호하고 유효성을 검사할 수 있습니다. 이를 통해 코드의 안전성과 가독성을 향상시킬 수 있습니다. ES6 이후의 자바스크립트에서 getter와 setter 함수는 클래스(class)와 함께 객체 지향 프로그래밍(OOP)의 일부로 자주 사용됩니다.
댓글