객체

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

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

값을 집어 넣을 때에는 키: 원하는 값 형태로 넣으며, 키에 해당하는 부분은 공백이 없어야 한다.

만약에 공백이 있어야 하는 상황이라면 이를 따옴표로 감싸서 문자열로 넣어주면 된다.

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

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

console.log(ironMan.name);             // 토니 스타크
console.log(captainAmerica.alias);     // 캡틴 아메리카

 

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

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);  // 캡틴 아메리카(스티븐 로저스) 역할을 맡은 배우는 크리스 에반스 입니다.

 

객체 비구조화 할당

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

print 함수를 보면 파라미터로 받아온 hero 내부의 값을 조회할 때마다 hero. 를 입력하고 있다.

객체 비구조화 할당을 통해 객체에서 값들을 추출해서 새로운 상수로 선언해준다.

const { alias, name, actor } = 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 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);

 

객체 안에 함수 넣기

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

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

🚨 주의! 객체 안에 함수를 넣을 때 화살표 함수로 선언한다면 제대로 작동하지 않는다.

function 으로 선언한 함수는 this 가 제대로 자신이 속한 객체를 가리키게 되는데, 화살표 함수는 그렇지 않기 때문이다.

const dog = {
  name: '멍멍이',
  sound: '멍멍!',
  say: function() {
    console.log(this.sound);
  }
};

dog.say();  // 멍멍!

 

Getter 함수와 Setter 함수

객체를 만들고 나면 객체 안의 값을 수정할 수도 있다.

Getter 함수와 Setter 함수를 사용하게 되면 특정 값을 바꾸려고 하거나, 특정 값을 조회하려고 할 때 우리가 원하는 코드를 실행시킬 수 있다.

Getter와 Setter를 단순히 값 저장용이라고 생각하기 보다는 캡슐화, 정보은닉 관점에서 이해하는 것이 바람직 하다고 본다.

 

Getter

• 함수의 앞 부분에 get 키워드를 붙인다.
• 특정값을 조회할 때 우리가 설정한 함수로 연산된 값을 반환한다.

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

console.log(numbers.sum);  // sum 함수가 실행됩니다! 3
numbers.b = 5;
console.log(numbers.sum);  // sum 함수가 실행됩니다! 6

우리는 numbers.sum( ) 을 한 것이 아니라 numbers.sum 을 조회했을 뿐인데, 함수가 실행되고 그 결과값이 출력되었다. 이런 식으로 Getter 함수는 특정 값을 조회할 때 우리가 설정한 함수로 연산된 값을 반환한다.

 

Setter 함수

• 함수의 앞 부분에 set 키워드를 붙인다.
• set 함수를 설정할 때 파라미터 값을 설정해주어야 한다.
• Setter 함수는 값을 설정했을 때 값을 함수의 파라미터로 받아오게 된다.

const dog = {
  _name: '멍멍이',
  get name() {
    console.log('이름을 조회합니다..' + this._name);
  },
  set name(value) {
    console.log('이름이 바뀝니다..' + value);
    this._name = value;    // value 를 받아올 때 _name 값을 바꿈
  }
};

console.log(dog.name);     // 이름을 조회합니다..멍멍이
dog.name = '뭉뭉이';       // 이름이 바뀝니다..뭉뭉이
console.log(dog.name);     // 이름을 조회합니다..뭉뭉이