JavaScript - 객체 프로퍼티

안녕하세요, 미래의 JavaScript 마법사 여러분! 오늘 우리는 JavaScript 객체 프로퍼티의 마법의 세계로 들어가 볼 것입니다. 여러분의 친절한 이웃 컴퓨터 과학 교사로서, 저는 이 흥미로운 여정을 안내해 드리겠습니다. 그러니 가상의魔杖(키보드)을 손에 들고, 코드의 마법을 부르러 가 볼까요!

JavaScript 객체 프로퍼티

JavaScript의 객체는 보물상자 같은 존재입니다 - 프로퍼티라는 형태로 중요한 정보를 담고 있습니다. 각 프로퍼티는 키-값 쌍으로 이루어져 있으며, 키는 레이블처럼 되어 있고, 값은 그 자체로 보물입니다. 우리의 첫 번째 객체를 만들어 보겠습니다:

let wizard = {
name: "Harry",
age: 17,
house: "Gryffindor"
};

여기서 우리는 wizard 객체를 생성했고, 세 개의 프로퍼티를 가지고 있습니다: name, age, 그리고 house. 각 프로퍼티는 키(예: "name")와 값(예: "Harry")을 가지고 있습니다.

객체 프로퍼티 접근

이제 우리의 wizard 객체가 있다면, 어떻게 프로퍼티에 접근할까요? 두 가지 방법이 있습니다:

1. 점 표기법(Dot Notation)
2. 괄호 표기법(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의 모든 프로퍼티는 그 행동을 정의하는 특정 속성을 가지고 있습니다. 이 속성들은 프로퍼티의 성격 특징과 같습니다. 다음을 만나보겠습니다:

1. value: 프로퍼티의 값(명백하게!)
2. writable: 프로퍼티의 값을 변경할 수 있습니까?
3. enumerable: 이 프로퍼티가 객체의 프로퍼티를 열거할 때 나타날 것인가요?
4. 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