JavaScript - 객체

sue·2020년 12월 6일
0

javaScript note

목록 보기
5/9

객체

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

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

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

객체 선언 방법

{ } 문자 안에 원하는 값을
키: 원하는 값 형태로 넣기
키에 해당하는 부분은 공백이 없어야
공백이 있어야 하는 상황이라면 따옴표로 감싸서 문자열로 처리

const sample = {
  'key with space': true
};
const ironMan = {
 name: '토니스타크',
 actor: '로버트 다우니 주니어',
 alias: '아이언맨' 
}
const captainAmerica = {
  name: '스티븐 로저스',
  actor: '크리스 에반스',
  alias: '캡틴 아메리카'
};
console.log(ironMan);
console.log(captainAmerica);


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

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

객체에서 각각의 값을 추출해서 새로운 상수로 선언해 주는 것

&

파라미터 단계에서 객체 비구조화 할당도 가능!

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

print(ironMan);
print(captainAmerica);

객체 안에 함수 넣기

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

dog.say(); // 멍멍! 

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

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

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

dog.say();

단, 객체 안에 함수를 넣을 때 화살표 함수로 선언하면 제대로 작동 X
=> function 으로 선언한 함수는 this 가 제대로 자신이 속한 객체를 가르키지만, 화살표 함수는 그렇지 않기 때문!

Getter 함수와 Setter 함수

객체 안에 Getter 함수와 Setter 함수 설정하는 방법
객체를 만든 후, 다음과 같이 객체 안의 값 수정 가능

const numbers = {
  a: 1,
  b: 2
};

numbers.a = 5;
console.log(numbers); // {a:5, b:2} 

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

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

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

numbers.sum() 을 한 것이 아니라 numbers.sum 을 조회했을 뿐인데,
함수가 실행되고 그 결과값이 출력

이런식으로 Getter 함수는 특정 값을 조회 할 때 우리가 설정한 함수로 연산된 값을 반환!

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 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 함수를 설정하고 나면,
numbers.a = 5 이렇게 값을 설정했을 때 5를 함수의 파라미터로 받아오게 된다.
위 코드에서는 객체 안에 _a, _b 라는 숫자를 선언해주고, 이 값들을 위한 Getter 와 Setter 함수를 설정해주었다.
아까 만든 객체에서는 numbers.sum 이 조회 될 때마다 덧셈이 이루어졌었지만, 이제는 a 혹은 b 값이 바뀔 때마다 sum 값을 연산한다.

0개의 댓글