JavaScript 레퍼런스

기술 문서

자바스크립트(Javascript)는 웹브라우저에서 동작하는 인터프리터(Interpreter) 실행 방식의 ECMAScript 사양을 준수하는 객체 기반의 통합 프로그래밍 환경을 의미한다.

최초 넷스케이프에서 개발을 했으며 초기에는 '라이브스크립트(LiveScript)'라는 이름으로 불리었다가 이후 자바스크립트(Javascript)가 되었다. 사실 초기에는 그 당시 존재했던 웹브라우저 마다 기술적으로 파편화된 형태로 사용되었고 그로 인해 호환성 문제가 대두되기 시작했다. 그러면서 다양화되기 시작하는 웹브라우저에 대응하는 체계화된 언어로의  표준화가 시도되었고 그 결과 ECMAScript라 불리는 스크립트 언어로 다시 태어나게 되었다. 그러나 ECMAScript 3 버전까지도 업계간의 정치적 이슈가 계속 되며 파편화는 해결될 기미가 보이지 않았다. 이러한 이유로 ECMAScript 4 버전이 폐기되는 최악의 상황까지 발생하게 된다. 이후 해결되지 않는 웹브라우저 호환성 이슈로 인해 자바스크립트는 시장에서 존립의 문제로까지 치닫다가 비로소 ECMAScrpt 5 버전이 발표되면서 언어의 정치적인 문제에 대한 종지부를 찍게 되고 표준화가 성공하게 된다. 현재 'ECMAScript 7' 버전이 발표되었으며 줄여서 'ES7'이라고 부르기도 한다.

오늘날 자바스크립트는 ECMAScript와 ECMAScript에 의해 사용되는 웹브라우저의 API, DOM을 다루는 API를 모두 포함하는 프로그래밍 환경을 의미한다. 그리고 ECMAScript에 의해 사용되는 다양한 WEB API가 속속 개발되어 나오고 있으며 웹은 고도화된 기술이 집약된 콘텐츠 유통의 중요한 플랫폼으로 자리잡아 가고 있다.

자바스크립트는 썬마이크로시스템즈사의 '자바(Java)'와 명칭이 비슷하지만 둘다 C언어에 기반을 둔 것 외에는 전혀 다른 별개의 것이다. 

자바스크립트에는 ECMAScript 내장 객체(Native Objects)와 실행 환경인 웹브라우저 내에 존재하는 호스트 객체(Host Objects), 그리고 웹 문서를 구성하는 요소를 객체로 다루는 Document Objects Model(DOM)이 포함된다.

오랫동안 자바스크립트라는 명칭이 익숙해 있어 앞으로 한동안 자바스크립트라는 용어는 ECMAScript를 대신해서 불리게 될 것 같다. 이 레퍼런스에서도 자바스크립트 용어가 관례적으로 사용이 되며 ECMAScript만을 가리키는 것과 호스트 객체(Host Objects)와 Document Objects Model(DOM)을 포함해서 가리키는 것을 문맥상으로 구분해 주길 바란다.

내장객체(Native Objects)

ECMAScript 표준에 정의된 객체로써 String, Number, Array, Date, Math, Boolean, RegExp 객체 등이 있다. 사용자가 생성한 객체까지 포함해서 네이티브 객체(Native Objects)로 분류하기도 한다.

호스트객체(Host Objects)

ECMAScript의 실행 환경인 웹브라우저 내에 존재하는 객체들이다. window, screen, navigator, location, history, events, console 객체 등이 있다.

DOM(Document Objects Model)

웹브라우저 내에 존재하는 문서 객체군으로 웹 문서에 사용되는 요소들을 객체로 다루는 관련 객체들이 존재한다. document, node, element, attribute, style 객체 등이 있다.

WEBAPIs

WEBAPIs는 웹에서 ECMAScript로 사용할 수 있는 다양한 기술 인터페이스이다. 아직은 현존하는 모든 API가 범용성과 표준 기술이 담보되어 있지 않지만 점차 확대되어 나갈 것이고 새로운 기술도 속속 나오게 될 것이다.

 

ECMAScript 버전 현황

연도버전 명버전 별칭주요 변경
1997ECMAScript 1 표준화된 첫번째 버전
1998ECMAScript 2 ISO/IEC 16262 국제 표준 규격을 적용
1999ECMAScript 3 RegExp 추가
try/catch 추가
 ECMAScript 4 관련 인물 및 업계의 정치적 갈등으로 정상 출시가 보류되었으나 ECMAScript 5 업데이트에 기반이 됨.
2009ECMAScript 5 "strict mode" 추가
JSON 지원
2011ECMAScript 5.1 개편된 ISO/IEC 16262:2011 국제 표준 규격에 따라 업데이트
2015ECMAScript 6 상당히 많은 내용이 추가되고 변경되었으므로 Wikipedia를 참고
2016ECMAScript 7 지수 연산자 추가
Array.prototype.includes 추가
2017ECMAScript 8 string padding 추가
새로운 Object 프로퍼티 추가
Async functions 추가
Shared Memory 추가

 

ECMAScript는 기본적으로 함수 단위이며 모든 객체는 함수에서 생성되어 Prototype으로 확장된다. 따라서 이러한 객체들을 생성할 수 있도록 기본적으로 객체 생성이 가능한 함수를 내장하고 있다. ECMAScript는 객체를 다루는 언어이지만 보통의 객체 지향 언어와는 다른 방식을 가지고 있다. 다른 객체 지향 언어에서는 상속이라는 방식으로 상위 객체를 직접 가져와서 상속된 객체를 만들 수 있지만 ECMAScript는 확장이라는 방식으로 상속하는 객체의 멤버에 접근한다. 이것을 프로토타입 체인(prototype chain)이라고 부르는데 상속 관계의 모든 객체는 각자의 [[Prototype]]을 가지고 연결(Link)되는 개념이라 할 수 있다. 

예를 들어서 배열 데이터를 생성해서 다루고자 할 때 기본 배열 객체인 Array와 동명의 배열 데이터를 생성하는 Array()라는 내장 생성자 함수가 존재한다. 그리고 Array 객체 내에는 생성자 함수에 의해 생성된 배열 데이터를 다룰 수 있도록 확장된 프로퍼티와 메소드들이 Prototype이라는 원형 객체로 존재한다. 새로운 배열 데이터가 생성되면 Prototype 내의 모든 프로퍼티외 메소드들이 상속된다. 이러한 개념은 사용자 함수에게도 적용된다.

Object 객체는 자바스크립트에서 최상위 객체이며 모든 객체는 Object 객체의 프로토타입을 상속받는다. Object 객체의 프로토타입을 상속하는 모든 객체들도 생성자를 가지고 있는 경우에 마찬가지로 프로토타입 객체를 가지고 있다.

사용자 함수의 경우에는 Object의 프로토타입을 상속받아 확장이 가능한다. 따라서 함수를 변수에 데이터로 담아 다룰 수 있다는 독특한 특징을 가지게 된다.

아래의 코드는 사용자 함수를 만들고 상속된 prototype 프로퍼티를 통해서 확장을 보여주고 있으며 실제로 객체 데이터로 사용하는 예를 다룬 샘플 코드이다.

function my(msg) {
	this.msg = msg;
};

my.prototype.alert = function() {
	alert(this.msg);
};
my.prototype.test = function() {
	console.log(this.__proto__);
};

var obj = new my('Hello');
obj.alert();
obj.test();

var obj2 = new my('Javascript');
obj2.alert();

 

Global 객체는 직접 사용할 수 없는 객체이며 생성자도 가지고 있지 않다. Global 객체는 전역 객체의 성격을 가지므로 코드 어느 곳이든 Global 객체의 상수와 함수를 사용할 수 있다. 사실 Global 객체는 런타임시 초기화되면서 생성되기에 실제로 존재하지 않는 객체로 보는게 맞을 것이다. 웹브라우저 전역 범위에서 사용 가능한 ECMAScript의 표준 내장 함수와 상수를 모아놓은 분류를 지칭하는 상징적인 객체 개념으로 다룬다.

외부 리소스

JavaScript와 ECMAScript는 무슨 차이점이 있을까?
JavaScript와 ECMAScript에 대한 또 다른 의견을 볼 수 있다.
프로토타입
자바스크립트의 prototype에 대한 정리를 볼 수 있다.