# prototype, \[\[Prototype]] 차이

## prototype 과 \[\[Prototype]]

자바스크립트 함수는 객체다.

함수 역시 일반적인 객체의 기능에 추가로 호출됐을 때 정의된 코드를 실행하는 기능을 가지고 있다는 것이다.

일반 객체와는 다르게 추가로 **함수 객체만의 표준 프로퍼티가 정의되어 있다.** 아래와 같은 함수가 있다고 해보자.

```javascript
function add(x, y,) {
  return x + y;
}
console.dir(add);

// 더불어서 일반 객체 또한 찍어보자
let normal = {
  name: "normal",
  age: 20,
}
console.dir(normal)
```

다른건 제두고 **protorype** 만 살펴보자. 자 어떤 차이가 존재하는가?

#### 일반객체

```
age: 20
name: "a"
<prototype>: Object { … }
```

#### 함수

```
arguments: null
caller: null
length: 2
name: "add"
prototype: Object { … }
<prototype>: function ()
```

함수에는 일반객체에는 존재하지 않는 **protorype** 프로퍼티, name, caller, arguments 등이 존재한다.

### `<prototype>`== \[\[Prototype]] == `__proto__`

모든 자바스크립트 객체는 자신의 프로토타입을 가리키는 \[\[Prototype]] 을 가지고 있다.

따라서 일반 객체와 함수 이 둘도 당연히 자기 자신을 가리키는 프로토타입인 **\[\[Prototype]]** 이 존재하는 것.

자, 그럼 **함수에만 존재하는 prototype** 은 대체 무엇인가? 이 비밀을 풀기 위해서는 **생성자 함수를 알아보면 된다.**

### 생성자 함수

```javascript
function Person(name, age) {
  this.name = name;
  this.age = age;
}
sanam = new Person("sanam", 28)

console.dir(sanam)
console.dir(Person)
```

#### 생성자 함수

```
arguments: null
caller: null
length: 1
name: "Person"
prototype: {…}
    constructor: function Person(name)
    <prototype>: Object { … }
<prototype>: ()
```

#### 생성된 객체

```
name: "sanam"
<prototype>: {…}
    constructor: function Person(name)
    <prototype>: Object { … }
```

이 둘을 분석하기에 앞서 둘 모두에 존재하는 `<prorotype>` 을 살펴보자.

위에서 말했다시피 `<prototype>` **자기 자신의 프로토 타입을 가리킨다.**

한번 예상해보자. ***프로토타입이 자기 자신의 프로토타입을 가리킨다면, 생성자 함수로 생성된 객체의 프로토타입은 생성자 함수인건가?*** 아주 합리적인 의심이라고 생각한다. ***그리고 이 개념은 절반은 맞고 절반은 틀리다!!!***

### 왜 절반은 맞고 절반은 틀려?

**왜냐하면, 실제로 생성자 함수를 가리키는 건 맞지만 생성자 함수의 특정한 어떤 것을 가리키고 있기 때문이다.**

생성자 함수의 `console.dir(Person)` 을 다시보자. 일반 객체에는 존재하지 않던 프로퍼티 **prototype** 이 존재하는 걸 확인할 수 있다. **prototype** 프로퍼티를 자세히 보자. 생성된 객체의 `<prototype>` 과 뭔가 닮지 않았나?

그렇다. 생성자 함수의 프로퍼티 prototype 과 생성된 객체의 `<prototype>` 은 같다!!!

```javascript
// 출력 결과는 SAME!!!
if (sanam.__proto__ == Person.prototype) {
    console.log("SAME!!!")
}
```

### 정리

**자 이제 정리하자. 생성자 함수에 존재하는 `<prototype>` 은 생성자 함수의 프로토타입이다. 그리고 생성자함수의 프로퍼티 prototype 은 자신으로 인해 생성되는 객체의 프로토타입다!!**

책에 정리된 내용을 적어보면 이렇다.

> 모든 객체에 내부 프로퍼티로 존재하는 \[\[Prototype]] 은 객체 입장에서 자신의 부모 역할을 하는 프로토타입 객체를 가리키는 반면에, 함수 객체가 가지는 prototype 프로퍼티는 이 함수가 생성자로 사용될 때 이 함수를 통해 생성된 객체의 부모 역할을 하는 프로토타입 객체를 가리킨다.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://simian114.gitbook.io/blog/undefined/javascript/prototype-prototype.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.