Chapter7-1. 객체

객체의 개념

JS 객체

• JS의 기본 타입은 객체다

• 객체란 이름과 값으로 구성된 프로퍼티의 정렬되지 않은 집합이다.

• 프로퍼티의 값으로 함수가 올 수도 있는데, 이런 프로퍼티를 메서드라고 한다.

var normal = '하' // 일반 변수
var obj = { first_name: 'sang', last_name: 'nam', age: 27 }; // 객체

• JS에서는 숫자, 문자열, 불리언, undefined 타입을 제외한 모든 것이 객체다.

  • 하지만 숫자, 문자열, 불리언은 객체로서의 특징도 갖는다.

객체의 프로퍼티 참조

• [] 또는 . 으로 참조한다.

메서드 참조

• 객체이름.메서드이름()로 접근

• ()를 붙이지 않으면 메서드가 아닌 프로퍼티로서 참조한다.

객체의 생성

1. 리터럴 표기

2. 생성자 함수

3. Object.create() 메서드

4. 위와 같은 방법으로 생성되어 메모리에 대입된 객체를 인스턴스 라고 한다.

리터럴 표기를 이용한 생성

• 각각의 프로퍼티는 이름과 값을 콜론으로 연결하고 쉼표를 사용해 다른 프로퍼티와 구분한다.

• var test = {
    test1: "asd",
    test2: "zxcv"
  };

생성자를 이용한 객체의 생성

• new 연산자를 사용하여 객체를 생성하고 초기화할 수 있다.

• 이 때 사용되는 메서드를 생성자라고 한다.

  • 원시타입을 위한 생성자를 미리 정의하여 제공한다.

Object.create() 메서드

• 지정된 프로토타입 객체와 프로퍼티를 가지고 새로운 객체를 만들어 준다.

• 이 메서드를 이용하면 사용자가 프로토타입 객체를 직접 명시할 수 있으므로 유용하다.

프로토타입

상속

• 새로운 클래스에서 기존 클래스의 모든 프로퍼티와 메서드를 사용할 수 있게 함

• C++같은 클래스 기반의 객체지향 언어와는 달리 JS는 프로토타입 기반의 객체지향 언어다.

  • 상속의 개념이 클래스 기반 객체 지향과 다름

• JS에서는 현재 존재하고 있는 객체를 프로토타입으로 사용하여, 해당 객체를 복제하여 재사용하는 것을 상속 이라고 한다.

프로토타입

• JS의 모든 객체는 프로토타입 이라는 객체를 갖는다.

• 모든 객체는 그들의 프로토타입 으로부터 프로퍼티와 메서드를 상속 받는다.

• JS의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며, 이때 상속되는 정보를 제공하는 객체를 프로토타입 이라고 한다.

프로토타입 체인

• JS에서는 객체 생성자를 사용해 생성된 같은 타입의 객체들은 모두 같은 프로토타입 을 갖는다.

• new 연산자를 사용해 생성한 객체는 생성자의 프로토타입을 자신의 프로토 타입으로 상속 받는다.

프로토타입의 생성

• 가장 기본적인 방법은 객체 생성자 함수를 작성하는 것

• 생성자 함수를 작성하고 new 연산자를 사용해 객체를 생성하면, 같은 프로토타입을 가지는 객체들을 생성할 수 있다.

• function Test(name, age) {
    this.name = name;
    this.age = age;
  }
  
  a = new Test("ha", 1);

객체에 프로퍼티 및 메소드 추가

• 위의 예시에서 만들었던 Test의 인스턴스 a 에다가 메서드를 추가해보자

• a.func = function() {
    console.log("new method");
  }
  
  a.func() // new method
  
  b = Test("b", 100)
  b.func() // error

• 추가된 메서드는 인스턴스 a 에서만 사용할 수 있다.

• 프로토타입에는 추가가 되지 않는다. 그 객체에서만 추가가 됨

프로토타입에 프로퍼티 및 메서드 추가

• prototype 프로퍼티를 이용하면 된다.

• Test.prototype.func() = function() {
    console.log("This is new method!");
  }
  
  b = new Test("b", 10);
  b.func() // This is new method

객체 다루기

this 키워드

• this 키워드는 해당 키워드가 사용된 자바스크립트 코드 영역을 포함하고 있는 객체를 가리킨다.

  • 메서드 내부에서 사용된 this 는 해당 메서드를 포함하고 있는 객체를 가리킨다.

  • 객체 내부에서 사용된 this 는 객체 자신을 가리킨다.

  • this는 변수가 아닌 키워드이므로 사용자가 임의로 변경할 수 없다.

객체 프로퍼티의 삭제

• delete로 객체의 프로퍼티를 삭제할 수 있다.

객체 프로퍼티의 순회

• for / in 문을 사용하여 객체의 모든 프로퍼티를 순회할 수 있다.

  • 메서드도 해당 사항임

• Object.getOwnPropertyNames() 메서드느 해당 개체가 가진 모든 고유한 프로퍼티의 이름을 배열에 담아 반환한다.

  • 메서드는 포함 안됨

객체간의 비교

• JS에서 별개의 두 객체는 프로퍼티의 값이 모두 같아도, 절대로 같다고 말할 수 없다.

• var a = new Test("a", 10);
  var b = new Test("a", 10);
  
  a == b // false
  a === b // false
  
  var c = a;
  
  a == c // true
  a === c //true

• 위에서 각 변수들은 해당 객체의 주소를 가리키고 있는 객체 레퍼런스 다.

• 따라서 a와 b 자체는 다를 수 밖에 없다.

• a와 c 에서 true 값이 나오는건, 변수 c 가 레퍼런스 객체 a 를 가리키고 있기 때문

객체 프로퍼티와 메서드

객체 프로퍼티

• 모든 JS 객체는 Object 객체와 Object.prototype 객체의 모든 프로퍼티를 상속 받는다.

• ptorotype 프로퍼티 를 이용하면 현재 존재하는 프로토타입에 새로운 프로퍼티나 메서드를 손쉽게 추가할 수 있다.

객체 메서드

• 모든 객체는 Object를 상속 받으므로 만들지 않아도 사용할 수 있는 함수가 몇가지 존재한다. 아래가 대표적인 함수.

  1. hasOwnProperty()

     • 특정 프로퍼티가 해당 객체에 존재하는지를 검사한다.

  2. propertyIsEnumerable()

     • 특정 프로퍼티가 해당 객체에 존재하고, 열거할 수 있는지를 검사한다.

     • 열거할 수 있는 프로퍼티른 내부적으로 enumerable 플래그 가 true로 설정된 프로퍼티

  3. isPrototypeOf()

     • 특정 객체의 프로토타입 체인에 현재 객체가 존재하는지를 검사

  4. isExtensible()

     • 객체에 새로운 프로퍼티를 추가할 수 있는지의 여부를 반환

     • 기본적으로는 다 추가할 수 있지만, preventExtensions 메서드를 사용하여 불가능으로 만들수도 있음

  5. toString()

     • 메서드를 호출한 객체의 값을 문자열로 반환

  6. valueOf()

     • 특정 객체의 원시 타입의 값을 반환

getter와 setter 메서드의 정의

• 단순 값을 지닌 데이터 프로퍼티와는 달리 접근자 프로퍼티 라고 부른다.

• 조금 나중에 알아보자.