ECMAScript6 (1) 개요

※ 본 글은 EXMAScript6 두고두고 보는 자바스크립트 표준 레퍼런스 (김영보 지음)을 정리한 글임을 알립니다.

 

1.1 ECMA-262 스팩 상태

 

자바스크립트 코드가 실행되려면 코드를 컴파일하고 실행할 자바스크립트 엔진이 필요합니다. 엔진은 자바스크립트 스펙을 기준으로 개발하는데, 스펙의 정식 명칭을 줄여서 ES2015를 ES6로, ES2016을 ES7으로 표기합니다. 공식적인 표기는 아니지만, 자바스크립트 개발자들 사이에 통용되는 표기입니다.

 

1.2 ES6의 방향성

 

ES6는 객체지향 언어의 장점을 적극적으로 도입했으며, 효율적인 메모리 사용에 중점을 두었다고 볼 수 있습니다. ES5가 프로그램 언어의 기본 기능에 중점을 두었다면, ES6는 이를 바탕으로 활용 기능에 중점을 두었다고 할 수 있습니다. 다른 언어의 장점을 자바스크립트 아키텍처에 맞추어 적용했으며, ES5의 함수형을 발전시켰다고 할 수 있습니다.

 

다만 객체지향 중심으로만 접근한 것은 아닙니다. 자바스크립트가 스크립트 언어이므로 함수형 언어가 갖는 장점도 필요합니다. ES6에서 제시한 대부분의 오브젝트는 new 연산자로 인스턴스를 생성합니다. 인스턴스 생성에 따른 비효율적인 측면도 있습니다만, 두 마리 토끼를 잡기 위해 다양하게 접근하고 있습니다.

 

1.3 용어 기준

 

빌트인 오브젝트

빌트인은 스펙용어입니다. 이 책에서 빌트인이란 자바스크립트 엔진이 렌더링하면서 만든 것으로, 개발자 프로그램에서 사전 처리를 하지 않고 바로 사용할 수 있는 것을 의미합니다. 빌트인 오브젝트는 엔진이 사전에 오브젝트로 생성하는 것을 나타냅니다. Function, Object, Array, Number, String 등의 오브젝트가 이에 속합니다.  

 

※ 자세한 내용은 아래의 빌트인 오브젝트가 정확히 뭘까?를 참고해주세요!

 

object

첫 문자가 소문자인 것은 빌트인 오브젝트로 생성한 오브젝트를 나타냅니다. Object는 {key:value} 형태를 의미합니다.

 

function sports() { }가 있다고 할 때, 엔진이 function sports() { } 코드를 만나면 빌트인 Function 오브젝트의 prototye에 연결된 프로퍼티로 오브젝트(object)를 생성합니다.

 

let sports = {key:value}에서 {key:value}를 실행하면 빌트인 Object 오브젝트의 prototype에 연결된 프로퍼티로 오브젝트(object)를 생성합니다.

 

인스턴스

new Sports()는 new 연산자와 Sports 생성자 함수로 인스턴스를 생성합니다. 이와 같이 new 연산자로 생성한 오브젝트를 인스턴스로 표기합니다. 인스턴스와 오브젝트를 구분하는 이유는 Sports.proptotpye에 연결된 메서드를 호출하는 방법이 다르기 때문입니다.

 

Sports.prototype에 연결된 메서드를 호출하려면 Sports.prototype.method( ) 형태로 작성해야 합니다. 이때 Sprots는 오브젝트입니다.

 

그런데 new Sports( )로 인스턴스를 생성하여 instance 변수에 할당하면 instance.method( ) 형태로 호출합니다.

 

프로퍼티 key와 name

let obj = {sports:"축구"} 형태에서 sports를 프로퍼티 키 또는 프로퍼티 이름이라 하고 "축구"를 프로퍼티 값이라고 합니다. ES5에서는 이 둘을 구분하지 않았지만, ES6에서는 구분해야합니다.

 

ES6에서 프로퍼티 이름은 문자열 타입의 이름을 나타내며, 키는 여기에 Symbol 값이 포함됩니다. 프로퍼티 키는 문자열 타입의 이름과 Symbol 값이 포함됩니다. Symbol은 차후 Symbol 오브젝트에서 다룰 예정입니다만, ES6에서 추가되었으며 프로그램 전체를 통해 유일한 값을 제공하는 문자열 타입이 아닌 값입니다.

 

함수와 메서드

함수는 function sports() { }와 같이 function 키워드를 사용한 형태입니다. 메서드도 함수와 형태가 같습니다.

 

ES5에서 Array.isArray()와 같이 오브젝트 프로퍼티로 작성된 isArray()를 함수라고 했으며, Sprots.prototpye.get = function(){ }과 같이 prototype에 연결된 get()을 메서드라고 했습니다. 

 

함수는 메서드를 구분해야 하는 이유는 new 연산자로 인스턴스를 생성할 때 인스턴스에 할당되는 기준이 다르기 때문입니다.

 

let values = [1,2,3]

 

을 실행하면 Array 오브젝트를 생성하여 values 변수에 할당합니다. 이때 Array.isArray()는 values 변수에 할당되지 않고, Array.prototpye에 연결된 forEach()와 같은 메서드만 할당됩니다. 생성한 인스턴스에 forEach()는 호출되지만, isArray()는 호출되지 않습니다. 그렇기에 함수와 메서드를 구분해야 합니다.

 

1.5 코딩 환경

 

html 파일

<script src="myCode.js defer></script>와 같이 defer 속성을 작성하면 html 파일의 모든 엘리먼트를 렌더링한 후 myCode.js 파일에 작성된 자바스크립트 코드가 실행되도록 합니다.

 

js 파일

"use strict";

debugger;

 

"use strict"를 사용하는 이유는, Class 오브젝트와 같은 일부 오브젝트는 strict 모드에서 실행이 기본이기 때문입니다. 함수 메서드 안에 "use strict"를 작성하면 실행환경에 따라 에러가 발생할 수 있으므로 소스 코드 전체를 strict 모드로 사용합니다.

 

debbuger 키워드는 별도의 조치를 취하지 않고 바로 소스 코드를 라인 단위로 디버깅할 수 있어 편리합니다.

 

 

https://product.kyobobook.co.kr/detail/S000001891056

ECMAScript 6 | 김영보 - 교보문고

 

 

---

빌트인 오브젝트가 정확히 뭘까?

 

자바스크립트 객체의 분류

 

1. 네이티브 객체 (빌트인 오브젝트)

네이티브 객체(Native objects or Built-in objects or Global Objects)는 ECMAScript 명세에 정의된 객체를 말하며 애플리케이션 전역의 공통 기능을 제공합니다. 네이티브 객체는 애플리케이션의 환경과 관계없이 언제나 사용할 수 있습니다.  쉽게 말하면 미리 정의되어 있어서 선언 하지 않아도 바로 사용할 수 있는 객체들을 말합니다.

 

Object, String, Number, Function, Array, RegExp, Date, Math와 같은 객체 생성에 관계가 있는 함수 객체와 메소드로 구성됩니다.

 

네이티브 객체를 Global Objects라고 부르기도 하는데 이것은 전역 객체(Global Object)와 다른 의미로 사용되므로 혼동에 주의하여야 합니다.

 

전역 객체(Global Object)는 모든 객체의 최상위 객체를 의미하며 일반적으로 Browser-side에서는 window, Server-side(Node.js)에서는 global 객체를 의미합니다.

 

2. 호스트 객체

호스트 객체(Host object)는 브라우저 환경에서 제공하는 window, XmlHttpRequest, HTMLElement 등의 DOM 노드 객체와 같이 호스트 환경에 정의된 객체를 말합니다.

 

예를 들어 브라우저에서 동작하는 환경과 브라우저 외부에서 동작하는 환경의 자바스크립트(Node.js)는 다른 호스트 객체를 사용할 수 있습니다.

 

브라우저에서 동작하는 환경의 호스트 객체는 전역 객체인 window, BOM(Browser Object Model)과 DOM(Document Object Model) 및 XMLHttpRequest 객체 등을 제공합니다.

 

2.1. 전역 객체(Global Object)

모든 객체의 유일한 최상위 객체를 의미하며 일반적으로 Browser-side에서는 window, Server-side(Node.js)에서는 global 객체를 의미합니다.

 

2.2. BOM (Browser Object Model)

브라우저 객체 모델은 브라우저 탭 또는 브라우저 창의 모델을 생성합니다. 최상위 객체는 window 객체로 현재 브라우저 창 또는 탭을 표현하는 객체입니다. 또한 이 객체의 자식 객체 들은 브라우저의 다른 기능들을 표현합니다. 이 객체들은 Standard Built-in Objects가 구성된 후에 구성됩니다.

 

자세한 내용은 MDN Web APIs: Window를 참조하기 바랍니다.

 

2.3. DOM (Document Object Model)

문서 객체 모델은 현재 웹페이지의 모델을 생성합니다. 최상위 객체는 document 객체로 전체 문서를 표현합니다. 또한 이 객체의 자식 객체들은 문서의 다른 요소들을 표현합니다. 이 객체들은 Standard Built-in Objects가 구성된 후에 구성됩니다.

자세한 내용은 Javascript DOM를 참조하기 바랍니다.

 

※ Standard Built-in Objects : 자바스크립트가 기본적으로 가지고 있는 객체들을 말합니다.

 

참고 블로그

https://poiemaweb.com/js-built-in-object

Built-in Object | PoiemaWeb