JavaScript Advanced Objects

this 키워드

const goat = {
  dietType: 'herbivore',
  makeSound() {
     console.log('baaa');
  },
  diet() {
     console.log(this.dietType);
  }
};
goat.makeSound();  // baaa
goat.diet(); // herbivore

-> this 키워드는 호출 객체의 속성에 대한 엑세스를 제공하는 호출객체를 참조

const robot = {
  model : '1E78V2',
  energyLevel : 100,
  provideInfo() {
    return `I am ${this.model} and my current energy level is 
    ${this.energyLevel}.`}
};
console.log(robot.provideInfo()); 
// I am 1E78V2 and my current energy level is 100.

_
: 속성이름 앞에 밑줄을 붙여 속성을 변경해서는 안됨을 의미!!

Getter

: 개체의 내부 속성을 가져오고 반환하는 메소드

• 속성을 가져올 때 데이터에 대한 작업을 수행할 수 있다.
• 조건을 사용하여 다른 값을 반환할 수 있다.
• this을 사용하여 호출객체의 속성에 엑세스할 수 있다.
• 속성이 getter / setter 함수와 동일한 이름 공유할 수 없다.
  ( _ 추가해야함)
  

const person = {
  _firstName: 'John',
  _lastName: 'Doe',
  get fullName(){
     if(this._firstName && this._lastName){
       return `${this._firstName} ${this._lastName}`;
       } else {
       return 'Missing a first name or a last name.';
       }
     }
  }

  // To call the getter method:
  person.fullName; // 'John Doe'

 const robot = {
  _model: '1E78V2',
  _energyLevel: 100,
  get energyLevel(){
 	if(typeof this._energyLevel === 'number') {
      return 'My current energy level is ' + this._energyLevel
    } else {
      return "System malfunction: cannot retrieve energy level"
    }
  }
};

console.log(robot.energyLevel);

Setter

: 개체 내의 기존 속성 값을 다시 할당하는 메소드

• 입력 확인, 속성에 대한 작업 수행 및 개체 사용방법에 대한 명확한 의도 표시를 포함
• 속성을 직접 다시 할당할 수 있다.

const person = {
  _age: 37,
  set age(newAge){
    if (typeof newAge === 'number'){
      this._age = newAge;
    } else {
      console.log('You must assign a number to age');
    }
  }
};

person.age = 40;
console.log(person._age); // Logs: 40
person.age = '40'; // Logs: You must assign a number to age

person._age = 'forty-five'
console.log(person._age); // forty-five

const robot = {
  _model: '1E78V2',
  _energyLevel: 100,
  _numOfSensors: 15,
  set numOfSensors(num){
    if(typeof num === 'number' && num >= 0){
      this._numOfSensors = num;
    } else {
     console.log('Pass in a number that is 
     greater than or equal to 0');
    }
  }
};

robot.numOfSensors = 100;

console.log(robot.numOfSensors); // undefined

팩토리 함수

: 객체를 반환하는 함수,
여러 객체 인스턴스를 만드는 데 재사용할 수 있다.
반환되는 객체를 사용자 정의할 수 있는 매개변수를 가질 수도 있다.

const monsterFactory = (name, age, energySource, catchPhrase) => {
  return { 
    name: name,
    age: age, 
    energySource: energySource,
    scare() {
      console.log(catchPhrase);
    } 
  }
};

const ghost = monsterFactory('Ghouly', 251, 'ectoplasm', 'BOO!');
ghost.scare(); // 'BOO!'

const robotFactory = (model, mobile) =>
{
  return {
    model : model,
    mobile : mobile,
    beep() {
      console.log('Beep Boop')
    }
  }
};

const tinCan = robotFactory('P-500', true);

tinCan.beep();  // 'Beep Boop'

속성 값 줄여쓰기(property value shorthand)

반복 제거

function robotFactory(model, mobile){
  return {
    model,
    mobile,
    beep() {
      console.log('Beep Boop');
    }
  }
}

// To check that the property value shorthand technique worked:
const newRobot = robotFactory('P-501', false);
console.log(newRobot.model);    // 'P-501'
console.log(newRobot.mobile);   // false

비구조화 할당

{ }에 객체 할당

const vampire = {
  name: 'Dracula',
  residence: 'Transylvania',
  preferences: {
    day: 'stay inside',
    night: 'satisfy appetite'
  }
};

const { residence } = vampire;
console.log(residence); // 'Transylvania' 

const { day } = vampire.preferences; 
console.log(day); // 'stay inside'

const robot = {
  model: '1E78V2',
  energyLevel: 100,
  functionality: {
    beep() {
      console.log('Beep Boop');
    },
    fireLaser() {
      console.log('Pew Pew');
    },
  }
};

const { functionality } = robot;

functionality.beep();    // Beep Boop

기본 제공 개체 매소드

.hasOwnProperty(), valueOf(),
Object.assign(), Object.entries(), Object.keys()...

const robot = {
  model: 'SAL-1000',
  mobile: true,
  sentient: false,
  armor: 'Steel-plated',
  energyLevel: 75
};

const robotKeys = Object.keys(robot);
console.log(robotKeys);
// [ 'model', 'mobile', 'sentient', 'armor', 'energyLevel' ]

const robotEntries = Object.entries(robot)
console.log(robotEntries);
// [ [ 'model', 'SAL-1000' ],
  [ 'mobile', true ],
  [ 'sentient', false ],
  [ 'armor', 'Steel-plated' ],
  [ 'energyLevel', 75 ] ]

const newRobot = Object.assign({laserBlaster: true, 
voiceRecognition: true}, robot);
console.log(newRobot);
// { laserBlaster: true,
  voiceRecognition: true,
  model: 'SAL-1000',
  mobile: true,
  sentient: false,
  armor: 'Steel-plated',
  energyLevel: 75 }