자바스크립트: 객체

변수는 데이터를 저장하는 컨테이너입니다. 개체는 변수입니다.

객체를 만들려면 중괄호를 사용하십시오{}.[]는 배열을 만드는 데 사용됩니다.
변수에는 하나의 값이 있고 중괄호가 없습니다.

객체는 정렬되지 않은 데이터를 key: value 쌍으로 저장합니다. 각 키:값 쌍은 ,로 구분됩니다(CSS와 달리 속성은 ;로 구분됨).

키 값에 액세스하는 두 가지 방법이 있습니다.

object.propertyname ;

object['propertyname'] 함수에서 사용할 수 있습니다.

let doggy = {
color: 'dark orange',
breed: 'golden retriever'
};
function getProp(objectName, propertyName){
  return objectName[propertyName];
}
getProp(doggy, 'breed');   //output: "golden retriever"

객체가 const 에 의해 선언된 경우 재할당할 수 없지만 여전히 변경할 수 있습니다.

method : 개체에 저장된 데이터가 함수인 경우. 개체는 둘 이상의 메서드를 가질 수 있습니다.

for...in 루프는 객체를 반복할 수 있습니다.

let lifeInHouse = {
  lives: {
   doggy: {
    color: 'dark orange',
    breed: 'golden retriever'
   },
   plant: {
    color: 'green',
    breed: 'N/A'
  }
 }
}
for(let life in lifeInHouse.lives){
  console.log(`${life}'s color is: ${lifeInHouse.lives[life].color}`);  
}   //output: doggy's color is: dark orange
              plant's color is: green

for ... of 배열을 반복합니다.

개체가 참조로 전달됩니다. 객체가 함수 내에서 변경되면 변경 사항은 영구적입니다. 그러나 재 할당은 동일하게 작동하지 않습니다.

예를 들어:

let classmate ={
  name: 'Adam',
  gender: 'F'
}
let changeGender = obj =>{
  obj.gender = 'M'  
}
changeGender(classmate);
console.log(classmate);   //output: { name: 'Adam', gender: 'M' }

let classmate ={
  name: 'Adam',
  gender: 'F'
}
let reassign = obj =>{
  obj = {
    name: 'Adam',
    gender: 'M'};
  console.log(obj);  //output: { name: 'Adam', gender: 'M' }
}
reassign(classmate);
console.log(classmate);  //output: { name: 'Adam', gender: 'F' }. The reassignment didn't work.

재할당 함수가 호출되면 변수 obj가 classmate 객체 위치의 참조가 되도록 변경됩니다. 따라서 obj는 classmate 객체의 값을 가집니다. 그러나 classmate 변수는 변경되지 않습니다. 즉, 함수에서 재할당을 사용하지 마십시오.

this 키워드는 호출 개체를 참조합니다. 다른 호출 개체의 속성에 대한 속성 액세스를 제공할 수 있습니다. 피하십시오: 이 키워드를 사용할 때 화살표 기능을 사용하지 마십시오. Additional resources: Differences between arrow functions and traditional functions

게터get functionName(){}는 조건을 사용하여 다른 값을 반환할 수 있습니다. getter 결과를 화면에 기록하려면 console.log(objectName.functionName) 를 사용하십시오. (괄호 필요 없음)

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);

Setterset functionName(parameter){}는 값을 재할당할 수 있습니다.

set newAge(num){
  if(typeof num === 'number' && num >=0){
    this.age = num;
  } else {
    console.log('Please type in a number greater or equal to zero');
  }
};
objectName.newAge = 100;
console.log(object.age);  //output: 100

팩토리 함수에서 키 이름이 매개변수 이름과 동일한 경우 하나를 생략할 수 있습니다.

const foodFactory = (date, type)=>{
  return{
   date,
   type
  }
};
const brioche = foodFactory('July28','bread');
console.log(brioche);  //output: { date: 'July28', type: 'bread' }

개체에서 값을 추출할 때 키 이름을 {}로 래핑한 다음 개체에 할당할 수 있습니다.

Object.keys(objectName)는 객체의 키 이름을 반환할 수 있습니다.

Object.entries(objectName) 키 이름과 값이 포함된 배열을 반환할 수 있습니다.

for (const [key, value] of Object.entries(object1)) {
  console.log(`${key}: ${value}`);
}

const newObject = Object.assign(targetObject, source)는 변경 사항이 포함된 새 변수를 생성하고 대상 개체도 변경됩니다.

const newObject = Object.assign(source, targetObject)는 대상 개체가 변경되지 않은 상태에서 변경된 새 변수를 생성합니다.