JavaScript 소개

JavaScript 소개

이 장은 JavaScript를 소개하고 언어의 근본적인 개념 몇 가지를 다룬다. MDN JavaScript 가이드의 첫 번째 장으로, 이후 문법·표현식·함수·객체 등 세부 주제로 들어가기 전에 언어의 전반적인 모습을 잡아준다.

출처: Introduction - JavaScript | MDN

본문

사전에 알아두어야 할 것

이 가이드는 다음과 같은 기본 배경을 갖추고 있다고 가정한다.

  • 인터넷과 월드와이드웹(WWW)에 대한 전반적인 이해.
  • HyperText Markup Language(HTML)에 대한 실무 지식.
  • 어느 정도의 프로그래밍 경험. 프로그래밍이 처음이라면 JavaScript 메인 페이지에 링크된 튜토리얼 중 하나를 먼저 시도하라.

JavaScript 정보를 찾을 수 있는 곳

MDN의 JavaScript 문서는 다음과 같이 구성되어 있다.

  • Dynamic scripting with JavaScript — 초보자를 위한 구조화된 JavaScript 가이드를 제공하고 프로그래밍과 인터넷의 기본 개념을 소개한다.
  • JavaScript Guide (이 가이드) — JavaScript 언어 자체와 그 객체에 대한 개요를 제공한다.
  • JavaScript Reference — JavaScript에 대한 상세한 참고 자료를 제공한다.

JavaScript란 무엇인가

JavaScript는 크로스 플랫폼, 객체 지향 스크립트 언어로, 웹페이지를 상호작용적으로 만들기(예: 복잡한 애니메이션, 클릭 가능한 버튼, 팝업 메뉴 등) 위해 사용된다. 또한 Node.js처럼 더 고급 서버 사이드 버전의 JavaScript도 존재하는데, 이를 이용하면 파일 다운로드 이상의 기능(예: 여러 컴퓨터 사이의 실시간 협업)을 웹사이트에 추가할 수 있다. 호스트 환경(예: 웹 브라우저) 안에서 JavaScript는 자신의 환경의 객체에 연결되어 그것들을 프로그래밍 방식으로 제어할 수 있다.

JavaScript는 Array, Map, Math 같은 객체의 표준 라이브러리와, 연산자·제어 구조·문장 같은 언어 요소의 **핵심 집합(core set)**을 포함한다. 핵심 JavaScript는 추가 객체를 보충함으로써 다양한 목적을 위해 확장될 수 있다. 예를 들어:

  • 클라이언트 사이드 JavaScript는 브라우저와 그 Document Object Model(DOM)을 제어하는 객체를 제공하여 핵심 언어를 확장한다. 예를 들어 클라이언트 사이드 확장은 애플리케이션이 HTML 폼에 요소를 배치하고, 마우스 클릭·폼 입력·페이지 탐색 같은 사용자 이벤트에 응답하도록 해준다.
  • 서버 사이드 JavaScript는 서버에서 JavaScript를 실행하는 데 관련된 객체를 제공하여 핵심 언어를 확장한다. 예를 들어 서버 사이드 확장은 애플리케이션이 데이터베이스와 통신하고, 애플리케이션 호출 사이에 정보의 연속성을 제공하며, 서버에서 파일 조작을 수행하도록 해준다.

즉 브라우저에서 JavaScript는 웹페이지(DOM)의 모습을 바꿀 수 있고, 마찬가지로 서버의 Node.js JavaScript는 브라우저에서 실행된 코드가 보낸 사용자 지정 요청에 응답할 수 있다.

JavaScript와 Java

JavaScript와 Java는 어떤 면에서 비슷하지만 근본적으로는 다른 점이 많다. JavaScript 언어는 Java와 닮았지만 Java의 **정적 타입(static typing)**과 **강한 타입 검사(strong type checking)**는 없다. JavaScript는 대부분의 Java 표현식 문법·명명 규칙·기본 제어 흐름 구조를 따르는데, 이것이 바로 LiveScript에서 JavaScript로 이름이 바뀐 이유이기도 하다.

선언으로 만들어지는 클래스의 컴파일-타임 시스템을 갖는 Java와 달리, JavaScript는 숫자·Boolean·문자열 값을 나타내는 소수의 데이터 타입에 기반한 런타임 시스템을 지원한다. JavaScript는 더 흔한 클래스 기반 객체 모델 대신 프로토타입 기반 객체 모델을 사용한다. 프로토타입 기반 모델은 동적 상속을 제공한다. 즉 상속되는 것이 개별 객체마다 달라질 수 있다. JavaScript는 또한 특별한 선언 요구 없이 함수를 지원한다. 함수는 객체의 속성이 될 수 있으며, 느슨하게 타입된 메서드로 실행된다.

JavaScript는 Java에 비해 매우 자유로운 형식(free-form)의 언어다. 모든 변수·클래스·메서드를 선언할 필요가 없고, 메서드가 public·private·protected인지 신경 쓸 필요도 없으며, 인터페이스를 구현할 필요도 없다. 변수·매개변수·함수 반환 타입도 명시적으로 타입되지 않는다.

Java는 빠른 실행과 타입 안전성(type safety)을 위해 설계된 클래스 기반 프로그래밍 언어다. 타입 안전성은 예를 들어 Java 정수(int)를 객체 참조로 캐스팅하거나, Java 바이트코드를 손상시켜 private 메모리에 접근할 수 없다는 것을 의미한다. Java의 클래스 기반 모델은 프로그램이 전적으로 클래스와 그 메서드로 구성된다는 것을 뜻한다. Java의 클래스 상속과 강한 타입은 일반적으로 밀접하게 결합된 객체 계층 구조를 요구하므로 Java 프로그래밍은 JavaScript보다 더 복잡하게 만든다.

반대로 JavaScript는 정신적으로 HyperTalk와 dBase 같은 더 작고 동적으로 타입된 언어 계열에서 내려온다. 이런 스크립트 언어는 더 쉬운 문법·특화된 내장 기능·최소한의 객체 생성 요구사항 덕분에 훨씬 더 넓은 청중에게 프로그래밍 도구를 제공한다.

두 언어의 핵심 차이는 다음과 같이 요약된다.

JavaScript Java
객체 지향. 객체 타입 간 구분 없음. 상속은 프로토타입 메커니즘을 통해 이루어지며, 속성과 메서드는 어떤 객체에도 동적으로 추가될 수 있음. 클래스 기반. 객체는 클래스와 인스턴스로 나뉘며 모든 상속은 클래스 계층을 통해 일어남. 클래스와 인스턴스에는 속성이나 메서드를 동적으로 추가할 수 없음.
변수 데이터 타입 선언 안 함(동적 타입, 느슨한 타입). 변수 데이터 타입을 선언해야 함(정적 타입, 강한 타입).
하드 디스크에 자동으로 쓸 수 없음. 하드 디스크에 자동으로 쓸 수 있음.

JavaScript와 ECMAScript 사양

JavaScript는 정보 통신 시스템 표준화를 위한 유럽 협회인 Ecma International(ECMA는 원래 European Computer Manufacturers Association의 약자였다)에서 표준화되어, JavaScript에 기반한 표준화된 국제 프로그래밍 언어를 제공한다. 이렇게 표준화된 JavaScript 버전을 ECMAScript라고 하며, 표준을 지원하는 모든 애플리케이션에서 동일하게 동작한다. 기업들은 오픈 표준 언어를 사용해 자신만의 JavaScript 구현을 개발할 수 있다. ECMAScript 표준은 ECMA-262 사양에 문서화되어 있다.

ECMA-262 표준은 국제표준화기구(ISO)에서도 ISO-16262로 승인되었다. 사양은 Ecma International 웹사이트에서도 찾을 수 있다. ECMAScript 사양은 World Wide Web Consortium(W3C) 및/또는 WHATWG(Web Hypertext Application Technology Working Group)가 표준화하는 Document Object Model(DOM)에 대해서는 기술하지 않는다. DOM은 HTML 문서 객체가 스크립트에 노출되는 방식을 정의한다. JavaScript로 프로그래밍할 때 사용되는 서로 다른 기술들에 대해 더 잘 이해하려면 "JavaScript technologies overview" 문서를 참조하라.

JavaScript 문서와 ECMAScript 사양의 차이

ECMAScript 사양은 ECMAScript를 구현하기 위한 요구사항 집합이다. (Firefox의 SpiderMonkey, Chrome의 V8 같은) 구현체나 엔진에서 표준 준수 언어 기능을 구현하려면 유용하다.

그러나 ECMAScript 문서는 스크립트 프로그래머를 돕기 위한 것이 아니다. 스크립트를 작성할 때는 JavaScript 문서를 사용하라.

ECMAScript 사양은 JavaScript 프로그래머에게 익숙하지 않을 수 있는 용어와 문법을 사용한다. 언어에 대한 기술이 ECMAScript에서 다르게 보일 수 있지만, 언어 자체는 동일하다. JavaScript는 ECMAScript 사양에 명시된 모든 기능을 지원한다. JavaScript 문서는 JavaScript 프로그래머에게 적합한 언어 측면을 기술한다.

JavaScript 시작하기

JavaScript를 시작하려면 최신 웹 브라우저만 있으면 된다. 최근 버전의 Firefox, Chrome, Microsoft Edge, Safari는 모두 이 가이드에서 논의하는 기능을 지원한다.

JavaScript를 탐구하는 데 매우 유용한 도구는 JavaScript 콘솔(Web Console 또는 그냥 console이라고도 한다)이다. 이 도구는 현재 페이지에서 JavaScript를 입력하고 실행하게 해준다. 여기 있는 스크린샷은 Firefox Web Console이지만, 모든 최신 브라우저는 비슷하게 동작하는 콘솔을 제공한다.

콘솔 열기

콘솔을 여는 정확한 방법은 브라우저마다 다르다. Firefox, Chrome, Microsoft Edge 각각의 문서에서 콘솔 여는 법을 확인할 수 있다.

JavaScript 입력 및 실행

콘솔은 브라우저 창 하단에 나타난다. 콘솔 하단에는 JavaScript를 입력할 수 있는 입력 줄이 있고, 출력은 그 위 패널에 나타난다.

콘솔은 정확히 eval과 동일한 방식으로 동작한다. 즉 마지막으로 입력된 표현식이 반환된다. 간단히 말하면 콘솔에 뭔가 입력할 때마다 실제로는 eval 주위에 console.log가 감싸져 실행된다고 상상할 수 있다.

console.log(eval("3 + 5"));

콘솔에서 여러 줄 입력

기본적으로 코드 줄 입력 후 Enter(또는 키보드에 따라 Return)를 누르면 입력한 문자열이 실행된다. 여러 줄 입력을 하려면:

  • 입력한 문자열이 불완전한 경우(예: function foo() {를 입력한 경우) 콘솔은 Enter를 줄 바꿈으로 처리하고 다음 줄 입력을 허용한다.
  • Enter를 누를 때 Shift를 누르고 있으면 콘솔은 이를 줄 바꿈으로 처리하고 다음 줄 입력을 허용한다.
  • Firefox에서만, 여러 줄을 미니 에디터에 입력한 뒤 준비가 되면 전체를 실행할 수 있는 멀티라인 입력 모드를 활성화할 수 있다.

JavaScript 작성을 시작하려면 콘솔을 열고 다음 코드를 복사해 프롬프트에 붙여넣으라.

(function () {
  "use strict";
  /* Start of your code */
  function greetMe(yourName) {
    alert(`Hello ${yourName}`);
  }

  greetMe("World");
  /* End of your code */
})();

Enter를 누르면 브라우저에서 실행되는 것을 볼 수 있다!

다음 단계

다음 페이지들에서 이 가이드는 JavaScript 문법과 언어 기능을 소개해서 더 복잡한 애플리케이션을 작성할 수 있게 해줄 것이다.

하지만 지금은 코드 앞에 항상 (function(){"use strict";를, 코드 끝에 })();를 추가하는 것을 기억하라. strict mode와 IIFE 문서가 그 용도를 설명하지만, 지금은 다음과 같은 일을 한다고 생각하면 된다.

  • 초보자를 헷갈리게 하는 JavaScript의 의미론적 동작을 방지한다.
  • 콘솔에서 실행되는 코드 조각들이 서로 상호작용하지 않도록 방지한다(예: 한 콘솔 실행에서 만든 것을 다른 콘솔 실행에서 사용하는 것).

더 알아보기