JavaScript - ES5 객체 메서드
안녕하세요, 미래의 JavaScript 마법사 여러분! 오늘 우리는 ES5 객체 메서드의 마법의 세상으로 뛰어들어 보겠습니다. 프로그래밍에 새로운 사람이라고 걱정하지 마세요 - 이 모험을 통해 친절한 안내자로써 여러분을 안내하고, 단계별로 설명해 드릴게요. 이 튜토리얼의 끝을 맺을 때, 여러분은 프로처럼 객체를 조작할 수 있을 것입니다!
JavaScript ES5 객체 메서드
시작하기 전에, JavaScript에서 객체가 무엇인지 간단히 되짚어보겠습니다. 객체는 관련된 정보를 담는 컨테이너라고 생각하면 됩니다. 예를 들어, "car" 객체는 색상, 브랜드, 연식과 같은 속성을 포함할 수 있습니다.
let car = {
color: "red",
brand: "Toyota",
year: 2020
};이제 ES5는 이러한 객체와 작업할 수 있는 몇 가지 강력한 메서드를 도입했습니다. 하나씩 탐구해 보겠습니다!
JavaScript Object.create() 메서드
Object.create() 메서드는 기존 객체를 프로토타입으로 사용하여 새로운 객체를 생성할 수 있습니다. 마치 "JavaScript, 이 다른 객체에서 상속받는 새로운 객체를 만들어 줘!"라고 말하는 것과 같습니다.
let animal = {
makeSound: function() {
console.log("어떤 일반적인 동물 소리");
}
};
let dog = Object.create(animal);
dog.makeSound(); // 출력: 어떤 일반적인 동물 소리
dog.bark = function() {
console.log("Woof woof!");
};
dog.bark(); // 출력: Woof woof!이 예제에서, 우리는 animal 객체에서 상속받은 dog 객체를 생성했습니다. dog는 animal의 makeSound 메서드를 사용할 수 있으며, 자신만의 bark 메서드도 가지고 있습니다.
JavaScript Object.defineProperty() 메서드
Object.defineProperty()는 객체의 속성을 추가하거나 수정할 수 있습니다. 마치 구매한 후 차에 새로운 기능을 추가할 수 있는 것과 같습니다!
let person = {};
Object.defineProperty(person, "name", {
value: "John",
writable: false,
enumerable: true,
configurable: true
});
console.log(person.name); // 출력: John
person.name = "Jane"; // 이 부분은 이름을 변경하지 않습니다
console.log(person.name); // 출력: John여기서 우리는 person 객체에 name 속성을 추가했습니다. 이를 비쓰기로 설정하여 값을 변경할 수 없게 했습니다.
JavaScript Object.defineProperties() 메서드
Object.defineProperties()는 defineProperty()와 비슷하지만, 더 강력합니다! 여러 속성을 동시에 정의할 수 있습니다.
let book = {};
Object.defineProperties(book, {
title: {
value: "대위의 귀족",
writable: true
},
author: {
value: "F. Scott Fitzgerald",
writable: false
}
});
console.log(book.title); // 출력: 대위의 귀족
console.log(book.author); // 출력: F. Scott Fitzgerald
book.title = "Gatsby"; // 이 부분은 작동합니다
book.author = "Scott"; // 이 부분은 작동하지 않습니다
console.log(book.title); // 출력: Gatsby
console.log(book.author); // 출력: F. Scott Fitzgerald이 예제에서 우리는 book 객체에 두 개의 속성을 동시에 정의했습니다. title은 쓰기 가능하지만, author는 아닙니다.
JavaScript Object.getOwnPropertyDescriptor() 메서드
이 메서드는 속성의 설명을 가져올 수 있습니다. 마치 차의 특정 기능의 스펙을 요청하는 것과 같습니다.
let car = {
brand: "Toyota"
};
let descriptor = Object.getOwnPropertyDescriptor(car, "brand");
console.log(descriptor);
// 출력:
// {
// value: "Toyota",
// writable: true,
// enumerable: true,
// configurable: true
// }여기서 우리는 car 객체의 brand 속성의 설명을 가져왔습니다. 이는 값을 비롯한 속성이 쓰기 가능한지, 열거 가능한지, 구성 가능한지 여부를 알려줍니다.
JavaScript Object.getOwnPropertyNames() 메서드
이 메서드는 주어진 객체에서 발견된 모든 속성(열거 가능한 것과 그렇지 않은 것 모두)을 반환합니다. 마치 차의 모든 기능, 심지어 숨겨진 것들까지 목록을 얻는 것과 같습니다!
let person = {
name: "John",
age: 30
};
Object.defineProperty(person, "ssn", {
value: "123-45-6789",
enumerable: false
});
console.log(Object.getOwnPropertyNames(person));
// 출력: ["name", "age", "ssn"]ssn을 비열거 가능으로 설정했지만, getOwnPropertyNames()은 여전히 목록에 포함시킵니다.
JavaScript Object.getPrototypeOf() 메서드
이 메서드는 지정된 객체의 프로토타입을 반환합니다. 마치 "네 부모는 누구야?"라고 묻는 것과 같습니다.
let animal = {
eats: true
};
let rabbit = Object.create(animal);
console.log(Object.getPrototypeOf(rabbit) === animal); // 출력: true여기서 우리는 rabbit의 프로토타입이 animal 객체인지 확인했습니다.
JavaScript Object.keys() 메서드
Object.keys()는 주어진 객체의 자신의 열거 가능한 속성 이름을 배열로 반환합니다. 마치 차의 모든 보이는 기능 목록을 얻는 것과 같습니다.
let car = {
brand: "Toyota",
model: "Corolla",
year: 2020
};
console.log(Object.keys(car));
// 출력: ["brand", "model", "year"]이 메서드는 열거 가능한 속성만 반환하며, getOwnPropertyNames()과 달리 모든 속성을 반환하지 않습니다.
JavaScript Object.freeze() 메서드
Object.freeze()는 객체를 동결합니다. 동결된 객체는 더 이상 변경될 수 없습니다. 마치 차를 얼음 블록에 넣어서 추가, 제거, 수정할 수 없게 하는 것과 같습니다!
let car = {
brand: "Toyota",
model: "Corolla"
};
Object.freeze(car);
car.year = 2020; // 이 부분은 작동하지 않습니다
car.brand = "Honda"; // 이 부분도 작동하지 않습니다
console.log(car); // 출력: { brand: "Toyota", model: "Corolla" }동결된 car 객체는 더 이상 year 속성을 추가하거나 brand 속성을 변경할 수 없습니다.
JavaScript Object.seal() 메서드
Object.seal()은 객체를封闭합니다. 새로운 속성을 추가하는 것을 방지하고, 모든 기존 속성을 비구성 가능으로 표시합니다. 마치 차를封闭하고 새로운 기능을 추가할 수 없게 하지만, 기존 기능을 수정할 수는 있게 하는 것과 같습니다.
let person = {
name: "John",
age: 30
};
Object.seal(person);
person.gender = "Male"; // 이 부분은 작동하지 않습니다
person.age = 31; // 이 부분은 작동합니다
delete person.name; // 이 부분은 작동하지 않습니다
console.log(person); // 출력: { name: "John", age: 31 }person 객체를封闭했지만, age를 변경할 수는 있습니다. 하지만 name을 삭제하거나 gender를 추가할 수는 없습니다.
JavaScript Object.isFrozen() 메서드
이 메서드는 객체가 동결되었는지 여부를 결정합니다. 마치 차가 얼음 블록에 갇혀 있는지 확인하는 것과 같습니다!
let car = {
brand: "Toyota"
};
console.log(Object.isFrozen(car)); // 출력: false
Object.freeze(car);
console.log(Object.isFrozen(car)); // 출력: trueJavaScript Object.isSealed() 메서드
isFrozen()과 비슷하게, 이 메서드는 객체가封闭되었는지 여부를 확인합니다.
let person = {
name: "John"
};
console.log(Object.isSealed(person)); // 출력: false
Object.seal(person);
console.log(Object.isSealed(person)); // 출력: trueJavaScript Object.preventExtensions() 메서드
이 메서드는 새로운 속성을 추가하는 것을 방지합니다. 마치 차에 " 더 이상 기능을 추가할 수 없다"는 표지를 달아둔 것과 같습니다.
let car = {
brand: "Toyota"
};
Object.preventExtensions(car);
car.model = "Corolla"; // 이 부분은 작동하지 않습니다
console.log(car); // 출력: { brand: "Toyota" }확장 방지 후, car 객체에 model 속성을 추가할 수 없습니다.
JavaScript Object.isExtensible() 메서드
이 메서드는 객체가 확장 가능한지 여부를 결정합니다. 마치 차가 새로운 기능을 추가할 수 있는지 확인하는 것과 같습니다.
let car = {
brand: "Toyota"
};
console.log(Object.isExtensible(car)); // 출력: true
Object.preventExtensions(car);
console.log(Object.isExtensible(car)); // 출력: false이제 우리가 다루었던 모든 메서드의 요약입니다:
| 메서드 | 설명 |
|---|---|
| Object.create() | 새로운 객체를 생성하고, 지정된 프로토타입과 속성을 사용합니다 |
| Object.defineProperty() | 객체에 이름이 지정된 속성을 추가하거나 수정합니다 |
| Object.defineProperties() | 객체에 여러 속성을 동시에 정의하거나 수정합니다 |
| Object.getOwnPropertyDescriptor() | 객체의 자신의 속성에 대한 설명을 반환합니다 |
| Object.getOwnPropertyNames() | 객체에서 발견된 모든 속성의 이름을 반환합니다 |
| Object.getPrototypeOf() | 지정된 객체의 프로토타입을 반환합니다 |
| Object.keys() | 객체의 자신의 열거 가능한 속성 이름을 배열로 반환합니다 |
| Object.freeze() | 객체를 동결하고, 속성을 변경할 수 없게 합니다 |
| Object.seal() | 객체를封闭하고, 새로운 속성을 추가할 수 없게 합니다 |
| Object.isFrozen() | 객체가 동결되었는지 여부를 확인합니다 |
| Object.isSealed() | 객체가封闭되었는지 여부를 확인합니다 |
| Object.preventExtensions() | 새로운 속성을 추가하는 것을 방지합니다 |
| Object.isExtensible() | 객체가 확장 가능한지 여부를 확인합니다 |
이제 ES5 객체 메서드에 대한 대단한 여행을 마친 것입니다. 연습이 완벽함을 기억하세요, 자신의 코드에서 이 메서드들을 실험해 보세요. 행복한 코딩, 미래의 JavaScript 마스터 여러분!
Credits: Image by storyset