JavaScript로 객체 마스터하기

JavaScript의 객체

JavaScript에서 객체는 값이 데이터(속성) 또는 함수(메서드)일 수 있는 키-값 쌍의 모음입니다. 배열, 함수, 심지어 기타 객체까지 포함하여 JavaScript의 거의 모든 것이 객체이기 때문에 객체는 JavaScript의 기본입니다.

---

1. 객체 생성

아. 객체 리터럴

객체를 생성하는 가장 간단한 방법은 중괄호 {}를 사용하는 것입니다.

예:

const person = {
  name: "Alice",
  age: 25,
  greet: function () {
    console.log("Hello!");
  },
};

console.log(person.name); // Output: Alice
person.greet(); // Output: Hello!

베. 객체 생성자

객체 생성자를 사용하면 빈 객체가 생성됩니다.

예:

const person = new Object();
person.name = "Bob";
person.age = 30;
person.greet = function () {
  console.log("Hi!");
};

console.log(person.name); // Output: Bob
person.greet(); // Output: Hi!

ㄷ. Object.create() 사용

이 메소드는 지정된 프로토타입으로 새 객체를 생성합니다.

예:

const prototype = { greet: function () { console.log("Hello!"); } };
const person = Object.create(prototype);
person.name = "Charlie";
console.log(person.name); // Output: Charlie
person.greet(); // Output: Hello!

---

2. 개체 속성 액세스

아. 점 표기법

점(.)을 사용하여 속성에 액세스합니다.

예:

console.log(person.name); // Output: Alice

베. 괄호 표기

대괄호([])를 사용하여 속성에 액세스합니다. 동적 속성 이름에 유용합니다.

예:

console.log(person["name"]); // Output: Alice
const key = "age";
console.log(person[key]); // Output: 25

---

3. 속성 추가, 수정 및 삭제

• 추가:

person.country = "USA";
console.log(person.country); // Output: USA

• 수정:

person.age = 26;
console.log(person.age); // Output: 26

• 삭제:

delete person.age;
console.log(person.age); // Output: undefined

---

4. 객체의 메소드

함수가 객체의 속성인 경우 이를 메서드라고 합니다.

예:

const car = {
  brand: "Tesla",
  start: function () {
    console.log("Car started!");
  },
};

car.start(); // Output: Car started!

---

5. 객체 속성 반복

아. for...in에서 사용

객체의 열거 가능한 모든 속성을 반복합니다.

예:

for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

베. Object.keys() 사용

객체의 키 배열을 반환합니다.

예:

Object.keys(person).forEach((key) => {
  console.log(`${key}: ${person[key]}`);
});

ㄷ. Object.entries() 사용

[키, 값] 쌍의 배열을 반환합니다.

예:

Object.entries(person).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

---

6. 객체 메소드

JavaScript는 객체 작업을 위한 여러 내장 메서드를 제공합니다.

• Object.sign(): 한 개체의 속성을 다른 개체에 복사합니다.

const person = {
  name: "Alice",
  age: 25,
  greet: function () {
    console.log("Hello!");
  },
};

console.log(person.name); // Output: Alice
person.greet(); // Output: Hello!

• Object.freeze(): 객체 수정을 방지합니다.

const person = new Object();
person.name = "Bob";
person.age = 30;
person.greet = function () {
  console.log("Hi!");
};

console.log(person.name); // Output: Bob
person.greet(); // Output: Hi!

• Object.seal(): 속성 추가 또는 제거를 방지하지만 기존 속성 수정은 허용합니다.

const prototype = { greet: function () { console.log("Hello!"); } };
const person = Object.create(prototype);
person.name = "Charlie";
console.log(person.name); // Output: Charlie
person.greet(); // Output: Hello!

---

7. 프로토타입과 상속

JavaScript의 개체에는 속성과 메서드를 상속하는 또 다른 개체인 프로토타입이 있습니다.

예:

console.log(person.name); // Output: Alice

---

8. 객체 구조분해

구조 분해를 통해 객체의 속성을 변수로 추출할 수 있습니다.

예:

console.log(person["name"]); // Output: Alice
const key = "age";
console.log(person[key]); // Output: 25

---

9. 요약

• 객체는 속성과 메서드를 저장할 수 있는 키-값 쌍입니다.
• 간단한 객체 생성에는 객체 리터럴을 사용하세요.
• 점 또는 괄호 표기법을 사용하여 개체 속성에 액세스합니다.
• 효과적인 개체 조작을 위해 Object.keys(), Object.Assign() 및 Object.freeze()와 같은 내장 메서드를 사용하세요.
• 프로토타입 및 상속과 같은 고급 JavaScript 개념을 이해하려면 객체를 마스터하는 것이 중요합니다.

안녕하세요. 저는 Abhay Singh Kathayat입니다!
저는 프론트엔드와 백엔드 기술 모두에 대한 전문 지식을 갖춘 풀스택 개발자입니다. 저는 효율적이고 확장 가능하며 사용자 친화적인 애플리케이션을 구축하기 위해 다양한 프로그래밍 언어와 프레임워크를 사용하여 작업합니다.
내 비즈니스 이메일(kaashshorts28@gmail.com)로 언제든지 연락해주세요.

위 내용은 JavaScript로 객체 마스터하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!