[🍭JS 기초 ] : 객체 (Object)

이번 시간에는 Java Script의 객체에 대해 요약 정리해보도록 하겠습니다. 공부하면서 적은 블로그라 틀린 점이 있다면 언제든지 지적 부탁드립니다.

 

 

◆ 객체 (Object)

Java Script는 객체 지향 프로그래밍 언어이지만 엄밀히 말하자면 "프로토타입 기반의 객체지향 언어" 이다. "Class 기반의 객체지향 언어" 인 JAVA나 C 와는 조금 다른면이 있다는 것이다. Class 기반의 객체지향 언어는 객체를 생성하기 위해 (class를 생성하고, new 연산자를 사용해서 인스턴스를 생성) 하는 과정이 필요하다. 

 

다만, Java Script에서는 간단하게 몇 가지 방법을 사용해서 객체를 생성할 수 있는데 다음과 같다. 

 

1. 객체 리터럴

2. Object 생성자 함수 

3. 생성자 함수 

4. Object.create 메서드

5. 클래스(ES6)

 

객체 생성방법에 대해 자세히 알아보기 전에 우선 JS에서의 "객체"에 대해 먼저 알아보도록 하자 

 

" 객체 " 는 Key ( 프로퍼티를 식별하기 위한 일종의 ID ) 와 value (값) 로 구성된 프로퍼티(property) 들의 집합이다. 

이때 프로퍼티의 값(value)으로는 JS에서 사용할 수 있는 모든 값을 사용할 수 있는데 이때, "함수"도 1급 객체이기 때문에 값으로

사용될 수 있다. 물론 일반 함수와 구분하기 위해 객체에 제한되어 있는, 객체 안에 있는 함수를 " 메서드(method) " 라고 부른다. 

 

       * 1. [프로퍼티 값 갱신 ] : 객체가 소유하고 있는 프로퍼티 값은 후에 새로운 값을 할당하면 갱신될 수 있으니 주의하자. 

       * 2. [프로퍼티 동적 생성 ] : 객체가 소유하고 있지 않던 프로퍼티 값이라도 후에 할당해주면 해당 객체에 속해지므로 객체에 추가 
                                                         가능하다.

       *3. [프로퍼티 삭제 ] : delete 연산자를 사용해서 객체의 프로퍼티를 삭제 할 수 있다. ( Ex. delete 객체이름.프로퍼티key )

          Q : delete person; 은 안되는 거지( 객체 자체를 삭제하는거)?

 

 

// 메서드가 들어간 객체 
var person = {
    name : 'Lee',
    gender : 'male',
    sayHello: function () {
        console.log(`HI My name is ${this. name}`);
    }
};

person.name = 'Kim' //1. 프로퍼티 값 갱신 
person.age = 20; //2. 프로퍼티 동적 생성
delete person.gender; // 3. 프로퍼티 삭제

< console 출력  >

** 주의 : console.log(name); 은 Error 

 

 

 

∵ 객체 프로퍼티 접근 방식

 

참고로 *프로퍼티에 접근하는 대표적인 방식에는 " . (마침표) " 와 " [ ] (대괄호) " 표기법이 있다. 

보통 프로퍼티 key가 식별자 네이밍 키를 준수하는 경우 두 가지 모두 사용할 수 있지만 준수하지 않는 경우는 대괄호 표기법을 이용한다. 위의 코드 예시 처럼 console.log( person.name)을 통해 person 객체 안의 name 프로퍼티에 접근했다. 대괄호 표기법은 반드시 대괄호 안의 key를 " "로 감싼 문자열이어야 한다. Ex. console.log(person["name"] 

 

 

[ tip ] : 대괄호 안에 " " 를 입력하는 것을 까먹었다면 ReferenceError : ${key} is not defined 라면서 key를 찾을 수 없다는 Error가 뜨고 객체 안에 존재하지 않는 프로퍼티에 접근했다면 Undefined가 나오니 기억해두자. 

 

 

JS는 프로퍼티 key에 예약어를 사용해도 에러가 발생하지 않지만 혹시모를 어떠한 알수 없는 에러가 발생할 수 있으니 웬만해서는 사용하지 않도록 하자. 

[ 예약어 ]
abstract arguments boolean break byte

case catch char class* const

continue debugger default delete do

double else enum* eval export*

extends* false final finally float

for function goto if implements

import* in instanceof int interface

let long native new null

package private protected public return

short static super* switch synchronized

this throw throws transient true

try typeof var void volatile

while with yield
* ES6 추가된 예약어

 

 

---

◆ Java Script에서의 객체 생성방법 

 

∵ 객체 리터럴 

일반적으로 많이 사용하는 JS에서의 객체 생성 방법이다. 중괄호 " {} " 를 사용해서 객체를 생성하며 블록 안에 1개 이상의 프로퍼티를 작성하면 객체가 생성되고 블록 안에 아무것도 작성하지 않으면 빈 객체가 생성된다. 

빈 객체 :: type 은 object

 

사실 객체 리터럴 이외의 객체 생성 방식은 모두 함수를 사용해 생성한다고 생각하면 된다고 한다. (??) by Deep Dive

 

∵ Obect 생성자 함수 

new 연산자와 Object 생성자 함수를 호출해서 빈 객체를 생성할 수 있다. 빈 객체를 먼저 생성하고 이후에 프로퍼티 혹은 메소드를 추가해서 객체를 완성하는 방식이다. 

사실 거의 사용할 일은 없다고 한다. 

 

∵ 생성자 함수

객체 리터럴 방식과 Object 생성자 함수 방식은 프로퍼티 값만 다른 여러 개의 객체를 만들 때는 조금 불편하다. 예를 들어 학생들의 정보를 객체로 만들어야 하는 경우 동일한 프로퍼티 key를 갖는 객체임에도 매번 같은 프로퍼티 key를 만들어야 되서 귀찮다. 그래서 나온 것이 생성자 함수. 마치 클래스의 설정집 처럼 사용해서 간편하게 객체를 여러 개 생성할 수 있다.

 

많은 수의 객체를 한번에 만들 때 용이할 것으로 예상 된다. 생성자 함수방식으로 객체를 생성할 때 주의해야 할 사항이 몇 가지 있다.

1. 생성자 함수 이름은 보통 대문자로 작성하여 이것이 생성자 함수 임을 인식하는데 도움을 준다. ( EX. Person )
2.  this.는 생성자 함수가 생성할 "인스턴스"를 가르킨다. this.name의 name은 각 person1과 person2의 name(Lee, Kim)을 의미한다.
3. 생성자 함수 내에서 선언된 일반 변수는 private한 속성을 가지기 때문에 함수를 벗어나서 외부에서 참조를 할 수 없다.  그러나 this.에 연결 된 프로퍼티와 메소드는 public한 속성을 가지기 때문에 외부에서도 참조 가능해서 console.log로 출력이 가능하다. 

 

∵ Object.create 메서드

??? (업데이트예정)

 

∵ 클래스(ES6)

원래는 없는데 임의로 만든 함수 ( class 쓰던 개발자들이 배우기 쉬우라고 )이다. 보통은 class 없이 프로토타입 체인과 클로저 등으로 객체 지향 언어의 상속, 캡슐화(정보 은닉) 등의 개념을 구현한다. 

 

 

>> 134p : ES6에서 추가된 객체 리터럴의 확장 기능 : 추가 공부 예정 

---

참고 책 : 모던 자바스크립트 Deep Dive (이웅모 지음)

참고 사이트 : poiemaweb.com