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 target = { a: 1 };
const source = { b: 2 };
Object.assign(target, source);
console.log(target); // Output: { a: 1, b: 2 }

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

const obj = { a: 1 };
Object.freeze(obj);
obj.a = 2; // No effect
console.log(obj.a); // Output: 1

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

const obj = { a: 1 };
Object.seal(obj);
obj.b = 2; // No effect
obj.a = 3; // Works
console.log(obj); // Output: { a: 3 }

7. 프로토타입과 상속

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

예:

const animal = { eats: true };
const dog = Object.create(animal);
dog.barks = true;

console.log(dog.eats); // Output: true (inherited)
console.log(dog.barks); // Output: true

8. 객체 구조분해

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

예:

const person = { name: "Alice", age: 25 };
const { name, age } = person;
console.log(name); // Output: Alice
console.log(age); // Output: 25

9. 요약

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

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