객체 Object

Object에 대해 알아보자.

---

Object 객체

자바스크립트는 객체 기반의 스크립트 언어입니다.

즉, 자바스크립트를 이루고 있는 거의 모든 것은 객체이며 원시 타입을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체입니다.

자바스크립트의 객체는 Key와 Value로 구성된 프로퍼티(Property)들의 집합입니다.

프로퍼티의 값으로 자바스크립트에서 사용할 수 있는 모든 값을 사용할 수 있습니다.

자바스크립트에서 함수는 일급 객체이므로 값으로 할 수 있습니다.

프로퍼티 값이 함수일 때는 일반 함수와 구분하기위해 메서드(Method)라 말합니다.

따라서, 객체는 데이터를 의미하는 프로퍼티(Property)와 데이터를 참조하고 조작할 수 있는 동작(behavior)을 의미하는 메서드(method)로 구성된 집합입니다.

---

프로퍼티 (Property)

프로퍼티는 Key와 Value으로 구성되며 Key로 유일하게 식별할 수 있습니다.

• Key : 빈 문자열을 포함하는 모든 문자열 또는 symbol 값
• Value : 모든 값

Key에 문자열이나 symbol 값 이외의 값을 지정하면 암묵적으로 타입이 문자열로 변환됩니다.

---

객체 생성

• 객체 리터럴 중괄호 ({})

  가장 기본적인 방법으로 중괄호({})를 사용하여 객체를 생성합니다.

  var emptyObject = {};
  console.log(typeof emptyObject); // object
  
  var person = {
    name: "Psmin", // Property
  
    sayMyName: () => {
      console.log("my name is " + this.name);
    }, // Method
  };
  
  console.log(typeof person); // object
  console.log(person); // {name: "Psmin", sayHello: ƒ}
  
  person.sayMyName(); // my name is Psmin
  

• Object 생성자 함수 (constructor)

  new 연산자와 Object 생성자 함수를 호출하여 빈 객체를 생성합니다.

  생성자 함수란 new 키워드와 함께 객체를 생성하고 초기화하는 함수를 말합니다.

  생성자 함수를 통해 생성된 객체를 인스턴스(instance)라고 합니다.

  빈 객체 생성 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성하는 방법입니다.

  프로퍼티를 추가하는 방법은 object.propertyName이나 object[‘propertyName’]을 사용합니다.

  // 빈 객체의 생성
  var person = new Object();
  
  // 프로퍼티 추가
  person.name = "Psmin";
  
  person["sayMyName"] = () => {
    console.log("my name is " + this.name);
  };
  
  console.log(typeof person); // object
  console.log(person); // {name: "Psmin", sayHello: ƒ}
  
  person.sayMyName(); // my name is Psmin
  

  자바스크립트는 Object 생성자 함수 이외에도 String, Number, Boolean, Array, Date, RegExp 등의 빌트인 생성자 함수를 제공합니다.

• 생성자 함수

  객체 리터럴 방식과 Object 생성자 함수 방식은 프로퍼티 값만 다른 여러 개의 객체를 생성할 때 동일한 프로퍼티를 갖는 객체임에도 불구하고 매번 같은 프로퍼티를 기술해야합니다.

  // Object 생성자 함수 방식
  var person1 = {
    name: "Psmin",
    sayMyName: () => {
      console.log("my name is " + this.name);
    },
  };
  
  var person2 = {
    name: "Park",
    sayMyName: () => {
      console.log("my name is " + this.name);
    },
  };
  

  생성자 함수를 사용하면 마치 객체를 생성하기 위한 템플릿(클래스)처럼 사용하여 프로퍼티가 동일한 객체 여러 개를 간편하게 생성할 수 있도록 해줍니다.

  // 생성자 함수 방식
  function Person(name, gender) {
    this.name = name;
    this.sayMyName = function () {
      console.log("my name is " + this.name);
    };
  }
  
  // 인스턴스의 생성
  var person1 = new Person("Psmin");
  var person2 = new Person("Park");
  

  프로퍼티 또는 메서드명 앞에 기술한 this는 생성자 함수가 생성할 인스턴스(instance)를 말합니다.

  • this에 연결(바인딩)되어 있는 프로퍼티와 메서드는 public (외부에서 참조 가능)

  • 생성자 함수 내에서 선언된 일반 변수는 private (외부에서 참조 불가능)

  function Person(name, gender) {
    this.name = name; // public
    var hobby = "coding"; // private
  
    this.sayMyName = () => {
      // public
      console.log("my name is " + this.name);
    };
  
    this.sayMyHobby = () => {
      // public
      console.log("my hobby is " + hobby);
    };
  }
  
  var person = new Person("Psmin");
  
  console.log(typeof person); // object
  console.log(person); // Person { name: 'Psmin', sayMyName: [Function], sayMyHobby: [Function] }
  
  console.log(person.hobby); // undefined (접근불가)
  person.sayMyHobby(); // my hobby is coding
  

---

프로퍼티 동적 생성

객체가 소유하고 있지 않은 Key에 Value를 할당하면 프로퍼티를 생성하여 객체에 추가합니다.

var person = {
  name: "Psmin",
  sayMyName: () => {
    console.log("my name is " + this.name);
  },
};

person.age = 20;

console.log(person.age); // 20

---

프로퍼티 삭제

delete 연산자를 사용하면 객체의 프로퍼티를 삭제할 수 있습니다.

var person = {
  name: "Psmin",
  sayMyName: () => {
    console.log("my name is " + this.name);
  },
};

delete person.name;

console.log(person.name); // undefined