[seciton1] 객체

정호·2023년 2월 28일
1

코드스테이츠

목록 보기
12/49
post-custom-banner

객체란?

자바스크립트는 객체 기반 언어이며 자바스크립트를 구성한는 거의 모든것이 객체이다. 원시타입은 단 하나의 값만 나타내지만, 객체 타입은 다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적 자료구조이다.

객체의 구성

0개이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 으로 구성된다.
프로퍼티의 값이 함수일 경우 메서드라고 부른다.

객체는 객체의 상태를 나타내는값(프로퍼티)과 프로퍼티를 참조하고 조작할 수 있는 동작(메서드)을 모두 포함할 수 있기 때문에 상태와 동작을 하나의 단위로 구조화 할 수 있어 유용하다.

let person = {
  name: "jungo",
}

key: name, value: "jungo"


객체 다루기

    let 정보 = {
        이름: "jungo", // 문자열
        나이: 11, // 숫자
        성별: true, // boolean
        과일: ["사과", "바나나", "파인애플", "토마토"], // 배열
        세부정보 : {
            name: "MJH",
        }, // 객체
        출력: function() {
            return `${this.이름}의 나이는 ${this.나이}이다.`;
        }, // 함수(메서드)
    }

프로퍼티 참조

  • Dot Notation
console.log(정보.이름)
  • Bracket Notation
 console.log(정보["이름"])

Bracket Notation사용시 반드시 문자열을 입력해야함

 console.log(정보[이름])

문자열이 할당된 변수를 입력하는 것은 가능

  let 이름 = "이름";
  console.log(정보[이름]);

프로퍼티 추가

정보.color = "blue";

빈 객체에 추가

  let newObj = {};
  newinfo['이름'] = info['이름']

프로퍼티 추가

 delete info.이름

프로퍼티 수정(Update)

 myCatDoi.개월 = 10;
 console.log(myCatDoi);

프로퍼티 유무 확인

 console.log('이름' in myCatDoi)
 console.log('나이' in myCatDoi)

객체 내부에 값으로 들어 있는 배열과 객체, 함수도 똑같은 방법으로 접근 가능

 myCatDoi.과일.push('오렌지');
 myCatDoi.세부정보['address'] = 'seoul';
 myCatDoi.출력();

객체 메서드

Object.keys() -> key를 모아서 배열로

console.log(Object.keys(info))

Object.values() -> value(값)을 모아서 배열로

console.log(Object.values(info))

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()와 동일한 기능으로 사용
```javascript
   let newinfo = Object.assign({}, info); 
   newinfo['이름'] = 'JSM';
   newinfo.age= 25;
   console.log(info);
   console.log(newinfo);

Object.is(obj1, obj2) -> 두 객체가 같은지 비교

  console.log(Object.is(info, newinfo));
  console.log(Object.is({}, {}));

객체에서 for in 반복문

for (let property in info) {
    if (typeof info[property] === 'object') {
        delete info[property]
    }
}
profile
열심히 기록할 예정🙃
post-custom-banner

0개의 댓글