[Javascript] 객체

1. 객체(Object)란?

객체(Object)란 물리적으로 존재하거나 추상적으로 생각할 수 있는 것 중 속성을 가지고 있는 것을 의미합니다. 쉽게 얘기해서 실생활에서 쉽게 볼 수 있는 사물들이라고 생각하면 됩니다.

 

let cat = { state: '귀엽다' };

 

객체는 데이터를 의미하는 프로퍼티(property)와 데이터를 참조하고 조작할 수 있는 동작(behavior)을 의미하는 메소드(method)로 구성된 집합입니다. 객체는 데이터(프로퍼티)와 그 데이터에 관련되는 동작(메소드)을 모두 포함할 수 있기 때문에 데이터와 동작을 하나의 단위로 구조화할 수 있어 유용합니다.

 

자바스크립트의 객체는 객체지향의 상속을 구현하기 위해 “프로토타입(prototype)”이라고 불리는 객체의 프로퍼티와 메소드를 상속받을 수 있습니다. 이 프로토타입은 타 언어와 구별되는 중요한 개념입니다.

 

1.1 속성(Property)

콤마로 구분되는 것을 객체의 속성이라고 합니다. 자바스크립트의 객체는 키(key)과 값(value)으로 구성된 속성(Property)들의 집합입니다.

속성은 속성 키로 유일하게 식별할 수 있습니다. 즉, 속성 키는 속성을 식별하기 위한 식별자(identifier)입니다.

 

1.2 객체의 특징

• 프로퍼티 키에 문자열이나 symbol 값 이외의 값을 지정하면 암묵적으로 타입이 변환되어 문자열이 됩니다. 이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어씁니다.
• 배열과는 달리 객체는 프로퍼티를 열거할 때 순서를 보장하지 않습니다.
• Key는 문자열 또는 기호여야 하며, Value는 모든 유형이 될 수 있습니다. 심지어 객체나 함수여도 상관 없습니다! (이렇게 만들어진 속성 값이 함수라면 메소드라는 용어로 따로 부르게 됩니다.)

2. 객체 생성 방법

자바와 같은 클래스 기반 객체 지향 언어는 클래스를 사전에 정의하고 필요한 시점에 new 연산자를 사용하여 인스턴스를 생성하는 방식으로 객체를 생성합니다. 하지만, 자바스크립트는 프로토타입 기반 객체 지향 언어로서 클래스라는 개념이 없고 별도의 객체 생성 방법이 존재합니다.

2.1 객체 리터럴

가장 위에 작성된 코드와 같이 중괄호를 사용하여 객체를 생성합니다. 클래스 기반 객체 지향 언어와 비교하면 매우 간편하게 객체를 생성할 수 있습니다. 중괄호 내에 1개 이상의 프로퍼티를 기술하면 해당 프로퍼티가 추가된 객체를 생성할 수 있습니다. 아무것도 기술하지 않으면 빈 객체가 생성됩니다.

2.2 Object 생성자 함수

new 연산자와 Object 생성자 함수를 호출하여 빈 객체를 생성할 수 있습니다. 빈 객체를 생성한 다음 속성 또는 메소드를 추가하여 객체를 완성하는 방법입니다.

 

객체가 소유하고 있지 않은 속성 키에 값을 할당하면, 해당 객체에 속성을 추가하고 값을 할당합니다. 이미 존재하는 속성 키에 새로운 값을 할당하면 속성 값은 할당한 값으로 변경됩니다.

 

2.3 생성자 함수

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

 

생성자 함수를 사용하면 유사한 객체 여러 개를 생성할 수 있습니다.

 

생성자 함수를 생성 하기 전, 아래의 두 가지 규칙을 지켜야 합니다.

1. 함수 이름의 첫 글자는 대문자로 시작해야 합니다.
2. 반드시 new 연산자를 붙여서 실행해야 합니다.

new User(...)를 써서 함수를 실행하면 다음과 같이 동작합니다.

1. 빈 객체를 만들어 this에 할당합니다.
2. 해당 함수를 실행합니다. this에 새로운 속성을 추가해 this를 수정합니다.
3. this를 반환합니다.

생성자 함수는 재사용할 수 있는 객체를 생성하는데 여러 번 작성하지 않아도 됨으로써 의의를 가집니다.

모든 함수는 생성자 함수가 될 수 있습니다. new를 붙어 실행하면 어떤 함수라도 위에 작성된 코드와 같은 방식으로 작동합니다.

 

Reference

https://tcpschool.com/javascript/js_object_concept

코딩교육 티씨피스쿨

https://ko.javascript.info/object