🍦Vanilla JS ⑤ 객체 - (1) 리터럴 객체

객체는 자바스크립트에서 가장 중요하고 강력한 개념 중 하나 입니다.

• 자바스크립트에서 객체는 다른 객체 또는 기본,원시타입(primitive type) 값을 포함할 수 있는 컨테이너 입니다.
• 객체는 중괄호 {}를 사용하여 만들며, 속성(property)과 값(value)의 쌍으로 구성됩니다.
• 객체를 만드는 방법은 [객체 리터럴]과 [클래스]가 있지만, [객체 리터럴]로 객체를 만드는 것이 간단하고 직관적 입니다.
• 웹 개발에서 브라우저 객체 모델(BOM)과 문서 객체 모델(DOM) 등 다양한 객체를 사용하여 웹 페이지를 조작 및 상호작용하는 데 사용됩니다.

객체 리터럴

     객체 리터럴은 백엔드와 통신할 때 주로 쓰입니다.
     📌 예) 회원정보 3000번 포트에서 8211번 포트로 전달 (BE : 8211번 / FE : 3000번) 

- 알아두면 좋은! Tip!
FE : 리터럴 객체 & Map
BE : ArrayList & Map

* 전달할 때는 리터럴 객체
* 정보를 받을 때는 Map (객체 단위로 한번에 ..)

생성 방법

let obj = {
  property1: value1,
  property2: value2,
  method1: function() { ... },
  method2: function() { ... }
};

객체 속성

• 객체 속성은 객체 내부의 변수로 값을 저장합니다.

const person = {
  title : "크라임씬2",
  name : "박지윤",
  age : 44,
  job : "아나운서"
};
console.log(person.age); // 44

• 객체 안에 다른 객체나 함수를 포함할 수 있습니다.

const person20 = { // 중첩
  name : {
    firstName : "지윤",
    lastName : "박"
  },
  age : 44,
  isAdult : true,
  printInfo : function() {
    return this.name;
  }
};
console.log(person20.printInfo().firstName); // 지윤
console.log(person20[`isAdult`]); // true

person20.name.firstName = "Jiyoon";
person20.name.lastName = "Park";
console.log(person20.name); // {firstName : 'Jiyoon', lastName: 'Park'}

💡 객체 속성에 키로 접근해 값을 재할당하면 기존 속성값을 변경할 수 있습니다.

      만약 해당 키가 없다면 해당 키와 값으로 구성된 새로운 속성이 객체에 추가 됩니다.

const carInfo = {};
carInfo.name = "테슬라";
carInfo.year = 2022;
carInfo.maxSpeed = 300;
console.log(carInfo); // { name: '테슬라', year: 2022, maxSpeed: 300 }

💡 객체 속성 앞에 delete 키워드를 명시하면 해당 속성이 삭제 됩니다.

delete carInfo.maxSpeed;
console.log(carInfo); // { name: '테슬라', year: 2022 }

객체 메소드

• 객체 메소드는 객체 내부에서 동작하는 함수 입니다. 메소드는 속성으로 정의 됩니다.

let person3 = {
  name : "홍길동",
  age : 18,
  sayHello : function() {
    console.log(`Hello~ my name is ${this.name}`);
  }
};
person3.sayHello(); // Hello~ my name is 홍길동

객체 생성자(new)

• 객체 생성자는 템플릿으로 사용하여 동일한 속성과 메소드를 가진 객체를 여러개 생성할 때 사용합니다.
• 객체 생성자는 함수로 정의 됩니다.

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log(`Hello.. my name is ${this.name}`);
  };
};

let person4 = new Person("이순신", 55);
person4.sayHello(); // Hello.. my name is 이순신
console.log(person4); // Person { name: '이순신', age: 55, sayHello: [Function (anonymous)] }