#javascript의 객체

1) prototype 기반의 언어

java와 c++은 클래스(class) 기반의 객체지향 언어인 반면, javacript는 prototype기반의 객체지향 언어입니다.

class 기반의 객체지향 언어는 class라는 껍데기를 정의하고 이를 통해 객체를 생성합니다.

그러나 prototype 기반의 객체지향 언어는 class 정의 없이도 객체를 생성할 수 있습니다.

( 생성자 함수를 통해 class를 따라할 수 있으며, ES6부터는 Class가 추가되었습니다. )

2) 캡슐화와 상속 지원

객체지향 프로그래밍에서 중요한 특징 중 하나는 캡슐화와 상속이라는 개념입니다.

javascript는 class가 없어도 캡슐화와 상속을 지원합니다.

캡슐화는 클로저를 통해, 캡슐화는 Prototype을 통해 가능합니다.

( 클로저에 대한 내용은 여기를, Prototype에 대한 내용은 여기를 참고해주세요 ! )

3) 프로퍼티와 값의 모임

javascript에서 객체는 { }라는 울타리 안에서 프로퍼티와 값을 쌍으로 하는 집합의 모임입니다.

이제부터 나올 예제들을 보면서 살펴보도록 하겠습니다.

출처: https://victorydntmd.tistory.com/51 [victolee]

dd

var objectMadeByLiteral = {};
var objectMadeByConstructor = new Object();

다른 객체지향언어의 관점에서 위의 코드는 Object객체의 인스턴스를 만든것에 불과하므로 상속받았다고 표현하기는 힘듬 그러나 자바스크립트에서는 다른 개념으로 봐야한다.

지금 만들어진 객체가 Object타입의 인스턴스 객체인 것도 맞지만 프로토타입을 이용한 상속을 지원하는 자바스크립트에서는 Object생성자의 프로토타입을 상속받은 객체라고 표현하는게 저 정확한 표현이다.

사실 상속이라는 표현도OOP의 관점에서 사용하는 단어로 표현한것일 뿐 실제로는 링크드리스트 형태의 참조를 통한 객체끼리의 연결에 가깝고 클래스 메커니즘 처럼 정적이지 않고 매우 동적이다.

이런 동적인 연결이 좋다는 뜻은 아니다. 상속 구조의 변경이 언어나 엔진 차원에서 아무 제약이 없다 보니 약속된 컨벤션 규칙 혹은 안티 패턴에 대한 이해가 없어 제대로 사용하지 않았을 때는 헬게이트가 열리게 되는 단점이기도 하다.

https://meetup.toast.com/posts/104

오브젝트 왜 알아야하나?

자바스크립트 자체가 객체기반으로 돌아가는 스크립트 언어이므로 모든것이 오브젝트 기반으로 만들어진다. 그러므로 오브젝트를 이해 못하면 Javascript코드를 이해할 수 없음.

프로그래밍 세계에서의 오브젝트란

데이터(주채)와 그 데이터에 관련되는 동작(절차,방법,기능)을 모두 포함하고 있는 개념 자신의 정보를 가지고 있는 독립적인 주체

오브젝트는 껍데기다 알맹이는 프로퍼티와 메소드

오브젝트는 껍데기를 이루는 말이고 객체를 완성하는 구성요소들은 프로퍼티와 메소드가 있다.

오브젝트(프로퍼티,메소드)

요런 이미지 고로 오브젝트를 이해한다는것은 오브젝트안에 있는 프로퍼티와 메소드도 이해해야한다는 얘기

프로퍼티

ECMA5에서 프로퍼티는 객체의 일부로 이름과 값 사이 연결을 의미 라고 정의 한다.

객체의 속성을 나타내는 접근 가능한 이름과 활용 가능한 값을 가지는 특별한 형태라고도 말할 수 있다.

특정객체가 가지고 있는 정보를 품고 있기에 그 객체가 가진 정보에 직접적으로 접근할 수 있게 해주기 때문이다

메소드(method)

메소드는 객체가 가지고 있는 동작이다. 일반적으로 함수를 담은 프로퍼티를 메소드라고 부른다

메소드 vs 함수

이 동작이란 의미에서 함수와 메소드를 구분하지 못하는 분들도 많다. 기본적으로 함수와 메소드가 서로 일련의 동작을 실행한다는 점에서 동일하기 때문이다. 하지만 메소드와 함수는 엄연하게 서로 다른 녀석이다. 메소드와 함수의 차이가 무엇인지 궁금한 분을 위해 잠깐 그 차이를 설명하고 넘어가겠다

메소드는 위에서 설명하였듯이 객체가 가지고 있는 동작이다. 메소드를 수행하기 위해서는 객체를 통해서 해당 메소드를 수행하여야 한다. 즉 그 동작을 수행하는 주체는 객체이며 그 동작을 수행하기 위해서는 객체에게 그 동작을 수행하라고 지시해야 한다. 함수는 그 동작을 수행하기 위해 객체에게 어떤을 동작을 수행하라고 명령하지 않아도 된다. 그이유는 함수자체가 그 동작을 정의한 함수객체이기 때문에 자기 자신을 수행하는 것이다. 함수객체라는 것에 대해서는 이후에 자세히 설명하도록 하겠다. 어찌 되었건 메소드는 객체를 움직이는 동작이며 그 동작을 수행하기 위해서 객체의 정보를 담고있는 프로퍼티를 사용할수 있다.

var foo={};
foo.a=1;
foo.b=2;
foo.sum=function() {console.log(foo.a+foo.b);};
foo.sum();
> 3

자바스크립트에서 사용되는 메서드는 다른 언어와 다른 재미있는 특징을 가지고 있다. Java와 같은 class 기반 객체생성 모델의 언어를 다루던 사람이라면** 메소드는 단지 meta data 일뿐이며 객체 에 속한 동작에 대한 선언일 뿐일 것이다. 하지만 자바스크립트는 다르다. 자바스크립트에서의 메소드는 각각 개별 객체로 존재 한다. 그 사용법은 동일하지만 객체에 속한 메타 데이터를 사용하는 것이 아닌 그 객체로 부터 파생되어 확장된 새로운 객체를 사용하는 것이다.

객체란 결국 껍데기를 이루는 말이고 객체를 완성하는 구성요소들은 프로퍼티와 메소드이기 때문이다.

객체에 대해 다루게 될때 프로퍼티와 메소드에 대한 이해가 없으면 객체를 이해할수 없다. 객체란 것은 결국 껍대기를 이루는 말이고 실제 객체를 완성하는 구성요소들은 이 프로퍼티와 메소드이기 때문이다. 즉 우리가 객체라고 부르는 것은 컴퓨터 케이스다 실제 컴퓨터를 구성하고 있는 것은 메모리,보드,파워서플라이,디스크등등을 안에 포함하고 있기에 우리는 그것을 쓸모있는 객체로서 컴퓨터 케이스를 가리키며 컴퓨터라고 부를수 있는 것이다. 그래서 자바스크립트의 객체를 다루기 전에 가장 먼저 프로퍼티와 메소드에 대해 알아보겠다.

Javascript에서 오브젝트란?

큰 개념은 프로그래밍에서 말하는 오브젝트와 다르지 않다. 오브젝트를 다루는 방법은 기존 개념과 차이가 있다.

자바스크립트의 객체(Object) 구성

자바스크립트 세계에서 이하와 같은 3가지 종류의 오브젝트가 있다.

Built-in Object(자바스크립트 내장객체)
Native Object(브라우져 내장 객체)
Host Object(사용자 정의 객체)

1. Built-in Object(자바스크립트 내장객체)

Built-in Object 에는 Global,Object, String, Number, Boolean, Date, Array, Math, RegExp, Error 등 많은 내장객체들이 있다. 이들은 자바스크립트 엔진이 구동되는 시점에서 바로 제공되며 자바스크립트코드 어디에서든 사용이 가능하다.

2. Native Object(브라우져 내장 객체)

Native Object 역시 자바스크립트가 구동되는 시점에서 바로 사용이 가능한 객체 들이다. 하지만 이들은 자바스크립트 엔진이 구성하는 기본객체라고 하기 보단 브라우져 즉 자바스크립트 엔진을 구동하는 녀석들에서 빌드되는 객체 들이다. 자바스크립트 프로그램을 작성하면서 사용하는 브라우져객체모델(BOM)과 문서객체모델(DOM)들이 이에 속한다. 이 객체들은 Built-in Object 가 구성된후에 구성된다. 이 Native Object역시 내장객체이다. Built-in Object와 동일하게 자바스크립트 구동시점부터 바로 사용가능 하다. 하지만 이들을 굳이 Native Object 라 분류한 이유는 브라우져마다 이 Native Object 를 사용함에 있어서 그 구성을 달리하는 경우가 있기 때문이다.

3. Host Object(사용자 정의 객체)

Host Object 는 말그대로 사용자가 생성한 객체 들이다. constructor 혹은 객체리터럴을 통해 사용자가 객체를 정의하고 확장시킨 녀석들이기 때문에 Built-in Object 와 Native Object가 구성된 이후에 구성되어 진다.

자바스크립트의 객체(Object) 생성

자바스크립트에서 객체를 생성하는 방법은 크게 2가지로 나누어 진다. constructor 를 이용하여 생성하는 방식과 객체 리터럴을 이용하는 것이다. 객체리터럴을 이용한 방식은JSON(Java-Script Object Notation) 을 이용하여 표현 한다.

/* constructor 를 사용하여 객체를 생성하는 예 */
var foo = new Object(); //
foo.name='foo';
console.log(foo.name);
> foo

/* JSON 방식을 사용하여 객체 리터럴 */
var foo = {
    name : 'foo'
};
console.log(foo.name);
> foo

오브젝트 관련 재밌는 사실1

자바스크립트에서 생성되는 객체들에게는 재미있는 사실 몇 가지가 포함되어 있다. 자바스크립트에서 생성하는 모든 객체는 Object 객체에서 파생되어 나온 객체들이란 것과 이들은 암묵적으로Array 객체를 상속한다는 것이다.

이 둘은 객체를 생성하는 방법이라는 관점에서는 동일하지만 객체의 사용이라는 방식에서는 차이가 있다. JSON 방식을 이용하면 객체리터럴이기에 단일 객체로만 활용 된다. 하지만 constructor 를 이용하면 동일한 구성을 가진 객체를 여러개 만들어 낼수 있다.

Object 객체가 가진 특별한 구성요소들

constructor, prototype 이라는 프로퍼티와 hasOwnProperty(), toString(), isPrototypeOf() 라는 메소드들

Object 객체라는 최상위 객체를 껍대기로 파생되는 객체들은 Object 객체가 가지고 있는 기본적인 구성요소를 상속받게 된다. 사실 자바스크립트의 모든 객체가 자유롭게 확장될수 있는 이유도 Object 객체가 가진 특별한 구성요소 때문이다

Obejct(객체)의 배열 상속

아마 지금부터 나오는 내용은 너무나도 큰 충격으로 다가올수도 있다. 자바스크립트의 객체는 곧 배열이다. 지금까지 객체에 대해 감 나와라 콩 나와라 설명해놓고 이제와서 객체가 곧 배열이다 라는 개소리를 하는 나 자신도 충격적이다. 하지만 이는 명백한 사실이다. 이를 증명할수 있는 방법은 많다. 가장 간단한 방법은 객체의 메소드는 객체 안에 존재하지 않는다. 메소드를 소유한 parent 객체는 객체에 포함된 메소드들의 참조값만을 가지고 있다. 즉 메소드들 자체도 각각 개별 객체로서 존재한다. 이 내용은 prototype을 다루면서 더 자세히 설명하겠다. 또한가지 방법은 Object Notation 이다. JSON의 key, value 방식의 객체 리터럴 구조는 프로그래밍 언어를 공부한 사람은 누구나 아는 배열 구조와 동일 하다. 특히 php 와 같은 스크립트 언어의 배열을 봐왔던 사람들은 더더욱 그럴것이다. 즉 JSON의 표현방식은 [] 라는 Array 표현의 다른 방식일 뿐이다. 실제로 객체의 프로퍼티 생성이나 참조에서 . 연산자가 아닌 []를 사용 할수도 있다.

var foo = {name:'foo'};
console.log(foo['name']);
> foo

즉 객체는 자기 자신을 이루는 요소들을 저장한 배열들의 집한체이며 이들은 chain 이라는 연결 구조를 가지고 있다.

자바스크립트의 객체의 특징

자바스크립트 객체는 프로퍼티를 갖는다. 그리고 프로퍼티는 데이터프로퍼티와 접근자프로퍼티 두 종류가 있다. 자바스크립트 객체는 메소드를 갖는다. 숫자, 문자열, 불린값, null, undefined 같은 기본 타입을 제외한 모든 값은 객체다. (함수, 배열, 정규표현식 등) 클래스라는 개념이 없다.(java, c++와의 객체와 약간 생성, 사용방법이 다르다.) 자바스크립트 객체는 참조타입이다.

https://blog.hanumoka.net/2017/08/31/javascript-20170831-javascript-Object-1/

모든 자바스크립트 객체는 Object 객체와 Object.prototype 객체의 모든 프로퍼티를 상속받습니다. prototype 프로퍼티를 이용하면 현재 존재하는 프로토타입에 새로운 프로퍼티나 메소드를 손쉽게 추가할 수 있습니다.

모든 자바스크립트 객체는 Object 객체와 Object.prototype 객체의 모든 프로퍼티와 메소드를 상속받습니다.

자주 사용되는 대표적인 객체 메소드는 다음과 같습니다.

hasOwnProperty()
propertyIsEnumerable()
isPrototypeOf()
isExtensible()
toString()
valueOf() http://tcpschool.com/javascript/js_object_propertyMethod

자바스크립트의 객체의 특징

바스크립트는 native로 Object라는 객체를 제공하고 있습니다.

Object는 자바스크립트의 가장 최상위 객체로써,

자바스크립트의 모든 객체는 Object의 프로토타입을 참조합니다.

var obj1 = {}; var obj2 = new Object(); 다음 두 객체는 같은 object의 prototype을 참조합니다.

Reference Link:

http://insanehong.kr/post/javascript-object/
https://blog.hanumoka.net/2017/08/31/javascript-20170831-javascript-Object-1/
https://moonscode.tistory.com/9?category=744351