JavaScript Introduction

Jan. 2011 written by 이주형 (Lee Ju Hyung)

소개

자바스크립트 (JavaScript) 는 객체 기반의 스크립트 프로그래밍 언어다. 이 언어는 웹 사이트에서의 사용으로 많이 알려졌지만, 다른 응용프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 자바스크립트는 본래 넷스케이프 커뮤니케이션즈 코퍼레이션의 브렌단 아이히 (Brendan Eich) 가 처음에는 모카 (Mocha) 라는 이름으로, 나중에는 라이브스크립트 (LiveScript) 라는 이름으로 개발하였으며, 최종적으로 자바스크립트가 되었다.

자바스크립트가 썬 마이크로시스템즈의 자바와 구문 (syntax) 이 유사한 점도 있지만, 이는 사실 두 언어 모두 C 언어의 기본 구문을 바탕했기 때문이고, 자바와 자바스크립트는 직접적인 관련성이 없다. 이름과 구문 외에는 자바보다 셀프와 유사성이 많다.

자바스크립트는 ECMA (European Computer Manufacturer’s Association) 에 의해 표준화되었으며 ECMA-262 v3 에 대응하는 자바스크립트 버전은 1.5 이다. 웹 브라우저마다 지원되는 버젼이 다르지만 대부분은 1.5 이상을 지원한다.

차기 (네번째) ECMA-262 표준안을 놓고 두 워킹 그룹 (기존 ECMA-262 v3 를 크게 개선시킨 v4 워킹그룹과 v3 를 상대적으로 약간 보완한 v3.1 워킹그룹) 이 서로 다른 방향으로 일을 진행하다가 결국 ECMA 기술위원회의 결정으로 v4 는 폐기되고, v3.1 의 방향을 채택하게 된다. 이후 이 새로운 표준안은 v5 (ECMAScript Harmony 로 도 알려져있다) 로 이름이 바뀌게 된다.

객체와 함수

자바스크립트는 클래스 개념이 아닌 프로토타입 개념의 언어로 만들어졌다. 애초에 객체와 함수, class 와 super-class 의 구분이 모호한 언어에서 기존에 알고 있던 OOP 개념을 자바스크립트로 가져오는 것은 어색해 보일 수 밖에 없다 (비슷하게 구현은 가능하다).

자바스크립트에서 객체는 모두 Object 타입 (클래스라고 하지 않겠다) 이다. Object 타입은 다른 언어에서 볼 수 있는 연관배열 형태의 key-value 타입으로서 문자열을 키값으로 어떠한 데이터든 담을 수 있으며, 동적으로 추가/삭제가 가능하다. 자바 스크립트에서 기본타입(boolean, number, string) 외에 모든 변수는 Object 타입이다.

클래스가 없는 대신 프로토타입이 클래스의 역할을 대신할 수 있다. 객체는 프로토타입에 직접 접근할 수 없고 생성자 함수 (일반 함수와 생성자 함수를 특별히 구분하진 않는다) 를 통해서만 접근할 수 있다.1

프로토타입도, 생성자 함수도 크게 보면 모두 객체이며 각각 constructor, prototype 이라는 프로퍼티로 서로 참조하고 있다. (그림 1 참고)

그림 1. 객체와 프로토타입 그리고 함수와의 관계

JavaScriptObject

Safari 의 자바스크립트 콘솔에서 직접 확인해봤다.

위와같이 newDog 이 생성되면 newDog 은 프로토타입으로 Dog.prototype 객체를 가리키고 있다.

객체 프로퍼티 & 메소드

  • __proto__ (비공식) : 객체의 프로토타입 (객체와 연결된 prototype 을 나타낸다)
  • constructor : 생성자 함수
  • toString : 문자열 캐스팅용 메소드
  • toLocaleString : 지역화된 toString
  • valueOf : 숫자같은 기본 타입 캐스팅용 메소드
  • hasOwnProperty : 수신자 객체가 부모로 부터가 아닌 고유의 프로퍼티를 소유하는지 판별
  • isPrototypeOf : 수신자 객체가 매개변수 객체의 __proto__ 인지 판별

상속 (sub-class)

위의 코드를 포함해 여태까지의 내용을 그림으로 나타내보면 그림 2 와 같다.

그림 2. 상속된 프로토타입 객체와 함수객체의 관계

JavaScriptDiagram

자바스크립트 객체

코어 객체

  • Array
  • Boolean
  • Date
  • Math
  • Number
  • String
  • RegExp
  • Globa

브라우져 객체

  • Window : 웹브라우져의 윈도우 객체
  • Navigator : 웹브라우져 객체
  • Screen : 화면 객체
  • Location : 현재 주소 객체
  • History : 지나간 주소 내역 객체

HTML DOM

  • Document
  • Events
  • Elements

참고 (Reference)

  1. 자바스크립트 완벽 가이드
    http://insightbook.springnote.com/pages/1109998
  2. JavaScript in 10 minutes
    http://javascript.infogami.com/Javascript_in_Ten_Minutes
  3. JavaScript from WikiPedia
    http://ko.wikipedia.org/wiki/자바스크립트
  1. 비공식 프로퍼티인 __proto__ 로 객체에서 prototype 에 직접 접근이 가능하나 사용하고 있는 브라우져에서 지원하는지 확인해봐야 한다.

Leave a Reply

Your email address will not be published. Required fields are marked *