#JavaScript Grammar_객체

# 객체(Object)란?

자바스크립트에서 중요한 데이터 구조로, key-value pair로 데이터를 저장하며, 한 변수에 다양한 종류의 값(데이터 타입)을 포함할 수 있음.

 

#Key-Value Pair

객체는 key-value pair을 통해 데이터를 구성함. 각 key는 해당하는 value에 대한 식별자 역할을 함. 이를 통해 데이터에 의미를 부여하고 관리함. 

 

#Value의 다양한 데이터 타입

객체의 key와 value에 할당할 수 있는 데이터 타입에는 제한이 없음. 문자열, 숫자, 불리언, 함수, 배열, 다른 객체 등 어떤 데이터 타입도 value로 사용할 수 있음. 

 

let person = {
    name: "John",          // 문자열
    age: 30,               // 숫자
    isStudent: false,      // 불리언
    greet: function() {    // 함수
        console.log("Hello!");
    },
    hobbies: ["reading", "music"], // 배열
    address: {             // 객체
        city: "New York",
        zipCode: "10001"
    }
};

 

---

 # 객체의 활용 

객체는 다양한 데이터를 구조화하고 관리하기 위해 사용됨. 예를 들어, 사용자 정보, 제품 정보, 설정, 데이터베이스 항목, HTML 문서 요소 등을 표현하는데 활용할 수 있음. 

// 사용자 정보
let user = {
    username: "johndoe",
    email: "john@example.com",
    isAdmin: false
};

// 제품 정보
let product = {
    name: "Smartphone",
    price: 499.99,
    inStock: true
};

// HTML 문서 요소
let element = {
    tag: "div",
    content: "Hello, World!",
    attributes: {
        class: "message",
        id: "greeting"
    }
};

 

 

---

# 객체 생성 

1)  기본적인 객체 생성 

객체를 생성하기 위해 중괄호 ({ })를 사용하며, 속성과 값을 콜론(:)으로 구분하고 각 쌍을 쉼표(,)로 구분함. 

let person = {
    name: "홍길동",
    age: 30,
    gender: "남자"
};

 

2) 생성자 함수를 사용한 객체 생성 

생성자 함수를 활용하여 객체를 생성할 수 있으며, 이를통해 여러 객체를 일괄적으로 생성할 수 있음.

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

let person1 = new Person("홍길동", 30, "남자");
let person2 = new Person("홍길순", 25, "여자");

 

 

---

# 객체 속성 접근

객체 내의 속성에 접근할 때는 점(.)을 사용하여 속성 이름을 입력함. 

let person = {
    name: "홍길동",
    age: 30,
    gender: "남자"
};

console.log(person.name); // "홍길동"
console.log(person.age); // 30
console.log(person.gender); // "남자"

 

---

# 객체 메소드 

1) Object.keys() 메소드 

Object.keys() 메소드를 사용하여 객체의 속성 이름을 배열로 반환할 수 있음. 

let person = {
    name: "홍길동",
    age: 30,
    gender: "남자"
};

let keys = Object.keys(person);
console.log(keys); // ["name", "age", "gender"]

 

2) Object.values() 메소드

Object.values() 메소드를 사용하여 객체의 속성 값들을 배열로 반환할 수 있음.  

let person = {
    name: "홍길동",
    age: 30,
    gender: "남자"
};

let values = Object.values(person);
console.log(values); // ["홍길동", 30, "남자"]

 

3) Object.entries() 메소드

Object.entries() 메소드를 사용하여 객체의 속성 이름과 속성 값들을 2차원 배열로 반환할 수 있음. 

let person = {
    name: "홍길동",
    age: 30,
    gender: "남자"
};

let entries = Object.entries(person);
console.log(entries); // ["name", "홍길동"],
                      // ["age", 30],
                      // ["gender", "남자"]

 

4) Object.assign() 메소드

Object.assign() 메소드를 사용하여 객체를 복사하고 새로운 객체를 만들 수 있음. 이를 통해 객체를 병합하거나 복사함. 

let person = {
    name: "홍길동",
    age: 30,
    gender: "남자"
};

let newPerson = Object.assign({}, person, { age: 35 });
console.log(newPerson); // {name: "홍길동", age: 35, gender:"남자"}

 

5) 객체 비교

일반적으로 객체를 === 연산자로 비교할 수 없지만, JSON.stringify() 함수를 사용하여 객체를 문자열로 변환한 후 비교할 수 있음. 

let person1 = {
    name: "홍길동",
    age: 30,
    gender: "남자"
};
let person2 = {
    name: "홍길동",
    age: 30,
    gender: "남자"
};

console.log(person1 === person2); // false
console.log(JSON.stringify(person1) === JSON.stringify(person2)); // true

 

6) 객체 병합 

객체를 병합할 때는 전개 연산자(...)를 사용할 수 있음. 

let person1 = {
    name: "홍길동",
    age: 30
};
let person2 = {
    gender: "남자"
};
let mergedPerson = { ...person1, ...person2 };
console.log(mergedPerson); // { name: "홍길동", age: 30, gender: "남자"}