JavaScript 객체

const dong = {
  name : '멍멍이',
  age : 2,
  cute : true,
  sample : {
    a: 1,
    b: 2,
  }
};

console.log(dog.name); === 멍멍이
console.log(dong.age); === 2

name과 age는 키라고 한다.

공백이 있으면 안된다.

대신 ''이걸로 감싸주면 된다.

 

비구조화 할당 = 객체 구조분해

객체에서 특정 값들을 추출해내는 것

const ironMan = {
  name : '토니 스타크',
  actor : '로버트 다우니 주니어',
  alias : '아이언맨'
};

const {name} = ironMan;
console.log(name);

function print(hero){
  const { alias, name, actor } = hero;
  const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor}입니다.`
  console.log(text);
}

function printf({ alias, name, actor}) {
  const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor}입니다.`
  console.log(text);
}

객체 안에 함수 넣기

const dog = {
  name : '멍멍이',
  sound : '멍멍!',
  say : function say(){
    console.log(this.sound);
  }
  /*위의 function과 아래 function은 같은 것*/
  say : function {
    console.log(this.sound);
  }
};

const cat = {
  name : '야옹이',
  sound : '야옹~'
};

cat.say = dog.say;
dog.say(); === 멍멍!
cat.say(); === 야옹~

 

객체안에 화살표 함수를 집어넣지는 않는다. 물론 집어넣을 수는 있지만 this를 사용하지 않는다

왜냐하면 화살표 함수에서는 this가 무엇인지 모르기 때문이다. 그래서 this를 사용하면 자신이 속해 있는 객체를

가리키는 것인지 몰라서 제대로 작동을 하지도 않고 오류가 나게 된다.

 

Getter와 Setter 함수

 특정 값을 바꾸려고 하거나 특정 값을 조회하려고 할 때 원하는 코드를 실행 시킬 수가 있다.

const numbers = {
  a: 1,
  b: 2
  get sum() {
    console.log('sum 함수가 실행됩니다');
    return this.a + this.b;
  }
};

console.log(numbers.sum); //3
//함수의 형태이지만 조회를 했을 뿐인데 실행이 된다.
numbers.b = 5;
console.log(numbers.sum); //6

const dog = {
  _name: '멍멍이', //_를 추가한 것은 set과 겹치지 않게 하려고 추가한 것
  get name() {
    console.log('_name을 조횝합니다..');
    return this._name;
  }; //이렇게 추가를 해주면 console.log에서 name을 조회할 때 _를 입력하지 않아도 된다.
  set name(value) {
    console.log('이름이 바뀝니다..' + value);
    this._name = value;
  }
};
console.log(dog._name); // 멍멍이
dog.name = '뭉뭉이'; // 이름이 바뀝니다..뭉뭉이
console.log(dong_name); // 뭉뭉이

const numbers = {
  _a : 1,
  _b : 2,
  sum : 3,
  calculate : function calculate(){
    console.log('calculate');
    this.sum = this._a + this._b;
  },
  get a(){
    return this._a;
  },
  get b(){
    return this._b;
  },
  set a(value){
    this._a = value;
    this.calculate();
  },
  set b(value){
    this._b = value;
    this.calculate();
  }
}

console.log(numbers.sum);
numbers.a = 5;
console.log(numbers.sum);

//계산을 할 때마다 더하는 것이 아닌 변수의 값이 갱신이 될 때마다 합쳐줘서 조금 더 효율적이게 된다.