[JS]객체(object)

변수 혹은 상수를 사용할 때 하나의 이름(변수명/상수명)에 여러 종류의 값을 넣을 수 있게 해줍니다.

아래와 같이 dog라는 상수를 선언한 후 블록 안에 name,age라는 키와 '멍멍이', 2 라는 밸류(값)을 넣어줍니다.

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

예를 들어 name이라는 key에 들어있는 '멍멍이'라는 값을 콘솔창에 출력하려면 아래와 같이 상수명.키 를 입력하여 호출합니다.

console.log(dog.name);

 

함수에서 객체를 파라미터로 받을 때에는

우선 객체를  만들어 줍니다. ironMan과 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)라는 객체로 받을 것이다.

그리고 이 메서드는 text라는 상수를 선언하는데 입력받은 객체파라미터의 alias키에 해당하는 값+(입력받은 객체파라미터의 name키에 해당하는 값) + 역할을 맡은 배우는 입력받은 객체파라미터의 actor키에 해당하는 값 이다.

콘솔에 text라는 상수를 표시한다.

print(객체); 는 해당하는 객체를 입력받아 상기 const 이하의 메서드를 실행 실행하라 라는 의미의 함수가 된다.

 

객체 비구조화 할당(객체 구조 분해)

위의 print 함수를 보면 파라미터로 받아온 hero 내부의 값을 조회 할 때 마다 hero.을 입력하는데 객체 구조 분해 문법을 사용하면 더욱 가독성이 좋고 짧게 작성 가능.

example

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

 

PS.파라미터 단계에서 객체 비구조화 할당

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

print라는 함수는 {해당 키가 들어있는 객체}를 파라미터로 받아 코드블럭안의 메소드를 실행한다.

 

객체 안에 함수 넣기

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

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

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

dog.say();

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

dog.say();

단, 객체 안에 함수를 넣을 때, 화살표 함수로 선언한다면 제대로 작동하지 않음.

 

참고 https://learnjs.vlpt.us/