신기한 연구소

안녕하세요. 신기한 연구소입니다.

자바스크립트는 프로토타입(prototype) 기반 언어입니다.

무슨 의미일까요?

프로토타입(prototype)을 사용해서 객체지향 언어처럼 상속을 할 수 있습니다.

이건 또 무슨 의미일까요?

자바스크립트 개발자(프로그래머)라면 당연히 이해하고 알아야 하는 

프로토타입(prototype)에 대해 알아봅니다.

프로토타입(prototype)이 무엇인지 정말 궁금해지는데요.

프로토타입(prototype)에 대해 알아봅니다.

상속이란?

Object <- 객체1

Object <- 객체1 <- 객체2 <- 객체3

Object <- 객체4

모든 객체는 Object를 시작으로 상속을 받습니다. 물려받는다는 의미입니다.

객체 3이 객체 2를 상속받아 만들어졌다고 해도 결국 상위로 상속을 따라가면 마지막에

Object를 만나게 됩니다.

다른 표현으로 모든 객체는 Object를 상속받습니다.

상속은 물려받는다는 의미입니다.

Object는 객체에 필요한 기본적인 구성들을 가지고 있습니다.

그리고 객체는 그 구성들을 상속받아서 사용할 수 있습니다.

프로토타입(prototype)이란?

상속해 줄 구성들을 꾸러미에 묶어두는데 그것이 바로 프로토타입(prototype)입니다.

그렇게 구성된 꾸러미도 객체입니다. 즉 프로토타입(prototype)도 객체입니다.

새로 생성된 객체는 상위 객체의 꾸러미를 받습니다.

그 꾸러미는 [[Prototype]]에 보관되고 누구한테 받았는지는

__proto__에 그 정보가 있습니다.

Object와 함수 객체는 생성자(constructor) 가지고 있으며

그 생성자는 prototype 속성에 포함됩니다.

프로토타입(prototype) 속성이란?

프로토타입 속성은 객체를 생성할 수 있는 객체가 가지는 prototype 속성이 있습니다.

prototype 속성은 최상위인 Object와 함수 객체에 속성으로 포함되어 있습니다.

Object.prototype을 확인해보겠습니다.

함수 객체도 확인해보겠습니다.

이렇게 객체를 생성할 수 있는 객체는 prototype 속성을 가지고 있으며

그 꾸러미(내부)에는 물려줄 내용들(속성과 메서드)이 기록되어 있습니다.

[[Prototype]](__proto__) 속성이란?

모든 객체는 __proto__ 속성을 가지고 있습니다.

지금은 [[Prototype]]으로 표기되며 그 내부에 __proto__속성으로 상위 객체 정보를 가지고 있습니다.

예를 들어 보겠습니다.

function NewObj(){}라는 함수가 있습니다. 

이 함수는 이름을 대문자로 시작해서 생성자용이라고 사용자에게 알려줍니다.

 "소문자로 시작해도 생성자로 사용할 수 있습니다.

그냥 편의상 대문자로 생성자임을 알려주는 것입니다."

NewObj는 prototype이라는 속성(property)을 가지고 있고 prototype에는

새로운 객체를 생성할 때 사용하는 constructor 함수(생성자)를 가지고 있습니다.

이 생성자 함수로 새로운 객체를 생성하면 prototype 꾸러미를 [[Prototype]]에 받습니다.

[[Prototype]]은 상속받은 정보를 담아두는 바구니입니다.그 바구니에 보면 어디서 받았는지 __proto__에 보관되어 있습니다.

no 객체를 new NewObj()로 생성했습니다.

위 2개의 이미지를 보면 3번째 라인부터 함수 객체와 같은 모양의 구성이 보입니다.

상속 받은 것이지요.

__proto__속성으로 다시 확인해보겠습니다.

역시 같은 구조가 보입니다.

위 이미지를 보면 아래서 3번째 속성이 __proto__인데요.

(...)을 클릭하면 누구한테 상속받은 지 표현됩니다.

(...)을 클릭하니 Object가 나옵니다.

함수 NewObj()는 Object를 상속받았다는 의미입니다.

그리고 그 내부의 __proto__(...)을 클릭하면 null이 나옵니다.

최상위 Object이기 때문입니다.

프로토타입 체인 (prototype chin)이란?

위 예제를 보면 현재 객체가 어떤 객체로 상속을 받았는지 확인할 수 있다고 했습니다.

Object <- 함수객체 <- 객체

이 구성을 가지고 설명해보겠습니다.

객체의 __proto__는 함수객체가 저장되어 있습니다.

함수객체의 __proto__는 Object가 저장되어 있습니다.

Object의 __proto__는 null입니다.

함수객체은 Object.prototype으로 상속받아 생성되었습니다.

객체는 함수객체.prototype으로 상속받아 생성되었습니다.

이렇게 prototype을 사용해서 연결고리를 갖고 추적할 수 있습니다.

바로 prototype chain이라고 합니다. (프로토타입 체인)

정리

모든 객체는 Object를 상속받는다.

모든 객체는 자기 부모가 누구인지 추적할 수 있는 체인을 가지고 있고 그 정보는 __proto__에 담겨 있다.

모든 객체는 생성자 또는 Object의 prototype 속성을 통해 상속받는다.Object와 생성자 함수는 상속해 줄 정보가 담긴 prototype 속성을 가지고 있다. 일반 객체는 prototype 속성은 없고 [[Prototype]] 또는 __proto__ 속성은 필수로 가지고 있다.prototype은 주기 위한 속성이고 [[Prototype]] 또는 __proto__는 받기 위한 속성이다.

지금까지 자바스크립트 프로토타입(prototype)에 대해 알아봤습니다.개발자(프로그래머)는 정말 공부할 것이 많습니다.이해하고 사용하는 멋진 개발자(프로그래머)가 되기를 바랍니다.

안녕하세요. 신기한 연구소입니다.

자바스크립트의 꽃 중의 하나로 객체(Object)가 있습니다. 

객체는 무엇이고 어떻게 만들고 사용하는지 이제 같이 살펴보겠습니다.

객체(Object)는 무엇인가?

객체(Object)는 관련된 데이터와 메서드(기능, 함수)의 집합이라고 할 수 있습니다.

데이터는 프로퍼티(property), 기능은 메서드(method)이며 객체를 구성하고 있는 멤버들입니다.

실제 객체를 만들어보겠습니다.

변수처럼 정의하고 초기화하면 된답니다.

animal 객체를 생성했습니다.

선언하고 초기화를 했습니다. 객체 내부에는 프로퍼티나 메서드는 아직 없습니다. 콘솔에서 animal을 입력하면 {}가 출력됩니다.

따라 해 봤나요?

객체 생성이 어렵지는 않지요?

그러면 속성(property)과 메서드(method)를 추가한 객체를 다시 생성해보겠습니다.

tiger와 lion을 배열로 가지고 있는 name 속성이 정의되었습니다.

개수는 count로 animalList는 메서드로 정의되었습니다.

속성과 메서드가 포함된 객체를 만들었습니다. 속성은 단순한 문자열 값뿐만 아니라 배열, 숫자 등도 가능합니다. 객체의 속성은 키/값 구조로 콜론(키:값)으로 매칭 합니다. 다음 속성 또는 메서드를 지정하려면 콤마(,)로 구분합니다. 접근하는 방법은 아래와 같습니다.

함수로 만든 메서드는 좀 더 간편하게 만들 수 있습니다.

animalList: function ()는 animal()로 변경할 수 있습니다.

짧은 구문으로 변경했지만 정말 잘 작동합니다.

지금 객체는 변수 선언 및 초기화처럼 직접 다 코딩했습니다.

이렇게 {}를 사용해서 내부에 속성과 메서드를 구성하면 객체가 됩니다.

{}와 그 내부의 속성과 메서드는 객체 리터럴이라고 합니다.

화면이든 데이터베이스든 어디서든 값을 받아 와서 전송하려는 경우는 객체 리터럴로 객체를 만들어 보내는 것이 일반적입니다.

점으로 속성 및 메서드 접근하기.

점은 다른 프로그래밍 언어에서도 자주 사용합니다.

위 예시에서도 보면 객체의 속성이나 메서드에 접근하기 위해서

점(.)을 사용했습니다.

animal.count;animal.animalList();

객체의 속성도 객체가 가능.

위의 예시를 보면 name 속성에 배열 값이 들어간 것을 알 수 있습니다.

배열도 객체이거든요.

배열 값을 하나씩 꺼내서 객체의 키/값으로 변경할 수도 있습니다. 변수처럼요.

다음 예시를 보겠습니다.

재 구현하고 선언된 객체 내의 속성이 또 객체인 경우 호출하는 방법을 보여줍니다.

위 예시는 배열에서 객체로 name 속성을 변경했습니다.

접근하는 방법은 다음과 같습니다.

animal.name.asia;

대괄호 사용하기.

대괄호로 객체의 속성 및 메서드에 접근할 수 있습니다.

점으로 가능한데 대괄호는 왜 사용하는 걸까요?

animal.name.africa; 는

animal["name"]["africa"]; 와 같습니다.

배열과 사용법이 비슷합니다.

대괄호 안에 인덱스인지 속성 이름인지만 다를 뿐입니다.

사실 점을 사용하는 것이 더 간결하고 편해서 자주 사용합니다.

그렇다면,

점을 사용하면 간편한데 왜 대괄호로 접근하는 것이 필요할까요?

그 이유는 다음과 같으니 잘 살펴보고 활용해보세요.

myObj 빈 객체를 생성 및 초기화했습니다.

변수 key와 value를 선언 및 초기화했습니다. 바로 name과 tiboy입니다.

myObj의 name 속성을 새로 만듭니다. 바로 대괄호를 사용해서 설정합니다.

그리고 값을 매핑해서 초기화해줍니다.

myObj에 입력받은 key로 name 속성이 설정되었습니다.

이렇게 동적으로 속성을 추가할 때 유용하게 사용할 수 있습니다.

점은 불가능합니다.

key2는 'age'로 초기화했습니다.

myObj.key2 = ages를 실행하면 대괄호처럼 age라는 속성이 아닌

key2가 속성이 돼버립니다.

속성을 값으로 받아서 사용할 수 없는 구조입니다.

새로운 속성과 메서드 추가.

지금까지는 객체 리터럴로 속성과 메서드를 추가했습니다. 초기화 때 말입니다.

동적으로 속성을 추가 및 수정할 수 있습니다.

animal.myProp;

이제 animal은 myProp속성이 추가되었습니다.

정말 간단하게 추가할 수 있습니다.

객체의 this는 어떤 의미일까?

보통 this는 전역 객체를 바라봅니다.

브라우저에서는 Window를 가리킵니다.

그런데 위 예시를 보면 객체 내부 메서드에서 this를 사용하고 있습니다.

객체 내에서 this는 해당 객체를 가리킵니다.

바로 animal이 this가 됩니다.

그런데 왜? animal을 사용하지 않고 this를 사용할까요?

객체 하나를 사용할 때는 굳이 this를 사용하지 않아도 무방합니다.

하지만 같은 기능을 하는 객체를 여럿 만들어야 한다면

생성자가 필요합니다.

생성자는 프로토타입과 긴밀한 관계가 있습니다.

다음 포스팅인 프로토타입에서 생성자는 더 깊이 다뤄보겠습니다.지금까지 자바스크립트 객체에 대해 알아봤습니다.