자바스크립트란 무엇인가

docs.scrimba.com

웹 페이지를 열고 메뉴를 여는 버튼을 클릭하거나, 검색창에 타이핑하면서 결과가 바로바로 제안되는 걸 보거나, 스크롤할 때 피드에 게시물이 계속 로드되는 걸 지켜본다고 해봅시다. 이 중 어느 것도 HTML이 하는 일이 아니고, CSS가 하는 일도 아닙니다. 바로 자바스크립트가 하는 일입니다. 자바스크립트는 브라우저 안에서 실행되면서 여러분의 행동에 페이지가 반응하도록 만드는 언어입니다. 이 챕터에서는 이 언어가 무엇인지, 어디에서 실행되는지, 그리고 이미 알고 있는 HTML과 CSS와 어떻게 맞물리는지 다룹니다.

페이지가 동작하게 만드는 언어

자바스크립트는 **프로그래밍 언어**입니다. 컴퓨터가 한 단계씩 실행할 명령을 작성하는 방법이라고 할 수 있습니다. HTML이 페이지에 무엇이 있는지를 설명하고 CSS가 그것이 어떻게 보이는지를 설명한다면, 자바스크립트는 무슨 일이 일어나는지를 설명합니다. 반응하는 부분이 바로 자바스크립트입니다.

웹 페이지를 집이라고 생각해봅시다. HTML은 벽과 방으로 이루어진 구조입니다. CSS는 페인트와 가구입니다. 자바스크립트는 전기와 배관, 즉 스위치를 누르면 불이 켜지고 수도꼭지를 틀면 물이 나오게 만드는 배선입니다. 사람이 페이지와 상호작용할 때 무언가가 일어나게 만드는 것이 바로 자바스크립트입니다.

자바스크립트는 웹 페이지의 동작(behaviour) 계층입니다. HTML이 구조를 제공하고 CSS가 표현을 제공한다면, 자바스크립트는 로직과 상호작용을 더해줍니다. 페이지가 로드된 뒤에 그 내용을 읽고 바꿀 수 있고, 클릭이나 키 입력 같은 이벤트에 반응할 수 있으며, 상태를 추적하고, 서버와 통신해 새로운 데이터를 불러올 수도 있습니다.

결과물을 기술하는 HTML, CSS와 달리 자바스크립트는 완전한 프로그래밍 언어입니다. 변수, 조건문, 반복문, 함수를 갖추고 있습니다. 여러분은 원하는 것을 선언하는 게 아니라 브라우저가 실행할 단계들을 직접 작성하는 것입니다. 이 핸드북이 다루는 전환점이 바로 여기에 있습니다. 페이지를 기술하는 것에서 페이지를 프로그래밍하는 것으로의 전환입니다.

자바스크립트는 고수준의 동적 타입 프로그래밍 언어입니다(값에는 타입이 있지만 변수는 하나의 타입에 고정되지 않아서, 하나의 이름이 지금은 숫자를, 나중에는 문자열을 담을 수 있습니다). 브라우저 안에서 자바스크립트는 동작 계층으로서, DOM(Document Object Model, 브라우저가 여러분의 HTML로부터 만들어내는 살아있는 메모리 트리)을 이벤트에 반응해 조작하고, 상태를 관리하며, 네트워크 요청을 수행합니다.

기억해둘 만한 구도는 HTML과 CSS는 선언적(declarative)이고 자바스크립트는 명령적(imperative)이며 튜링 완전하다는 점입니다. 즉 원하는 결과만이 아니라 계산 자체를 표현합니다. 이 힘 때문에 자바스크립트는 웹 전체의 상호작용을 책임지고 있지만, 동시에 HTML과 CSS에서는 거의 필요 없던 규율, 즉 이름 짓기, 구조화, 오류 처리 같은 것들이 로직이 페이지에 들어오는 순간부터 여러분의 책임이 됩니다. 이 핸드북의 대부분은 이 힘을 오직 여러분만 읽을 수 있는 코드로 만들지 않으면서 다루는 방법에 관한 것입니다.

// HTML은 버튼을 만들어줄 뿐입니다. 자바스크립트가 그 버튼을 동작하게 만듭니다.
const button = document.querySelector(".menu-toggle");
button.addEventListener("click", openMenu);

이 코드의 각 부분은 뒤에서 하나씩 다시 만나게 됩니다. 지금은 전체적인 모양만 눈에 익혀두세요. 자바스크립트는 페이지 안으로 들어가고(document.querySelector), 사용자가 하는 행동에 반응합니다(addEventListener). 페이지 안으로 들어가는 것과 반응하는 것, 이 둘이 브라우저 자바스크립트가 하는 일의 대부분입니다.

Juno페이지가 동작하게 만드는 언어 HTML은 구조, CSS는 스타일, 자바스크립트는 동작입니다. 즉 누군가가 페이지를 사용할 때 반응하는 부분입니다. 진짜 프로그래밍 언어이기 때문에, 여러분은 브라우저가 한 단계씩 따라갈 명령을 직접 작성합니다. 페이지를 설명하는 것에서 페이지에게 무엇을 하라고 알려주는 것으로 넘어가는 전환점에 지금 서 있는 것입니다.

Juno페이지가 동작하게 만드는 언어 자바스크립트는 동작 계층입니다. 페이지를 읽고 바꾸며, 이벤트에 반응하고, 서버와 통신합니다. HTML, CSS와 달리 로직과 상태를 갖춘 완전한 언어이기 때문에, 여러분은 페이지를 선언하는 게 아니라 프로그래밍합니다. 이 역할을 머릿속에 명확히 두면 나머지 둘의 위치도 훨씬 쉽게 잡힙니다.

Juno페이지가 동작하게 만드는 언어 자바스크립트는 명령적이고 튜링 완전합니다. 이 때문에 웹 전체의 상호작용을 책임지고, 로직이 등장하는 순간부터 구조화가 여러분의 몫이 됩니다. 동적 타입 언어이기 때문에 하나의 이름이 어떤 타입도 담을 수 있고, 타입 검사는 런타임에 일어납니다. 여기서 다루는 기술의 대부분은 오직 여러분만 읽을 수 있는 코드를 쓰지 않으면서 이 힘을 다루는 방법입니다.

자바스크립트는 어디에서 실행되는가

자바스크립트는 브라우저 안에서 실행됩니다. Chrome, Safari, Firefox 등 모든 브라우저에는 여러분의 자바스크립트를 읽고 실행하는 내장 **엔진**이 들어 있습니다. 즉 시작하는 데 따로 설치할 것이 없습니다. 웹 페이지를 열 수 있다면, 자바스크립트도 실행할 수 있습니다.

<script> 태그로 페이지에 자바스크립트를 추가하는데, 보통은 </body> 닫는 태그 바로 앞에 둡니다. 코드를 별도의 파일로 관리하고 싶다면, 이미지 태그가 이미지 파일을 가리키는 것과 같은 방식으로 src 속성에 파일명을 지정해 그 파일을 가리키게 하면 됩니다.

한 줄의 코드를 가장 빨리 시험해볼 수 있는 곳은 브라우저 콘솔입니다. 개발자 도구 안에 있는 패널로, 여기에 자바스크립트를 입력하면 결과를 바로 볼 수 있습니다.

자바스크립트는 런타임 안에서 실행됩니다. 런타임은 코드를 실행할 엔진과, 그 코드가 사용할 수 있는 추가 기능들을 함께 제공하는 환경입니다. 브라우저에서는 런타임이 페이지를 위한 document, 브라우저 탭을 위한 window, 네트워크 요청을 위한 fetch 등을 제공합니다. 언어 자체는 작지만, 브라우저에서 사용하는 것들의 대부분은 그 주변의 런타임에서 옵니다. 외부 스크립트는 <script> 태그와 src 속성으로 불러오며, defer를 붙이면 브라우저가 페이지 구성을 마친 뒤에 스크립트를 실행하므로 "요소를 찾을 수 없음" 류의 버그를 상당수 피할 수 있습니다. 개발자 도구의 콘솔은 여러분이 직접 입력할 수 있는 살아있는 런타임이며, 아이디어를 가장 빠르게 테스트할 수 있는 곳입니다.

자바스크립트는 언어 명세(ECMAScript)로 정의되며, V8(Chrome, Node)이나 JavaScriptCore(Safari) 같은 엔진에 의해 실행됩니다. 엔진은 이야기의 절반일 뿐입니다. 실제로 쓸모 있는 기능들은 엔진을 내장하고 그 엔진에 API를 노출하는 런타임인 **호스트 환경**에서 나옵니다. 브라우저에서는 페이지가 그 호스트가 되어 DOM, 타이머, fetch, 스토리지, 이벤트를 제공하고, Node 같은 서버 런타임에서는 운영체제가 호스트가 되어 파일과 소켓을 제공합니다.

여기서 실용적인 결론이 두 가지 나옵니다. 첫째, 같은 언어가 매우 다른 환경에서 실행되므로 "이것이 자바스크립트인가, 브라우저 기능인가"라는 구분이 실제로 의미를 가집니다. Array와 Promise는 언어이고, document와 localStorage는 브라우저입니다. 둘째, 스크립트를 어떻게 로드하느냐가 동작에 영향을 줍니다. 전통적인 <script>는 파싱을 막고, defer는 DOM이 순서대로 구성된 뒤에 실행되며, type="module"은 기본적으로 지연 실행되면서 import/export와 자신만의 스코프를 제공합니다. 지금 어떤 방식을 쓰고 있는지 알면 "페이지가 존재하기도 전에 왜 이게 실행됐지"라는 혼란의 대부분이 풀립니다.

Juno자바스크립트는 어디에서 실행되는가 자바스크립트는 브라우저 안에서 실행되는데, 브라우저에는 이미 실행 엔진이 들어 있어서 따로 설치할 것이 없습니다. <script> 태그로 페이지에 추가하며, 한 줄을 가장 빨리 시험해볼 곳은 브라우저 개발자 도구의 콘솔입니다. 열어서 아무거나 입력해보세요, 무엇을 망가뜨릴 일은 없습니다.

Juno자바스크립트는 어디에서 실행되는가 브라우저는 런타임을 제공합니다. 엔진에 더해 document, fetch 같은 부가 기능들이 함께 들어옵니다. <script src>로 코드를 불러오고 defer를 붙여 페이지 구성이 끝난 뒤 실행되게 하세요. 콘솔은 아이디어를 테스트할 수 있는 살아있는 런타임이며, 가장 빠른 피드백을 얻을 수 있는 곳입니다.

Juno자바스크립트는 어디에서 실행되는가 엔진은 언어(ECMAScript)를 실행하고, 호스트 환경은 API를 제공합니다. 그래서 Array는 자바스크립트지만 document는 브라우저입니다. 스크립트를 로드하는 방식도 중요합니다. 전통적인 스크립트는 파싱을 막고, defer는 DOM 구성 뒤 순서대로 실행되며, type="module"은 지연 실행에 import 스코프까지 더해줍니다. 이 구분을 알면 "페이지가 있기도 전에 실행됐네" 류의 버그 대부분이 설명됩니다.

자바스크립트를 처음 들여다보기

아주 작은 프로그램을 하나 살펴봅시다. 아직 모든 부분을 이해할 필요는 없습니다. 다음 챕터들에서 하나씩 다룰 테니까요. 하지만 벌써 그 전체적인 모양은 읽어낼 수 있습니다:

let name = "민준";
console.log("안녕, " + name); // 안녕, 민준

첫 번째 줄은 텍스트 "민준"을 name이라는 이름에 저장합니다. 두 번째 줄은 "안녕, "과 저장된 이름을 이어붙여 콘솔에 메시지를 출력합니다. console.log는 배우는 동안 자바스크립트에게 값을 보여달라고 요청하는 방법이며, 앞으로 계속 사용하게 될 것입니다.

작지만 완전한 첫 프로그램입니다:

let name = "민준";
let greeting = "안녕, " + name;
console.log(greeting); // 안녕, 민준

여기에는 이미 세 가지 개념이 담겨 있습니다. 값을 담는 변수, 값들을 조합하는 표현식("안녕, " + name), 그리고 그 결과로 무언가를 하는 문장(console.log)입니다. 자바스크립트의 거의 모든 것은 이 세 가지가 쌓인 형태입니다. 값에 이름을 붙이고, 그 값들로 계산하고, 결과로 무언가를 하는 것입니다. console.log는 콘솔에 값을 출력하며, 여러분의 코드가 실제로 무엇을 하고 있는지 확인하는 기본 도구입니다.

가장 작지만 유용한 프로그램에도 이 언어의 핵심 흐름이 담겨 있습니다:

const name = "민준";
const greeting = `안녕, ${name}`;
console.log(greeting); // 안녕, 민준

숙련된 개발자가 반사적으로 하는 선택들을 눈여겨보세요. 여기서는 바인딩이 절대 바뀌지 않기 때문에 let이 아니라 const를 사용했습니다(의도를 드러내고 의도치 않은 재할당을 막아줍니다). 그리고 + 연결이 아니라 템플릿 리터럴(${...}을 담은 백틱 문자열)을 사용했습니다. 이렇게 하면 코드가 더 깔끔하게 읽히고 타입도 더 예측 가능하게 처리됩니다. 이런 선택들이 없어도 이 줄은 문제없이 실행됩니다. 바로 그것이 핵심입니다. 자바스크립트는 느슨한 버전도 순순히 받아들이기 때문에, 코드의 품질은 언어가 강제하지 않는 여러분 스스로의 결정에서 나옵니다. 이 핸드북은 상당 부분을 그런 결정들에 할애하며, 바로 다음의 변수부터 시작합니다.

Juno자바스크립트를 처음 들여다보기 프로그램은 대부분 이렇게 이루어집니다. 값을 저장하고, 그것들을 조합하고, 결과로 무언가를 합니다. console.log는 값을 출력해서 눈으로 볼 수 있게 해주며, 배우는 동안 가장 든든한 친구가 되어줄 것입니다. 세부 사항은 아직 걱정하지 마세요, 다음 챕터들에서 각 부분을 제대로 만나게 됩니다.

Juno자바스크립트를 처음 들여다보기 자바스크립트의 대부분은 세 가지가 쌓인 형태입니다. 값을 담는 변수, 값을 조합하는 표현식, 결과로 무언가를 하는 문장입니다. 어떤 코드를 보든 이 세 가지를 알아보는 것만으로도 낯선 코드가 훨씬 덜 위협적으로 느껴집니다. console.log를 가까이 두세요, 여러분의 코드가 실제로 무엇을 하는지 확인하는 방법입니다.

Juno자바스크립트를 처음 들여다보기 언어는 느슨한 버전이든 신중한 버전이든 똑같이 실행하므로, 품질은 언어가 강제하지 않는 선택들에서 나옵니다. 바인딩이 고정될 때는 let 대신 const를, 가독성을 위해 + 대신 템플릿 리터럴을 쓰는 식입니다. 그 자유로움이 자바스크립트의 축복이자 함정입니다. 다음 챕터들은 대체로 그런 선택을 잘 내리는 방법에 관한 것이며, 변수부터 시작합니다.

"모던 자바스크립트"가 뜻하는 것

사람들이 **모던 자바스크립트**라는 말을 쓰는 것을 듣게 될 것입니다. 자바스크립트는 1995년부터 존재해왔고 매년 새로운 기능이 추가되지만, 예전 코드도 계속 동작하도록 유지됩니다. 그래서 같은 일을 하는 방법이 시대에 따라 여러 가지로 늘어났습니다.

좋은 소식은, 그 역사를 다 알 필요는 없다는 것입니다. 이 핸드북은 각각의 경우에 지금 가장 권장되는 방식을 가르칩니다. 오래된 튜토리얼에서 var로 변수를 만드는 것을 본다면, 그것은 옛날 방식입니다. 대신 오늘날 개발자들이 사용하는 let과 const를 배우게 될 것입니다.

"모던 자바스크립트"는 보통 2015년의 대규모 업데이트(ES2015, 또는 ES6라고 부릅니다) 이후의 언어와 그 뒤로 매년 추가된 기능들을 가리킵니다. 이 업데이트로 let과 const, 화살표 함수, 템플릿 리터럴 등이 추가되었고, 지금은 모든 현대 브라우저가 이를 지원하는 기본 기준이 되었습니다.

이것이 중요한 이유는 여러분이 두 시대의 코드를 마주치게 되기 때문입니다. 예전 자료는 var, 곳곳의 function 표현식, 문자열 연결을 사용하고, 지금 코드는 const/let, 화살표 함수, 템플릿 리터럴을 사용합니다. 이 핸드북은 처음부터 끝까지 모던한 방식을 가르치며, 예전 형태는 실제로 마주쳤을 때 알아볼 수 있도록 이름만 언급합니다. 이 중 무엇을 쓰기 위해서든 빌드 도구나 설정이 필요하지 않습니다. 그대로 브라우저에서 실행됩니다.

자바스크립트는 ECMAScript로 표준화되어 있고, ES2015 이후로는 명세가 매년(ES2016, ES2017 등) 발표되며 각 버전마다 하위 호환되는 작은 기능 집합이 추가됩니다. "모던 자바스크립트"는 그렇게 진화한 언어, 즉 const/let, 화살표 함수, 템플릿 리터럴, 구조 분해, 모듈, async/await를 기준으로 코드를 작성한다는 것을 줄여서 부르는 말입니다. 2015년 이전의 관용구가 아니라 말입니다.

이것이 실무에서 단순하게 유지되는 이유는 자바스크립트가 **하위 호환성**에 거의 절대적으로 헌신하기 때문입니다. 새 문법은 계속 추가되지만 옛 문법은 거의 절대 깨지지 않아서, 10년 전 스크립트도 여전히 실행됩니다. 그래서 여러분은 모던한 형태만 배우고, var와 그 시대의 관용구는 오래된 코드를 유지보수할 때 읽기만 하면 되는 지식으로 안전하게 남겨둘 수 있습니다. 과거가 끼어드는 유일한 경우는 다른 사람이 작성한 오래된 코드베이스를 읽을 때인데, 이 핸드북은 그런 오래된 형태가 나올 때마다 표시해두어서 여러분이 걸려 넘어지지 않게 합니다. 다음 챕터인 변수는 정확히 그 지점, 즉 값을 이름 짓고 저장하는 모던한 방식에서 시작합니다.

Juno모던 자바스크립트가 뜻하는 것 자바스크립트는 오래된 언어이고 예전 코드도 계속 동작하게 유지하기 때문에, 어떤 것들은 여러 가지 방식으로 할 수 있습니다. 그 역사를 알 필요는 없습니다. 이 핸드북은 매번 지금 가장 권장되는 방식을 가르칩니다. 어떤 튜토리얼이 var를 쓴다면 그것은 옛날 방식이고, 여러분은 대신 let과 const를 배우게 됩니다.

Juno모던 자바스크립트가 뜻하는 것 모던 자바스크립트란 2015년 업데이트 이후의 언어를 뜻합니다. const와 let, 화살표 함수, 템플릿 리터럴 등입니다. var와 문자열 연결을 쓰는 예전 코드도 마주치게 되므로, 이 핸드북은 모던한 방식을 가르치고 예전 형태는 알아볼 수 있도록 이름만 언급합니다. 이 모든 것은 빌드 과정 없이 브라우저에서 그대로 실행됩니다.

Juno모던 자바스크립트가 뜻하는 것 ECMAScript는 매년 발표되고 하위 호환성을 유지하므로, 새 문법은 추가되지만 옛 문법은 거의 절대 깨지지 않습니다. 그래서 여러분은 모던한 형태만 배우고, var와 그 시대는 오래된 코드베이스를 위한 읽기 전용 지식으로 남겨둘 수 있습니다. 진화한 언어를 기준으로 코드를 작성하고, 낡은 형태는 핸드북이 나올 때마다 표시해주는 대로 받아들이세요.

자바스크립트는 여기서 어디로 나아가는가

자바스크립트는 큰 언어지만 작게 시작합니다. 값들, 그것들에 붙이는 이름, 그리고 그것들을 조합하고 그것들로 무언가를 하는 방법입니다. 이것들이 이해되면, 이 핸드북의 나머지는 그 위로 확장됩니다. 결정을 내리고 작업을 반복하기, 코드를 함수로 조직하기, 배열과 객체에 값들의 모음을 담기, 그리고 마침내 DOM을 통해 페이지 자체에 손을 뻗어 사람들이 실제로 쓸 수 있는 것을 만들기까지 이어집니다.

다음 챕터인 변수에서 진짜 작업이 시작됩니다. 값을 저장하는 방법, let과 const의 차이, 그리고 언어의 나머지 전체가 그 위에 세워지는 소수의 규칙들을 다룹니다.