프로그래밍이란

프로그램은 명령의 목록이고, 자바스크립트는 그 명령을 맨 윗줄부터 아래로 한 문장씩 실행합니다.

컴퓨터가 따를 수 있는 명령

요리법에는 「달걀 두 개를 깨서 풀고 팬에 붓는다」라고 적혀 있습니다. 사람은 읽으면서 많은 것을 알아서 채웁니다. 어떤 그릇을 쓸지, 얼마나 세게 저을지, 껍데기 조각이 들어가면 어떻게 할지 따로 적혀 있지 않아도 압니다. 컴퓨터는 아무것도 채우지 않습니다. 적힌 그대로, 적힌 순서대로만 하고, 이해할 수 없는 명령을 만나면 그 자리에서 오류를 내고 멈춥니다. 프로그래밍은 기계가 따를 수 있을 만큼 정확한 명령을 쓰는 일입니다.

이 명령은 프로그래밍 언어로 씁니다. 프로그래밍 언어는 낱말 수가 적고 문법이 엄격해서 한 줄이 한 가지 뜻으로만 읽힙니다. 이 과정에서는 자바스크립트를 씁니다. 모든 웹 브라우저에 들어 있는 언어라서 따로 설치할 것이 없습니다. 이 페이지의 실습 상자도 지금 보고 있는 브라우저 안에서 코드를 바로 실행합니다. 자바스크립트는 Node.js 같은 도구로 브라우저 밖에서도 돌아가고, 여기서 배우는 기초는 그곳에서도 똑같이 쓰입니다.

첫 번째 코드 한 줄

프로그래밍을 배울 때는 대부분 컴퓨터가 글자를 출력하게 하는 데서 시작합니다. 자바스크립트로는 이렇게 씁니다.

console.log("Hello, world!");

조각조각 나눠 읽어 봅니다. console은 프로그램이 실행하는 사람에게 메시지를 적는 곳입니다. .log는 「그곳에 한 줄 적어라」라는 뜻입니다. 괄호 안에는 적을 내용이 들어가고, 큰따옴표는 Hello, world!가 코드가 아니라 글자라는 표시입니다. 끝의 세미콜론은 문장 끝의 마침표처럼 명령 하나를 닫습니다. 이렇게 완성된 명령 하나를 문(statement)이라고 합니다. 실행하면 콘솔에 Hello, world! 한 줄이 나옵니다. 따옴표는 출력되지 않습니다. 글자가 어디서 시작해 어디서 끝나는지 알려 줄 뿐입니다.

위에서 아래로, 한 문씩

문이 여러 개인 프로그램은 순서대로 실행합니다. 첫 줄이 끝나야 둘째 줄이 시작합니다. 아래 프로그램은 세 줄을 출력하고, 출력 순서는 코드 순서와 같습니다.

console.log("Wake up");
console.log("Brush teeth");
console.log("Eat breakfast");
// prints:
// Wake up
// Brush teeth
// Eat breakfast

앞의 두 줄을 바꾸면 출력도 바뀝니다. 당연해 보여도 초보자가 만드는 버그의 상당수가 문의 순서 때문에 생깁니다. 값을 계산하기 전에 쓰거나, 마지막 항목을 더하기 전에 합계를 출력하는 식입니다.

주석은 사람을 위한 메모입니다

위 예에서 //로 시작하는 줄은 주석입니다. 자바스크립트는 //부터 그 줄 끝까지를 건너뛰므로 자신이나 다른 사람을 위한 메모를 적을 수 있습니다. 여러 줄짜리 메모는 /*로 시작해 */로 끝냅니다. 줄을 지우지 않고 잠시 끄고 싶을 때도 주석을 씁니다. 앞에 //를 붙이면 그 줄은 실행되지 않습니다.

오류가 났을 때

자바스크립트는 대문자와 소문자를 구별합니다. console.log는 되지만 Console.log나 console.Log는 안 됩니다. consol.log처럼 이름을 잘못 쓰면 ReferenceError: consol is not defined 같은 메시지를 내고 멈춥니다. 닫는 따옴표나 괄호를 빠뜨리면 SyntaxError가 나는데, 아예 올바른 자바스크립트가 아니라는 뜻이라 한 줄도 실행되지 않습니다. 오류 메시지는 처음엔 겁나 보여도, 컴퓨터가 어디서 막혔는지 알려 주는 것입니다. 메시지 첫 줄을 읽고, 거기 나온 이름을 찾아 코드와 한 글자씩 비교해 보세요.

실습 상자 쓰는 법

실습 상자는 왼쪽(휴대폰에서는 위쪽)에 코드, 오른쪽(아래쪽)에 출력이 있습니다. 재생 단추를 누르면 코드가 실행되고, 키보드로는 Ctrl+Enter나 Cmd+Enter를 누르면 됩니다. 채점은 코드를 실행한 뒤 출력된 줄을 정답과 한 줄씩 비교하므로 철자, 대문자, 줄 안의 띄어쓰기까지 맞아야 합니다. 처음부터를 누르면 원래 코드로 돌아갑니다. 코드는 따로 막힌 틀 안에서 돌아가니 마음껏 바꿔 봐도 괜찮습니다.