Koans-08_Object

• 객체

  • 객체 길이 구하는 법 (length를 바로 쓰면 undefined가 나옵니다.)
    Object.keys(obj) -> 객체의 키의 값을 배열의 형태로 가져옵니다.
    ex) Object.keys(obj).length -> 배열의 길이를 구하면 됩니다.

  • 없는 key 값을 찾을때는 undefined

  let newObj = {weight: 3,
  length: 5,
  power: 7
  }
  console.log(newObj.speed)// undefined

  • 객체 안에 배열 검색하는 법

  let newObj = {
  weight: 3,
  length: 5,
  power: 7,
  item: [ 'sword', 'ring', 'neckless'],
  damage: {
  sword: 100,
  ring: 70,
  neckless: 40
   }
  }
  console.log(newObj.item[2])/"neckless

  • 이중객체 / 객체안에 객체 검색하는법

  let newObj = {
  weight: 3,
  length: 5,
  power: 7,
  item: [ 'sword', 'ring', 'neckless'],
  damage: {
  sword: 100,
  ring: 70,
  neckless: 40
   }
  }
  console.log(newObj.damage['ring'] or newObj.damage.ring)// 70

  • key 값이 존재하는지 확인하는 방법
    key값 문자열 or [key값 문자열] in obj변수

  'weight' in newObj; // true
  ['weight'] in newObj; // true

  • key의 값을 변경하는 법
    obj변수.key값 문자열 or [key값 문자열] = x

  newObj['weight'] = 10
  or
  newObj.weight = 10
  
  console.log(newObj)//
    let newObj = {
  weight: 10,
  length: 5,
  power: 7,
  item: [ 'sword', 'ring', 'neckless'],
  damage: {
  sword: 100,
  ring: 70,
  neckless: 40
   }
  }

  • 새로운 key를 추가하고 속성을 추가하는 법
    obj변수.새로운 key값 문자열 or [새로운 key값 문자열] = x
    key 값을 그냥 추가하면 abcd 문자열 순서대로 그 위치에 추가된다.

  newObj['speed'] = 100
  or
  newObj.speed = 100
  
  console.log(newObj)//
  damage: {sword: 100, ring: 70, neckless: 40}
  item: (3) ["sword", "ring", "neckless"]
  length: 5
  power: 7
  speed: 100
  weight 9

  • 기존의 키와 값을 삭제하는 방법
    delete obj변수.key값

  delete newObj.speed;
  console.log('speed' in newObj)// false

• this

  this에 대해서 알기 위해서는 우선 window객체와 method에 대해서 정의를 해야 합니다.

  method에 대해서 정의를 하자면, '어떤 객체의 속성으로 정의된 함수이다' 입니다.

  const megalomaniac = {
   mastermind: 'Joker',
   henchwoman: 'Harley',
   getMembers: function () {
     return [this.mastermind, this.henchwoman];
   },
   relations: ['Anarky', 'Duela Dent', 'Lucy'],
   twins: {
     'Jared Leto': 'Suicide Squad',
     'Joaquin Phoenix': 'Joker',
     'Heath Ledger': 'The Dark Knight',
     'Jack Nicholson': 'Tim Burton Batman',
   },
  };

  여기서 getMembers megalomaniac 객체의 속성으로 정의된 함수인 method라고 할수 있습니다.
  megalomaniac.getMembers()와 같은 형태로 호출할수 있습니다.
  따라서 호출될 때마다 어떠한 객체의 method일 텐데, 그 '어떠한 객체'를 묻는 것이 this입니다. 여기서 this는 megalomaniac이라고 할수 있습니다.

• this'는 method를 호출하는 시점에 결정됩니다
  (this가 어떻게 쓰였는지 확인해보자)

const currentYear = new Date().getFullYear();
const megalomaniac = {
  mastermind: 'James Wood',
  henchman: 'Adam West',
  birthYear: 1970,
  calculateAge: function (currentYear) {
     return currentYear - this.birthYear;
  },
  changeBirthYear: function (newYear) {
     this.birthYear = newYear;
  },
 };

    expect(currentYear).to.equal(2021);
    expect(megalomaniac.calculateAge(currentYear)).to.equal(51);

    megalomaniac.birthYear = 2000;
    expect(megalomaniac.calculateAge(currentYear)).to.equal(21);

    megalomaniac.changeBirthYear(2010);
    expect(megalomaniac.calculateAge(currentYear)).to.equal(11);

• repeat method
  문자열을 반복해서 나타내는 메서드
  String.prototype.repeat()

'abc'.repeat(-1);   // RangeError
'abc'.repeat(0);    // ''
'abc'.repeat(1);    // 'abc'
'abc'.repeat(2);    // 'abcabc'
'abc'.repeat(3.5);  // 'abcabcabc' (count will be converted to integer)
'abc'.repeat(1/0);  // RangeError

• 객체의 method를 정의하는 방법을 확인합니다

const megalomaniac = {
      mastermind: 'Brain',
      henchman: 'Pinky',
      getFusion: function () {
        return this.henchman + this.mastermind;
      },
      battleCry(numOfBrains) {
        return `They are ${this.henchman} and the` + ` ${this.mastermind}`.repeat(numOfBrains);
      },
    };

    expect(megalomaniac.getFusion()).to.deep.equal('PinkyBrain');
    expect(megalomaniac.battleCry(3)).to.deep.equal('They are Pinky and the Brain Brain Brain');
  });

• Object를 함수의 인자로 전달할 경우, reference가 전달됩니다.
  Object.assign에 대해서 알아보려면 클릭하세요.

const obj = {
      mastermind: 'Joker',
      henchwoman: 'Harley',
      relations: ['Anarky', 'Duela Dent', 'Lucy'],
      twins: {
        'Jared Leto': 'Suicide Squad',
        'Joaquin Phoenix': 'Joker',
        'Heath Ledger': 'The Dark Knight',
        'Jack Nicholson': 'Tim Burton Batman',
      },
    };

    function passedByReference(refObj) {
      refObj.henchwoman = 'Adam West';
    }
    // henchwoman key값을 바꿔주는 함수이다.
    
    passedByReference(obj);
    expect(obj.henchwoman).to.equal('Adam West');
    // obj의 henchwoman의 키의 값은 'Adam West'로 변경이 되었다.

    const assignedObj = obj; 
    // obj를 다른 변수에 할당하였다. 주소만 가져온것이다.
    assignedObj['relations'] = [1, 2, 3];
    // 주소값만 가져왔기 때문에 얕은 복사이다. 
  
    expect(obj['relations']).to.deep.equal([1, 2, 3]);
    //  값을 변경을 할 경우 obj의 값이 변경이 됩니다.

    const copiedObj = Object.assign({}, obj);
    //Object.assign()는 1차원 객체는 깊은 복사가 이루어지지만, 2차원 객체는 깊은 복사가이루어지지 않는다
    e
    copiedObj.mastermind = 'James Wood';
    expect(obj.mastermind).to.equal('Joker');

    obj.henchwoman = 'Harley';
    expect(copiedObj.henchwoman).to.equal('Adam West');

    delete obj.twins['Jared Leto'];
    expect('Jared Leto' in copiedObj.twins).to.equal(false);
    // jared Leto는 copiedObj에서 영향을 받지 않아서 안지워 진다고 생각하지만, 이건 영향을 받는다 그래서 결국에는 Object.assign는 깊은복사가 아닙니다.

Object.assign()는 1차원 객체는 깊은 복사가 이루어지지만, 2차원 객체는 깊은 복사가이루어지지 않는다

출처 : 코드스테이츠