JavaScript- 객체

※ 강의를 듣고 제가 이해한 것을 바탕으로 정리한 것이라서 오류가 있을 수 있습니다.

 

1. 객체

객체는 변수 혹은 상수를 사용하게 될 때 하나의 이름에 여러 종류의 값을 넣을 수 있게 해준다.

 

const dog = {
  name: '멍멍이', // key: value
  age: 2
};

console.log(dog.name);
console.log(dog.age);

객체를 선언 할 때에는 이렇게 { } 안에 원하는 값들을 넣어주면 된다.

값을 집어 넣을때는 키: 원하는 값  형태로 넣으면 된다.

 

실행 결과

 

2. 함수에서 객체를 파라미터로 받기

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

const captainAmerica = {
  name: '스티븐 로저스',
  actor: '크리스 에반스',
  alias: '캡틴 아메리카'
};

function print(hero) {
  const text = `${hero.alias}(${hero.name}) 역할을 맡은 배우는 ${
    hero.actor
  } 입니다.`; // 객체를 파라미터로 받아 와서 객체의 키에 있는 값이 문자열로 넣어짐
  console.log(text);
}

print(ironMan);
print(captainAmerica);

함수에서 객체를 파라미터로 받아와서 함수안에 코드의 문자열에 넣어 사용할 수도 있다.

그리고 함수를 호출하면 함수안의 코드가 실행된다.

 

실행 결과

 

 

3. 객체 비구조화 할당

위 코드의 print 함수를 보면  hero 내부의 값을 조회 할때마다  hero. 을 입력하고 있는데  

객체 비구조화 할당이라는 문법을 사용하면 코드를 더 짧고 보기 좋게 작성 할 수 있다.

이 문법은  객체 구조 분해  라고 불리기도 한다.

 

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

const captainAmerica = {
  name: '스티븐 로저스',
  actor: '크리스 에반스',
  alias: '캡틴 아메리카'
};

function print(hero) {
  const { alias, name, actor } = hero; // 객체 비구조화 할당 사용
  const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
  console.log(text);
}

print(ironMan);
print(captainAmerica);

const { alias, name, actor } = hero;

이 코드가 객체에서 값들을 추출해서 새로운 상수로 선언해 주는 것이다.

 

더나아가서 다음과 같이 파라미터에 객체 비구조화 할당을 할 수도 있다.

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

const captainAmerica = {
  name: '스티븐 로저스',
  actor: '크리스 에반스',
  alias: '캡틴 아메리카'
};
              //파라미터에 객체 비구조화 할당 사용
function print({ alias, name, actor }) {
  const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
  console.log(text);
}

print(ironMan);
print(captainAmerica);

 

4. 객체 안에 함수 넣기

객체 안에 함수도 넣을 수 있다.

const dog = {
  name: '멍멍이',
  sound: '멍멍!',
  // 키 say의 값으로 함수를 넣음
  say: function say() {
    console.log(this.sound);
  }
};

dog.say();

함수가 객체안에 들어가게 되면, this 는 자신이 속해있는 객체를 가르키게 된다.

함수를 선언 할 때에는 이름이 없어도 된다.

 

 

실행 결과

 

 

Getter 함수와 Setter 함수

객체 안에 getter 함수와 setter 함수를 사용하게 되면 특정 값을 바꾸거나 조회하려고 할때

원하는 코드를 실행 할수 있다.

 

 

(1) Getter 함수

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

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

getter 함수를 사용할때는 get 키워드를 사용한다.

 

실행 결과

이와 같이 numbers.sum()으로 호출을 한 것이 아니라 numbers.sum을 호출 했을뿐인데

함수가 실행 되고 결과 값이 출력된다.

이런식으로 getter 함수는 특정 값을 조회 할 때 설정한 함수로 연산된 값을 반환한다.

 

 

(2) Setter

const numbers = {
  _a: 1,
  _b: 2,
  sum: 3,
  calculate() {
    console.log('calculate');
    this.sum = this._a + this._b;
  },
  get a() {
    return this._a;
  },
  get b() {
    return this._b;
  },
  // set 함수 사용
  set a(value) {
    console.log('a가 바뀝니다.');
    this._a = value;
    this.calculate();
  },
  set b(value) {
    console.log('b가 바뀝니다.');
    this._b = value;
    this.calculate();
  }
};

console.log(numbers.sum);
numbers.a = 5;
numbers.b = 7;
numbers.a = 9;
console.log(numbers.sum);
console.log(numbers.sum);
console.log(numbers.sum);

setter 함수를 사용할 때는 set 키워드를 사용한다.

Setter 함수를 설정하고 나면, numbers.a = 5 이렇게 값을 설정했을 때 5 를 함수의 파라미터로 받아오게

되고 바뀐 값으로 연산을 하게 된다.