1. 자바스크립트는 어떤 언어인가?

1-1. 객체 지향 프로그래밍 언어 (OOP : Object Oriented Programming)

• 통상적인 의미의 '객체 지향', 즉 '클래스 지향'과는 상당히 거리가 있다.

• '클래스 지향'이 클래스와 인스턴스의 관계 구현에 중점을 두었다면, 자바스크립트의 '객체 지향'은 말그대로 '객체'에만 중점을 둔다.

• 이 시리즈를 작성하는 목적은 '객체 지향'과 같은 특정 디자인 패턴을 이해하려는 것이 아니라, 자바스크립트의 작동 원리를 이해하고자 하는 것이 목적이다.

• 따라서 이 시리즈에서 언급하는 '객체 지향'은 온전히 자바스크립트의 관점에서 서술될 것이다.

자바스크립트의 객체 지향(위임)

이 시리즈에서 다루는 객체 지향의 특성은 다음과 같다.

1. 객체는 행위와 속성을 가진다.

2. 서로 다른 두 객체가 [[Prototype]]을 통해 연결될 때 이 두 객체의 관계를 '위임 관계'라고 한다.
   (물론, [[Prototype]]을 통하지 않고도 서로 다른 두 객체는 '참조'로 연결될 수 있다.
   이는 '위임 관계'에 해당하지 않는다)

3. 보다 구체적으로는 하위 차원의 객체가 [[Prototype]]을 통해 상위 차원의 객체를 '참조'한다.

4. 하위 차원의 객체에 없는 행위/속성이 상위 차원의 객체에는 있다면, 하위 차원의 객체는 [[Prototype]] chain을 타고 올라가 상위 차원의 객체에 있는 행위/속성에 접근할 수 있다.
   (이를 위임이라고 한다)

• 앞으로 이 시리즈에서는 [[Prototype]]이라는 내부 property를 기준으로 참조하는 객체를 위임객체로, 참조되는 객체를 수임객체로 부르기로 한다.
  (이렇게 부르는 이유는 시리즈의 3번째 포스팅인 [[Prototype]]에서 설명한다)

• 일반적으로 쓰이는 '클래스', '생성자', '인스턴스' 등의 용어는 최대한 사용하지 않도록 하겠다.
• 당장에는 이러한 익숙한 용어를 사용하는 것이 이해에 도움이 되는 것 같아도, 본질적으로 다른 개념이기에 처음부터 용어를 바로잡고자 하는 것이다.
• 인스턴스는 클래스가 '복사'된 것인 반면,
• 자바스크립트는 [[Prototype]]으로 서로 다른 두 객체를 연결(참조)할 뿐이다.
• 자바스크립트에는 '클래스'도 '인스턴스'도 없다.
• '객체(object)'를 제외하면 오직 기본형 데이터만이 존재할 뿐이다.

• 지금은 위의 내용이 이해가 되지 않아도 괜찮다.
  [[Prototype]]을 알아야 이해할 수 있는 내용이며, 이후 [[Prototype]] 포스팅에서 자세히 다룰 것이다.

자바스크립트에서의 객체(object)

• 자바스크립트에서는 object(객체)가 property(행위/속성)를 갖는다.

• property는 property를 식별하기 위한 name과 해당 property가 '가리키는(참조하는)' value로 구성된다.

  • property name

    • name은 말 그대로 property를 식별하기 위한 이름으로 object안에서 유일한 값을 지녀야 한다.

    • ES3에서 같은 이름의 name값을 작성할 경우 나중에 작성한 값으로 대체된다.

    • ES5 strict 모드에서 같은 이름의 name값을 작성할 경우 에러가 발생한다.

    • ES6에서는 strict모드에 관계없이 에러가 발생하지 않고, 나중에 작성한 값으로 대체된다
      (왜 다시 돌아감?)

  • property value

    • property의 value가 '가리키는(참조하는)' 값이 특정 '행위'를 수행하는 역할을 할 때, 이를 함수라 한다.

    • 이외의 경우에는 모두 '속성'이다.

• object는 위와 같은 특징을 지닌 '데이터 타입'이며 아래와 같은 형태를 보인다.

object = {
  name1: value1, // property1
  name2: value2, // property2
  // ...
}

함수와 메소드

• 함수와 메소드를 구분하는 것은 '클래스 지향'의 관점이다.

• 자바스크립트의 본질을 생각하면 함수와 메소드를 구분하는 것은 의미가 없어 보이나, 굳이 나누자면 다음과 같이 나눌 수 있겠다.

• 함수는 object의 property중 '행위'를 담당하는 것이고,

• 메소드는 이러한 함수 중에서도 상위 객체에 정의되어 있어, 하위 객체가 참조할 수 있는 함수를 가리킨다.

1-2. 스크립트 언어

• 스크립트 언어는 일반적으로 소스 코드가 작성된 순서대로 위에서 아래로 컴파일하고 실행한다.

  자바스크립트는 아래의 두 가지 컴파일 방식을 사용한다

  • JIT(Just-In-Time) 컴파일 방식

    함수 안에 작성한 자바스크립트 코드 전체를 컴파일한 후 실행
    (eval을 제외한 모든 함수가 이에 해당함)
    

  • 인터프리터 컴파일 방식

    함수 안에 작성한 문장 단위로 컴파일과 실행을 같이 함

2. Built-in

렌더링

1. 브라우저는 html 파일을 처음부터 한 줄씩 해석한다.

2. <script src="머시기.js"></script>

   를 만나면 자바스크립트 실행 환경을 만든다.

   • 위의 두 과정을 렌더링이라고 부른다.

   • 이 렌더링 단계에서 자바스크립트는

     • (built-in)objects를 생성하고,

     • (built-in)데이터 타입을 초기화하며,

     • (built-in)연산자를 설정한다.

   • 이렇게 렌더링 단계에서 만드는 것을 총칭하여 built-in이라고 한다.

3. 렌더링을 완료하면 src속성의 머시기.js 파일 안에 작성된 자바스크립트 코드를 컴파일하고 실행한다.

• 참고로 script를 만날 때마다 렌더링하는 것이 아니라, 첫번째 script를 만났을 때 한 번만 렌더링한다.
  (글로벌 객체가 하나만 존재하는 이유)

Built-in 목적, 용도

• 위의 2번째 단계에서(즉, 개발자 프로그램이 실행(3번째 단계)되기 전에) 빌트인이 생성되므로 우리가 프로그램에서 각종 데이터 타입과 연산자, 그리고 object를 사용할 수 있는 것이다.

Built-in objects

• 아직 ES6스펙에 대한 공부가 부족해 ES5기준으로 작성하였다.
  (후에 ES6에 대한 것도 반영하고자 한다)

Global object

글로벌 오브젝트는 전체를 통해서 하나만 존재하며 모든 프로그램에서 접근할 수 있습니다.

• 김영보 선생님이 저술하신 내용이다.

<script src="abc.js"></script>
<script src="def.js"></script>

• 이처럼 하나의 html파일에 여러 개의 자바스크립트 파일을 불러올 수 있는데, 이러한 복수의 자바스크립트 파일을 통틀어서 '단 하나만' 존재하는 것이 Global object라는 것이다.

• 즉, Global object는 자바스크립트 파일 기준이 아니라 html파일을 기준으로 하나만 존재한다고 생각하면 될 것 같다

• Global object는 하나의 html파일을 기준으로 모든 자바스크립트 파일을 포괄하여 가장 상위의 object이다.

• 때문에 다른 모든 built-in objects는 물론이고 글로벌 환경(이후 용어 수정 예정)에 선언되는 모든 변수는 Global object의 property이다.

• Single Object : new 연산자로 새로운 객체를 생성할 수 없는 객체

  • Global object

  • Math object

  • JSON object

Object object

• 대부분의 객체가 [[Prototype]] chain을 통해 Object.prototype과 연결된다.

Function object

자바스크립트는 Function 오브젝트로 시작해서 Function 오브젝트로 끝난다고 해도 지나치지 않습니다.

• 갓 김영보쌤

• 아래의 built-in object들의 스펙까지 다 다루기엔 너무 방대해서 아마 취업 이후에나 따로 포스팅할 수 있을 것 같다
  (취업이 된다면 말이지)

Array object

String object

Boolean object

Number object

Math object

Date object

RegExp object

JSON object

이번 장의 결론

• 자바스크립트는 객체 지향 프로그래밍 언어이다.
  (통상적인 의미의 객체 지향과는 상당히 다르다)

• 객체가 행위와 속성을 갖는다는 것을 자바스크립트에서는 object가 property를 갖는 것으로 구현한다.

• 서로 다른 두 객체가 [[Prototype]]을 통해 연결될 때 이 관계를 '위임 관계'라고 한다.

• 하위 객체는 [[Prototype]]을 통해 상위 객체를 참조한다.

• 하위 객체가 자신에게 없는 property를 상위 객체에서 참조할 때, 이를 '위임'한다고 한다.

앞으로의 계획

1. 자바스크립트에서 객체가 object라는 데이터 타입으로 구현되기 때문에, object와 그 구성 요소인 property에 대해서 알아본다.

2. 객체는 행위와 속성을 갖는다고 하였는데, 이중 행위를 담당하는 함수에 대해서 알아본다.

3. '위임 관계'의 핵심인 [[Prototype]]에 대해서 알아본다.

4. 자바스크립트 엔진 처리의 핵심인 '실행 컨텍스트'와 그 부수 개념들에 대해 알아본다.

5. 비동기와 관련된 개념들에 대해 알아본다.

6. ES6 클래스에 대해 알아본다.
   (이는 이후 자바스크립트 자료구조 포스팅을 위해서이다)