객체

 

1. 객체 기본

  객체는 사전적인 정의로 실제 존재하는 것을 의미함

    1) 객체 생성: {}중괄호나 객체 생성자로 생성

        const obj = {};

        const obj = new Object();

 

    2) 객체 구조

        사람 = {

        key: value}

        // 이 때 중괄호 안에 들어가는 key: value를 프로퍼티(property)라고 함

 

    3) 객체 접근

        점 표기범 :  obj.key

        대괄호 표기법 : obj[key]

 

        사람. 성별

        사람. 말하다() 

 

2. 객체 응용

    1) 객체 관련 함수

• 삭제 : delete obj.name;
• 프로퍼티 유무 : property1 in obj
• 반복 : for (변수 in obj) { // 변수를 이용한 코드 }
• 옵셔널 체이닝 : obj?.property?.subProperty

• 구조 분해 할당: const { property } = obj;

 

const person = {
	name: '아무개', // 프로퍼티
  something: '',
  talk: (sentence) => { // 메서드
    console.log(sentence);
  }
};

person.talk(`제 이름은 ${person.name}입니다.`); // 점표기법으로 접근

person.name = '우희은';
person.talk(`제 이름은 ${person.name}입니다.`);

console.log('something' in person); // 프로퍼티 존재 유무 확인 //true
person.something = undefined; 
console.log(person); // 프로퍼티가 삭제되진 않음
delete person.something; // 프로퍼티 삭제

for (let key in person) { // 반복
  console.log(key);
}

// console.log(person.address.city); // TypeError: Cannot read properties of undefined Error
console.log(person.address?.city); // undefined -> 옵셔널 체이닝

const { address } = person; // 구조 분해 할당
console.log('address', address);

 

     2)  객체 참조

    객체는 주소 값으로 표현된다.

    Object.assign(빈 객체, 복사 대상 객체)를 이용하면 값 복사가 가능하다.

const person = {
  name: '아무개', // 프로퍼티
  something: '',
  talk: (sentence) => { // 메서드
    console.log(sentence);
  },
  obj: {
    changed: false,
  }
};

const person2 = person;
person2.name = '이유정';
person.talk(`제 이름은 ${person.name}입니다.`); // person도 변경됨 //제 이름은 이유정입니다.

const person3 = Object.assign({}, person); // 값 복사
person3.name = '오유진';
person.talk(`제 이름은 ${person.name}입니다.`); // person 변경 안됨 // 제 이름은 이유정입니다.

person3.obj.changed = true;
console.log(person.obj.changed); // 내부의 obj 프로퍼티는 주소 참조 중 //true

주소 값을 복사하는 Shallow copy와 실제 값을 새로운 메모리 공간에 복사하는 Deep copy가 있음
Shallow copy는 참조하고 있는 실제 값은 같으나, Deep copy는 실제 값이 다

const obj = {
  a: 1,
  b: {
    c: 2,
    d: 3,
  }
};

const obj2 = Object.assign({}, obj); //shallow copy
obj2.b.c = 0;
console.log(obj); // 0으로 바뀌어있음 //{ a: 1, b: { c: 0, d: 3 } }

const deepCopy = (origin) => {
  const result = {};
  for (let key in origin) {
    if (origin[key] != null && typeof origin[key] === "object") {
      result[key] = deepCopy(origin[key]);
    } else {
      result[key] = origin[key];
    }
  }
  return result;
}

const obj3 = deepCopy(obj);
obj3.b.c = -1;
console.log(obj); //{ a: 1, b: { c: 0, d: 3 } }
console.log(obj3); //{ a: 1, b: { c: -1, d: 3 } }

 

    3) this, 생성자 함수

• 객체의 메서드 실행 시, this는 메서드를 호출한 객체

        const obj = {

          value: 1,

          func: () => {

            console.log(this.value);

          }

        };

 

        obj.func();

 

• new 키워드로 생성자 함수 호출 시 this가 만들어지고 반환됨

        function Obj(value) {

          // this = {};

          this.value = value;

          this.func = function(){

            console.log(this.value);

          }

          // return this;

        }

 

        const obj = new Object(1);

        obj.func();

const products = {
  date: new Date('2022-07-16T00:00:00'),
  names: ["가지", "오이", "파프리카", "당근"],
  buyAll: function () {
    // this -> products
    const buy = (name) => { //화살표함수
      console.log(`${this.date.toLocaleString()}에 ${name}을 구매합니다.`);
    }
    const buy2 = function (name) {//함수 표현식 기본
      console.log(`${this.date.toLocaleString()}에 ${name}을 구매합니다.`);
    }.bind(this); //this 주입

    this.names.forEach((name) => {
      buy(name); // no Error -> this가 원래 없음 -> 상위 this인 products 할당
      buy2(name); // Error -> 호출한 객체가 없음 -> this에 전역 객체 할당
    })
  }
};

products.buyAll();