[JavaScript]- 객체 기초 개념

[ 객체 정의 ]

객체는 배열과 마찬가지로 다량의 데이터를 한 번에 다룰 수 있는 참조자료형 데이터이며, 0개 이상의 프로퍼티의 조합으로 이루어져 있습니다. 또한 프로퍼티는 키와 값의 조합으로 이루어져 있습니다.

 

예시) 

let person = { 
        name: "객체", 
    }
    //key: ( name  ) value: (  "객체"  ) 
    //프로퍼티(속성) => 키 + 값

 

[ 객체와 배열의 비교 ]

배열이 데이터의 순서정보(index)를 가지고 있는 자료형이었다면, 객체는 데이터에 이름(key)을 부여할 수 있는 것이 특징인 자료형입니다. key를 이용해 데이터에 의미를 부여할 수 있고, key를 사용해 데이터에 접근할 수 있습니다.

 

1. JavaScript에서 사용할 수 있는 모든 타입의 값은 프로퍼티가 될 수 있습니다.

let myCatDoi = {
        이름: "도이", // 문자열
        개월: 11, // 숫자
        중성화: true, // boolean
        보유장난감: ["오뎅꼬치", "스프링", "낚싯대", "터널"], // 배열
        집사 : {
            name: "운도쌤",
            company: "codestates"
        }, // 객체
        손: function() {
            return `${this.개월}개월 된 고양이 ${this.이름}가 손을 내민다.`;
        }, // 함수(메서드)
        그루밍: function() {
            return `${this.이름}는 마음을 안정시키기 위해 그루밍을 시작합니다.`
        }
    }

위 코드에서 볼 수 있는 것처럼 문자열과 숫자, boolean, 배열이나 또 다른 객체, 함수까지도 모두 프로퍼티가 될 수 있습니다.

 

2.  프로퍼티 참조하기(read)

프로퍼티를 참조하는 법은 2가지가 있습니다.

1) dot notation: 객체이름.key값

2) bracket notation: 객체이름["key값"]

let myCatDoi = {
        이름: "도이"
}
    	console.log(myCatDoi.이름)
    	// 1) dot notation
            
            console.log(myCatDoi["이름"])
            // 2) bracket notation 사용시 반드시 문자열을 입력해야 합니다.
            let 이름 = "이름";
            console.log(myCatDoi[이름])
            // 단, 문자열이 할당된 변수를 입력하는 것은 가능합니다.

3. 프로퍼티 추가, 삭제, 수정, 유무 확인하기

let myCatDoi = {
        이름: "도이"
}

myCatDoi.성별 = "남";
// 프로퍼티 추가

myCatDoi.성별 = "여";
//프로퍼티 수정

delete myCatDoi.성별
//프로퍼티 삭제

console.log("이름" in myCadtDoi) -> true 출력
console.log("성별" in myCatDoi) -> false 출력

4. 객체 메서드 

• Object.keys() -> key를 모아서 배열로 만들어줍니다.
• Object.values() -> value(값)을 모아서 배열로 만들어줍니다.
• Object.assign() -> 객체 합치기, 객체 복사에 사용합니다.
• Object.is(obj1, obj2) -> 두 객체가 같은지 비교합니다.
• for in 반복문 

let obj = {
    key1: "value1",
    key2: "value2",
    key3: "value3",
    key4: "value4",
    key5: "value5"
}
console.log(Object.keys(obj));
출력 -> // [ 'key1', 'key2', 'key3', 'key4', 'key5' ]

 

- Object.keys() 사용 예시

let obj = {
    key1: "value1",
    key2: "value2",
    key3: "value3",
    key4: "value4",
    key5: "value5"
}
console.log(Object.values(obj));
출력 -> // [ 'value1', 'value2', 'value3', 'value4', 'value5' ]

- Object.values() 사용 예시

let user = { 
name: 'kimcoding',
job: 'student'
};

let info = {
job: 'engineer', age: 25
};

let userInfo = Object.assign(user, info);

console.log(userInfo);
   
출력 -> // { name: 'kimcoding', job: 'engineer', age: 25 }

 

 let userInfoAssign = Object.assign({}, userInfo);
 
 console.log(userInfoAssign);
 출력 -> // { name: 'kimcoding', job: 'engineer', age: 25 }
 	// arr.slice()처럼 복사하기 위한 용도로 사용할 수 있습니다.

- Object.assign() 사용 예시

console.log(Object.is(userInfo, userInfoAssign));
출력 -> false // 두 객체를 구성하는 키와 값이 완전히 동일하지만, 주소값이 다르기 때문에 결과는 false이다.//

console.log(Object.is({}, {});
출력 -> false // 마찬가지로 빈 객체를 비교해보아도 false가 나온다.//

- Object.is() 사용 예시