코딩 스쿨 JavaScript

▶ JavaScript References

JavaScript Objects

JavaScript HTML DOM Objects

JavaScript HTML DOM Objects

JavaScript Objects Reference: JavaScript 객체에 대한 주요 정보 및 메서드

• *JavaScript 객체(Object)**는 키-값 쌍으로 데이터를 저장하는 구조입니다. 객체는 다양한 속성과 메서드를 포함할 수 있으며, 복잡한 데이터 구조를 관리하는 데 유용합니다. 객체의 생성 방법, 속성 접근, 메서드, 객체와 관련된 유용한 기능을 이 참고 자료에서 확인할 수 있습니다.

---

1. JavaScript 객체 생성

객체를 생성하는 방법은 여러 가지가 있습니다. 가장 일반적인 방법은 객체 리터럴을 사용하는 것입니다.

객체 리터럴

let person = {
  name: "John",
  age: 30,
  city: "New York"
};

• name, age, city는 객체의 속성입니다.
• "John", 30, "New York"은 속성에 할당된 값입니다.

객체 생성자 (Object Constructor)

let person = new Object();
person.name = "John";
person.age = 30;
person.city = "New York";

객체 생성자 함수

function Person(name, age, city) {
  this.name = name;
  this.age = age;
  this.city = city;
}

let person1 = new Person("John", 30, "New York");
let person2 = new Person("Jane", 28, "Los Angeles");

---

2. 객체 속성 접근

객체의 속성에 접근하는 방법은 점 표기법과 대괄호 표기법이 있습니다.

점 표기법

console.log(person.name);  // 출력: John
console.log(person.age);   // 출력: 30

대괄호 표기법

console.log(person["name"]);  // 출력: John
console.log(person["age"]);   // 출력: 30

• 대괄호 표기법은 동적 속성 접근이 필요할 때 유용합니다.

let key = "city";
console.log(person[key]);  // 출력: New York

---

3. 객체 메서드

객체는 메서드를 포함할 수 있습니다. 메서드는 객체 속성에 할당된 함수입니다.

객체에 메서드 추가

let person = {
  name: "John",
  greet: function() {
    return "Hello, " + this.name;
  }
};

console.log(person.greet());  // 출력: Hello, John

this 키워드는 객체의 속성에 접근할 때 사용됩니다. this.name은 객체 내부의 name 속성을 참조합니다.

메서드 축약 표현 (ES6)

let person = {
  name: "John",
  greet() {
    return "Hello, " + this.name;
  }
};

---

4. 객체 속성 추가 및 삭제

속성 추가

person.job = "Developer";
console.log(person.job);  // 출력: Developer

속성 삭제

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

---

5. 객체 순회

객체의 속성을 for...in 반복문을 사용하여 순회할 수 있습니다.

let person = {
  name: "John",
  age: 30,
  city: "New York"
};

for (let key in person) {
  console.log(key + ": " + person[key]);
}
// 출력:
// name: John
// age: 30
// city: New York

---

6. 객체 내장 메서드

6.1. Object.keys()

객체의 속성 이름을 배열로 반환합니다.

let person = { name: "John", age: 30, city: "New York" };
let keys = Object.keys(person);
console.log(keys);  // 출력: ["name", "age", "city"]

6.2. Object.values()

객체의 속성 값을 배열로 반환합니다.

let values = Object.values(person);
console.log(values);  // 출력: ["John", 30, "New York"]

6.3. Object.entries()

객체의 속성 이름과 값을 배열 형태로 반환합니다.

let entries = Object.entries(person);
console.log(entries);  // 출력: [["name", "John"], ["age", 30], ["city", "New York"]]

6.4. Object.assign()

하나 이상의 객체를 합치는 메서드입니다.

let additionalInfo = { job: "Developer", country: "USA" };
let updatedPerson = Object.assign(person, additionalInfo);
console.log(updatedPerson);
// 출력: { name: "John", age: 30, city: "New York", job: "Developer", country: "USA" }

6.5. Object.freeze()

객체를 변경 불가능하게 만듭니다.

let person = { name: "John", age: 30 };
Object.freeze(person);
person.age = 40;  // 변경되지 않음
console.log(person.age);  // 출력: 30

6.6. Object.seal()

객체의 기존 속성 값은 변경 가능하지만 새 속성 추가나 삭제는 불가능하게 만듭니다.

let person = { name: "John", age: 30 };
Object.seal(person);
person.age = 40;  // 변경 가능
delete person.name;  // 삭제 불가
console.log(person);  // 출력: { name: "John", age: 40 }

---

7. 프로토타입과 상속

모든 JavaScript 객체는 다른 객체로부터 상속을 받는 프로토타입 체인을 가지고 있습니다.

프로토타입을 통한 메서드 상속

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.greet = function() {
  return "Hello, " + this.name;
};

let john = new Person("John", 30);
console.log(john.greet());  // 출력: Hello, John

Object.create()로 상속

let personPrototype = {
  greet() {
    console.log("Hello, " + this.name);
  }
};

let person = Object.create(personPrototype);
person.name = "John";
person.greet();  // 출력: Hello, John

---

8. 객체와 클래스 (ES6)

클래스는 JavaScript에서 객체를 생성하기 위한 청사진입니다. ES6 이후로 객체를 생성하는 더 간결한 방법을 제공합니다.

클래스 선언

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    return "Hello, " + this.name;
  }
}

let john = new Person("John", 30);
console.log(john.greet());  // 출력: Hello, John

클래스 상속

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(this.name + " makes a sound.");
  }
}

class Dog extends Animal {
  speak() {
    console.log(this.name + " barks.");
  }
}

let dog = new Dog("Rex");
dog.speak();  // 출력: Rex barks.

---

9. 객체 복사

객체를 복사하는 방법에는 여러 가지가 있습니다.

얕은 복사 (Shallow Copy)

let person = { name: "John", age: 30 };
let copyPerson = Object.assign({}, person);
console.log(copyPerson);  // 출력: { name: "John", age: 30 }

깊은 복사 (Deep Copy)

let person = { name: "John", details: { age: 30, city: "New York" } };
let deepCopyPerson = JSON.parse(JSON.stringify(person));
console.log(deepCopyPerson);  // 출력: { name: "John", details: { age: 30, city: "New York" } }

---

요약

이 JavaScript Objects Reference는 객체의 생성, 속성 접근, 메서드, 객체의 순회 및 내장 메서드, 프로토타입과 상속, 클래스에 대한 정보를 다룹니다. 객체는 JavaScript에서 매우 중요한 개념이므로, 이를 이해하고 활용하는 방법을 익히면 더 복잡하고 실용적인 애플리케이션을 개발할 수 있습니다.