[PoiemaWeb] 객체

1. 객체란

• 자바스크립트는 객체기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 "모든 것"이 객체이다. 원시 타입을 제외한 모든 값들(함수,배열, 정규표현식 등)은 모두 객체이다.
• 자바스크립트의 객체는 키와 값으로 구성된 프로퍼티들의 집합니다. 
• 자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있다. 따라서 프로퍼티 값으로 함수를 사용할 수도 있으며 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라 부른다.
• 자바스크립트의 객체는 객체지향의 상속을 구현하기 위해 "프로토타입"이라고 불리는 개체의 프로퍼티와 메소드를 상속받을 수 있다. 

  1.1 프로퍼티

    프로퍼티는 프로퍼티 키(이름)와 프로퍼티 값으로 구성된다. 프로퍼티는 프로퍼티 키로 유일하게 식별할 수 있다.
    즉, 프로퍼티 키는 프로퍼티를 식별하기 위한 식별자다. 

• 프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 symbol 값
• 프로핕 값 : 모든 값

    프로퍼티 키에 문자열이나 symbol 값 이외의 값을 지정하면 암묵적으로 타입이 변환된어 문자열이 된다.

    이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다.

 

2. 객체 생성 방법

  2.1 객체 리터럴

• 가장 일반적인 자바스크립트의 객체 생성 방식
• 중괄호( {} ) 를 사용하여 객체를 생성하는데 {} 내에 1갱 이상의 프로퍼티를 기술하면 해당 프로퍼티가 추가된 객체를 생성할 수 있다. {}내에 아무것도 기술하지 않으면 빈 객체가 생성된다.

  2.2 Object 생성자 함수

• new 연산자와 object 생성자 함수를 호출하여 빈 객체를 생성할 수 있다.
• 생성자(constructor) 함수란 new 키워드와 함께 객체를 생성하고 초기화하는 함수를 말한다.
• 생성자 함수를 통해 생성된 객체를 인스턴스(instance)라 한다. 
• 자바스크립트는 Object 생성자 함수 이외에도 String, Number, Boolean, Array, Date, RegExp 등의 빌트인 생성자 함수를 제공한다.
• 일반 함수와 생성자 함수를 구분하기 위해 생성자 함수의 이름은 파스칼 케이스(PascalCase)를 사용하는 것이 일반적이다.

  2.3 생성자 함수

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

• 생성자 함수 이름은 일반적으로 대문자로 시작한다. 이것은 생성자 함수임을 인식하도록 도움을 준다.
• 프로퍼티 또는 메소드명 앞에 기술한 this는 생성자 함수가 생성할 인스턴스를 가리킨다.
• this에 연결(바인딩)되어 있는 프로퍼티와 메소드는 public(외부에서 참조 가능)하다.
• 생성자 함수 내에서 선언된 일반 변수는 private(외부에서 참조 불가능)하다. 즉, 생성자 함수 내부에서는 자유롭게 접근이 가능하다 외부에서는 접근할 수 없다.

 

3. 객체 프로퍼티 접근

  3.1 프로퍼티 키

• 프로퍼티 키는 일반적으로 문자열(빈 문자열 포함)을 지정한다. 또한 문자열 타입의 값으로 수렴될 수 있는 표현식도 가능하다. 
• 프로퍼티 키는 문자열이므로 따옴표('' 또는 "")를 사용한다.
• 자바스크립트에서 사용 가능한 유효한 이름인 경우, 따옴표를 생략할 수 있다. 반대로 말하면 사용 가능한 유효한 이름이 아닌 경우, 반드시 따옴표를 사용하여야 한다.

• 프로퍼티 키 first-name에는 반드시 따옴표를 사용해야 하지만 first_name에는 생략 가능하다. first-name은 자바스크립트에서 사용 가능한 유효한 이름이 아니라 '-' 연산자가 있는 표현식이기 때문이다.
• 예약어를 프로퍼티 키로 사용하여도 에러가 발생하지 않는다. 하지만 에상치 못한 에러가 발생할 수 있으므로 예약어를 프로퍼티 키로 사용해서는 안된다.

  3.2 프로퍼티 값 읽기

• 객체의 프로퍼티 값에 접근하는 방법은 마침표(.) 표기법과 대괄호([]) 표기법이 있다.
• 프로퍼티 키가 유효한 자바스크립트 이름이고 예약어가 아닌 경우 프로퍼티 값은 마침표 표기법, 대괄호 표기법 모두 사용할 수 있다.
• 프로퍼티 이름이 유효한 자바스크립트의 이름이 아니거나 예약어인 경우 프로퍼티 값은 대괄호 표기법으로 읽어야 한다. 대괄호 내에 들어가는 프로퍼티 이름은 반드시 문자열이어야 한다.

  3.3 프로퍼티 삭제

• delete 연산자를 사용하면 객체의 프로퍼티를 삭제할 수 있다. 이때 피연산자는 프로퍼티 키이어야 한다.

  3.4 for-in 문

• for-in 문을 사용하면 객체(배열 포함)에 포함된 모든 프로퍼티에 대해 루프를 수행할 수 있다.

• for-in 문은 객체의 문자열 키를 순회하기 위한 문법이다. 배열에는 사용하지 않는 것이 좋다.
• for-in 문은 객체의 프로퍼티를 순회하기 위해 사용하고 for-of 문은 배열의 요소를 순회하기 위해 사용한다.

 

4. Pass-by-reference

object type을 객체 타입 또는 참조 타입이라 한다. 참조 타입이란 객체의 모든 연산이 실제값이 아닌 참조값으로 처리됨을 의미한다. 원시 타입은 값이 한번 정해지면 변경할 수 없지만, 객체는 프로퍼티를 변경, 추가, 삭제가 가능하므로 변경 가능한 값이라 할 수 있다.

 

따라서 객체 타입은 동적으로 변화할 수 있으므로 어느 정도의 메모리 공간이 확보해야 하는지 예측할 수 없기 때문에 런타임에 메모리 공간을 확보하고 메모리 힙 영역(Heap Segment)에 저장된다.

• foo 객체를 객체 리터럴 방식으로 생성하였다. 이때 변수 foo는 객체 자체를 저장하고 있는 것이 아니라 생성된 객체의 참조값(address)를 저장하고 있다.
• 변수 bar에 변수 foo의 값을 할당하였다. 변수 foo의 값은 생성된 객체를 가리키는 참조값이므로 변수 bar에도 같은 참조값이 저장된다. 즉, 변수 foo, bar 모두 동일한 객체를 참조하고 있다.
• 참조하고 있는 객체의 val값이 변경되면 변수 foo,bar모두 동일한 객체를 참조하고 있으므로 두 변수 모두 변경된 객체의 프로퍼티 값을 참조하게 된다.
• 객체는 참조(Reference) 방식으로 전달된다. 결코 복사되지 않는다.

• 이 경우 변수 foo와 변수 bar는 비록 내용은 같지만 별개의 객체를 생성하여 참조값을 할당하였다. 따라서 변수 foo와 변수 bar의 참조값(address)는 동일하지 않다.
• 변수 baz에는 변수 bar의 값을 할당하였다. 결국 변수 baz와 변수 bar는 동일한 객체를 가리키는 참조값을 저장하고 있다. 따라서 변수 baz와 변수 bar의 참조값은 동일하다.

 

5. Pass-by-value

원시 타입은 값으로 전달된다. 즉, 값이 복사되어 전달된다. 이를 pass-by-value(값에 의한 전달)라 한다.

원시 타입은 값이 한번 정해지면 변경할 수 없다. 또한 이들 값은 런타임(변수 할당 시점)에 메모리의 스택 영역(Stack segment)에 고정된 메모리 영역을 점유하고 저장된다.

아래 콘솔(a,b)결과가 1   10 이 아니라  10   1 이 되어야 한다.

• 변수 a는 원시 타입인 숫자 타입 1을 저장하고 있다. 원시 타입의 경우 값이 복사되어 변수에 저장된다.
  즉, 참조 타입으로 저장되는 것이 아니라 값 자체가 저장되게 된다.
• 변수 b에 변수 a를 할당할 경우, 변수 a의 값 1은 복사되어 변수 b에 저장된다.

 

6. 객체의 분류

• Built-in object(내장 객체)는 웹페이지 등을 표현하기 위한 공통의 기능을 제공한다. 웹페이지가 브라우저에 의해 로드되자마자 별다른 행위없이 바로 사용이 가능하다.
• Standard Built-in objects(표준 빌트인 객체)를 제외한 BOM과 DOM을 Native Object라고 분류하기도 한다.
  또한 사용자가 생성한 객체를 Host Object(사용자 정의 객체)라 한다.
• Host Object(사용자 정의 객체)는 사용자가 생성한 객체들이다. constructor 혹은 객체리터럴을 통해 사용자가 객체를 정의하고 확장시킨 것들이기 때문에 Built-in Object와 Native object가 구성된 이후에 구서된다.