JavaScript - 객체 프로퍼티
안녕하세요, 미래의 JavaScript 마법사 여러분! 오늘 우리는 JavaScript 객체 프로퍼티의 마법의 세계로 들어가 볼 것입니다. 여러분의 친절한 이웃 컴퓨터 과학 교사로서, 저는 이 흥미로운 여정을 안내해 드리겠습니다. 그러니 가상의魔杖(키보드)을 손에 들고, 코드의 마법을 부르러 가 볼까요!
JavaScript 객체 프로퍼티
JavaScript의 객체는 보물상자 같은 존재입니다 - 프로퍼티라는 형태로 중요한 정보를 담고 있습니다. 각 프로퍼티는 키-값 쌍으로 이루어져 있으며, 키는 레이블처럼 되어 있고, 값은 그 자체로 보물입니다. 우리의 첫 번째 객체를 만들어 보겠습니다:
let wizard = {
name: "Harry",
age: 17,
house: "Gryffindor"
};
여기서 우리는 wizard
객체를 생성했고, 세 개의 프로퍼티를 가지고 있습니다: name
, age
, 그리고 house
. 각 프로퍼티는 키(예: "name")와 값(예: "Harry")을 가지고 있습니다.
객체 프로퍼티 접근
이제 우리의 wizard
객체가 있다면, 어떻게 프로퍼티에 접근할까요? 두 가지 방법이 있습니다:
- 점 표기법(Dot Notation)
- 괄호 표기법(Bracket Notation)
두 가지 방법을 모두 시도해 보겠습니다:
// 점 표기법
console.log(wizard.name); // 출력: Harry
// 괄호 표기법
console.log(wizard["house"]); // 출력: Gryffindor
점 표기법은 더 간단하고 흔히 사용됩니다. 그러나 괄호 표기법은 프로퍼티 이름에 공백이나 특수 문자가 포함되거나, 변수를 사용하여 프로퍼티에 접근할 때 유용합니다.
let property = "age";
console.log(wizard[property]); // 출력: 17
내嵌 객체 프로퍼티 접근
때로는 객체가 다른 객체를 포함할 수 있습니다. 마법의 나신인형처럼입니다! wizard
객체를 확장해 보겠습니다:
let wizard = {
name: "Harry",
age: 17,
house: "Gryffindor",
wand: {
wood: "Holly",
core: "Phoenix feather",
length: 11
}
};
내嵌된 프로퍼티에 접근하려면 점 표기법이나 괄호 표기법을 연속적으로 사용합니다:
console.log(wizard.wand.wood); // 출력: Holly
console.log(wizard["wand"]["core"]); // 출력: Phoenix feather
객체 프로퍼티 추가 또는 업데이트
JavaScript의 객체는 변경가능하다는 점에서, 생성 후에도 변경할 수 있습니다. 우리의 마법사에게 새로운 능력을 부여해 보겠습니다:
// 새로운 프로퍼티 추가
wizard.skill = "Quidditch";
// 기존 프로퍼티 업데이트
wizard.age = 18;
console.log(wizard.skill); // 출력: Quidditch
console.log(wizard.age); // 출력: 18
객체 프로퍼티 삭제
때로는 프로퍼티를 사라지게 만들어야 합니다. 이를 위해 delete
연산자를 사용합니다:
delete wizard.house;
console.log(wizard.house); // 출력: undefined
푸uff! "house" 프로퍼티가 사라졌습니다. delete
를 사용하면 프로퍼티를 객체에서 제거하는 것입니다. 이는 해당 프로퍼티의 값을 가진 변수에 영향을 주지 않습니다.
객체 프로퍼티 열거
객체의 모든 프로퍼티를 보고 싶다면, for...in
루프를 사용할 수 있습니다:
for (let key in wizard) {
console.log(key + ": " + wizard[key]);
}
이는 wizard
객체의 모든 열거 가능한 프로퍼티를 출력합니다. 하지만 더 있습니다! Object.keys()
, Object.values()
, 또는 Object.entries()
를 사용하여 객체의 키, 값, 또는 둘 다를 배열로 얻을 수 있습니다:
console.log(Object.keys(wizard)); // 출력: ["name", "age", "wand", "skill"]
console.log(Object.values(wizard)); // 출력: ["Harry", 18, {wood: "Holly", core: "Phoenix feather", length: 11}, "Quidditch"]
console.log(Object.entries(wizard)); // 출력: [["name", "Harry"], ["age", 18], ["wand", {...}], ["skill", "Quidditch"]]
프로퍼티 속성
JavaScript의 모든 프로퍼티는 그 행동을 정의하는 특정 속성을 가지고 있습니다. 이 속성들은 프로퍼티의 성격 특징과 같습니다. 다음을 만나보겠습니다:
-
value
: 프로퍼티의 값(명백하게!) -
writable
: 프로퍼티의 값을 변경할 수 있습니까? -
enumerable
: 이 프로퍼티가 객체의 프로퍼티를 열거할 때 나타날 것인가요? -
configurable
: 이 프로퍼티를 삭제하거나 속성을 변경할 수 있습니까?
기본적으로, 우리가 정상적으로 만든 프로퍼티는 모두 true
로 설정됩니다. 하지만 Object.defineProperty()
를 사용하여 이를 변경할 수 있습니다:
Object.defineProperty(wizard, "name", {
writable: false,
enumerable: false
});
wizard.name = "Ron"; // 이 작업은 실행되지 않습니다
console.log(wizard.name); // 출력: Harry
for (let key in wizard) {
console.log(key); // "name"은 여기에 나타나지 않습니다
}
여기서 우리가 배운 프로퍼티 메서드를 요약한 표를 제공합니다:
메서드 | 설명 |
---|---|
object.property |
점 표기법을 사용하여 프로퍼티 접근 |
object["property"] |
괄호 표기법을 사용하여 프로퍼티 접근 |
object.property = value |
프로퍼티 추가 또는 업데이트 |
delete object.property |
프로퍼티 삭제 |
for...in |
객체 프로퍼티 열거 |
Object.keys(object) |
객체의 키 배열을 얻음 |
Object.values(object) |
객체의 값 배열을 얻음 |
Object.entries(object) |
객체의 [키, 값] 쌍 배열을 얻음 |
Object.defineProperty() |
새로운 프로퍼티 정의 또는 기존 프로퍼티 수정 |
이제 여러분은 JavaScript 객체 프로퍼티에 대한 기초 강의를 마친 것입니다. 연습이 완벽을 이루는 열쇠입니다. 이 개념들을 계속 실험해 나가면, 진정한 JavaScript 마법사가 될 것입니다!
Credits: Image by storyset