본문 바로가기

[JS] 객체 - 개념 정리

[JS] 객체 - 개념 정리

//! 1. 객체는 배열과 마찬가지로 다량의 데이터를 한 번에 다룰 수 있는 참조자료형 데이터
    // 0개 이상의 프로퍼티의 조합으로 되어 있다.
    // 프로퍼티는 키와 값의 조합으로 이루어져 있다.
    let person = { 
        name: "James", 
    } 
    //? key: ( name  ) value: (  "James"  ) 
    // 프로퍼티(속성) => 키 + 값

//! 2. 배열과 객체 비교: 배열이 데이터의 순서정보(index)를 가지고 있는 자료형이었다면, 
//!     객체는 데이터에 이름(key)을 부여할 수 있다.
    let personObj = { name:"James", position: "ESE", age:"??", phone: "010-2345-4567" }
    let personArr = ["James", "ESE", "???", "010-2345-4567"]
    console.log(personObj.name)
    //? (key)를 통해 데이터에 의미를 부여할 수 있고, (key)를 사용하여 데이터에 접근할 수 있다.

//! 3. JavaScript에서 사용 가능한 모든 타입의 값은 프로퍼티가 될 수 있다.
    let myCatNabi = {
        이름: "Nabi", // 문자열
        개월: 10, // 숫자
        중성화: true, // boolean
        보유장난감: ["오뎅꼬치", "스프링", "낚싯대", "터널"], // 배열
        집사 : {
            name: "James",
            company: "somewhere"
        }, // 객체
        손: function() {
            return `${this.개월}개월 된 고양이 ${this.이름}가 손을 내민다.`;
        }, // 함수(메서드)
        그루밍: function() {
            return `${this.이름}는 마음을 안정시키기 위해 그루밍을 시작합니다.`
        }
    }
    // 프로퍼티: 객체의 상태를 나타내는 값(data)
    // 메서드: 프로퍼티를 참조하고 조작할 수 있는 동작 => 객체 내부의 함수

  // this는 myCatNabi라는 객체를 가리킨다.

//! 4. 객체 다루기
    // 1) 프로퍼티를 참조(Read)하는 방법에는 두 가지가 있다.
        //? (1) (   ) notation
            console.log(myCatNabi.이름)
        //? (2) (      ) notation
            console.log(myCatNabi["이름"])
            // bracket notation 사용시 반드시 문자열을 입력해야 한다.
            console.log(myCatDoi[이름])
            // 단, 문자열이 할당된 변수를 입력하는 것은 가능하다.
            let 이름 = "이름";
            console.log(myCatDoi[이름]);

    // 2) 프로퍼티 추가(Create)
        myCatNabi.성별 = "남";
        // myCatNabi["성별"] = "남";
        console.log(myCatNabi);
        // 빈 객체에 추가하면? (15번 문제처럼)
        let newObj = {};
        newCat['이름'] = myCatDoi['이름']
        console.log(newCat);

    // 3) 프로퍼티 제거
        delete myNabi.성별
        console.log(myCatNabi);

    // 4) 프로퍼티 수정(Update)
        myCatNabi.개월 = 10;
        console.log(myCatNabi);

    // 5) 프로퍼티 유무 확인
        console.log('개월' in myCatNabi)
        console.log('생일' in myCatNabi)


// 5. 객체 내부에 값으로 들어 있는 배열과 객체, 함수도 똑같은 방법으로 접근 가능하다.
    myCatNabi.장난감.push('마따다비');
    myCatNabi.집사['phone'] = '010-1212-3434';
    myCatNabi.손();

// 6. 객체 메서드
    // 1) Object.keys() -> key를 모아서 배열로
    console.log(Object.keys(myCatDoi))

    // 2) Object.values() -> value(값)을 모아서 배열로
    console.log(Object.values(myCatDoi))
    
    // 3) Object.assign() -> 객체 합치기, 객체 복사
    let user = {name: 'kimcoding', job: 'student'};
    let info = {job: 'engineer', age: 25};
    let userInfo = Object.assign(user, info);
    console.log(userInfo);
    // arr.slice()와 동일한 기능으로 사용할 수도 있다.
    let myCatKkanbam = Object.assign({}, myCatDoi); 
    myCatKkanbam['이름'] = 'Bina';
    myCatKkanbam.개월 = 3;
    myCatKkanbam.중성화 = false;
    console.log(myCatNabi);
    console.log(myCatBina);

    // 4) Object.is(obj1, obj2) -> 두 객체가 같은지 비교
    console.log(Object.is(myCatNabi, myCatBina));
    console.log(Object.is({}, {}));


// 7. for in 반복문
for (let property in myCatNabi) {
    if (typeof myCatNabi[property] === 'object') {
        delete myCatNabi[property]
    }
}

728x90
⬆︎