✍️ TIL 7 ㆍJavascript 객체

객체란?

우리가 어떠한 값을 선언하게 될 때, 하나의 이름에 여러 종류의 값을 넣을 수 있게 해준다.

객체의 기본적인 구조

const student = { 
  name: '홍길동',
  age: 25,
  grade: 4,
  major: 'computer engineering'
  
console.log(student.name);
console.log(student.age); 

홍길동
25

이 때, 객체 안의 name, age, grade, major와 같은 속성을 key라고 부른다.
key값은 공백이 있으면 안되기 때문에 공백을 주고 싶은 경우, '' 로 감싸준다.

또 다른 예시를 살펴보자.

const ironMan = {
  name: 'Tony Stark',
  actor: 'Robert Downey Jr',
  alias: 'Iron Man'
};

const captainAmerica = {
  name: 'Steve Rogers',
  actor: 'Chris Evans',
  alias: 'Captain America'
};

console.log(ironMan);
console.log(captainAmerica);

< 결과 >

저번 포스팅에서 다룬 함수의 파라미터에서도 객체를 받아와서 사용이 가능하다.

const ironMan = {
  name: 'Tony Stark',
  actor: 'Robert Downey Jr',
  alias: 'Iron Man'
};

const captainAmerica = {
  name: 'Steve Rogers',
  actor: 'Chris Evans',
  alias: 'Captain America'
};

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

print(ironMan);
print(captainAmerica);

< 결과 >

객체 비구조화 할당

위 코드를 보면 hero 내부의 값을 조회하기 위해 hero.이 여러번 사용된 걸 볼 수 있다.
이 코드를 객체 비구조화 할당이라는 문법을 통해 더 간단히 만들 수 있다.

const ironMan = {
  name: 'Tony Stark',
  actor: 'Robert Downey Jr',
  alias: 'Iron Man'
};

const captainAmerica = {
  name: 'Steve Rogers',
  actor: 'Chris Evans',
  alias: 'Captain America'
};

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

print(ironMan);
print(captainAmerica);

결과는 같다.

더 나아가, 파라미터에서 객체 비구조화 할당을 해주면 더 간결해진다.

const ironMan = {
  name: 'Tony Stark',
  actor: 'Robert Downey Jr',
  alias: 'Iron Man'
};

const captainAmerica = {
  name: 'Steve Rogers',
  actor: 'Chris Evans',
  alias: 'Captain America'
};

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

print(ironMan);
print(captainAmerica);