객체

객체

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

const dog = {
   name : "초코",
   age : 3, 
   adress : "서울특별시 ...",
};

console.log(dog.name); // 초코로 출력된다.

객체를 선언할 때는 {}안에 key : "value", 이 형태로 넣으면 되고
키에 해당하는 부분은 공백이 있어서는 안된다. 만약 공백이 필요하다면 큰따음표나 작은 따음표로 감싸서 문자열로 집어넣어 주면 된다.

객체 중 원하는 값만 부르고 싶을 때에는 console.log(객체이름.key값) 으로 부르면 되고 모든 값을 부르고 싶으면 consolr.log(객체이름)으로 부르면 된다.

함수에서 객체를 매개변수로 받기

함수를 하나 만들어 그 함수의 매개변수를 위의 예제로 받아와서 사용해보자

const dogPrint = (dog) => {
  const content = "나는" + dog.name + "야";
  console.log(content);
}

이렇게도 사용할수 있다.

템플릿 리터럴
console.log를 할때 문자열을 조합하기 위해 +를 사용했는데 보다 쉽게 조합할수 있는 방법이 있다. 바로 템플릿 리터럴이라는 문법인데

const dogPrint = (dog) => {
  const content = `나는 ${dog.name}야`;
  console.log(content);
}

이와 같이 ``(백틱)을 사용해서 그 안에 문자를 입력해주고 객체를 불러오고 싶은 곳에 ${}을 사용하는 방법인데 이 방법을 사용하면 보다 긴 문장을 쉽게 표현할수 있다.

const dogPrint = (dog) => {
  const content = `나는 ${dog.name}이고 나이는 ${dog.age}살이고 사는곳은 ${dog.adress}야`;
  console.log(content);
}

결과는 "나는 초코이고 나이는 3살이고 사는곳은 서울특별시 ...야" 로 보다 간편하게 더 긴 문장을 표현할수 있다.

객체 비구조화 할당

위의 예제를 보면 매개변수로 받아온 dog 내부의 값을 조회할 때 마다 dog. 을 입력하고 있는데 객체 비구조화 할당을 사용하면 보다 더 짧고 보기 좋게 작성할수 있다.

const dogPrint = ({address,age,name}) => {
  const content = `나는 ${name}이고 나이는 ${age}살이고 사는곳은 ${adress}야`;
  console.log(content);
}

이처럼 매개변수 자리에 {}를 넣고 그 안에 쓰고 싶은 변수의 키값을 넣어서 쓸 수 있고 객체 구조 분해를 할때는 dog.을 안 써도 된다.

객체 안에 함수 넣기

const dog = {
   name : "초코",
   age : 3, 
   adress : "서울특별시 ...",
   say : function say() {                          
        console.log(`나는${this.name}다!!!!`) //this는 원래 window를 뜻하지만 객체 안에서 쓰면 해당 객체를 뜻함
   }; //화살표 함수 안에서는 this가 해당 객체를 가리키지 않아서 this를 쓰려면 화살표 함수를 쓰면 안됨
};
dog.say();

이러면 콘솔에는 "나는 초코다!!!!"가 뜬다.