프로그램(program)은 컴퓨터가 할 일을 차례로 적어 둔 글입니다. 자바스크립트(JavaScript)는 프로그램을 위에서 아래로, 한 번에 한 문장씩, 쓴 그대로 실행합니다.
코드를 읽으려면 먼저 컴퓨터가 코드를 어떤 차례로 실행하는지 알아야 합니다. 사람은 글의 뜻을 짐작해 차례를 고쳐 읽기도 하지만, 자바스크립트는 적힌 문장을 적힌 차례대로만 실행합니다. 이 과목은 자바스크립트가 코드를 실행하는 규칙 여덟을 하나씩 세우고 끝까지 같은 말로 씁니다. 이 레슨은 그 가운데 규칙 1과 규칙 6을 세웁니다. 번호는 과목 전체에서 매긴 것이라, 규칙 2~5는 뒤 레슨에서 차례로 나옵니다. 과목 끝에서는 이 규칙들 위에 웹 페이지를 움직이는 법을 더해, 할 일을 더하고 끝내고 지우고 저장하는 할 일 앱을 만듭니다.
파이썬을 배웠다면 — 이 단원에서 다른 곳
파이썬을 배웠다면 이 단원에서는 오류 메시지 읽기(오류 꼴이 다름) · 변수: let으로 이름 붙이기(let 없이 쓴 이름은 오류) · 내 컴퓨터에서 돌려 보기(작업 폴더 설정)를 꼭 보고 나머지는 훑어보세요. print 대신 console.log, True 대신 true를 씁니다.
1위에서 아래로, 한 번에 한 문장
그림의 첫 코드는 네 줄입니다.
// 플로우 카페 주문 순서
console.log('주문합니다');
console.log('계산합니다');
console.log('커피를 받습니다');주문합니다
계산합니다
커피를 받습니다자바스크립트는 1번 줄부터 읽고, 한 문장을 다 실행한 뒤에야 다음 문장으로 내려갑니다. 그래서 출력 줄의 차례는 실행한 문장의 차례와 같습니다.
console.log('주문합니다');는 괄호 안 따옴표 사이의 글자를 화면에 한 줄로 찍습니다. 이렇게 화면에 글자를 내보내는 것을 출력(output)이라고 합니다(자세히는 다음 레슨).
할 일 하나를 적은 것을 문장(statement)이라고 하고, 끝의 ;(세미콜론)은 문장이 끝났다는 표시입니다. 이 과목은 한 줄에 문장 하나를 쓰고 끝에 늘 ;을 붙입니다.
1번 줄은 //로 시작하는 주석이라 실행하지 않습니다(3절).
코드 아래 '실행 결과' 상자는 이 코드를 실제로 실행했을 때 화면에 나온 출력입니다. 자바스크립트는 웹 브라우저 안에서도, 컴퓨터에 설치한 Node(노드)라는 프로그램에서도 돌아갑니다. 이 과목의 실행 결과는 모두 Node 26으로 돌려 얻었고, Node 22 이상이면 같습니다.
규칙 1. 위에서 아래로, 한 번에 한 문장을 실행합니다.
2쓴 대로만 실행한다
그림의 둘째 코드는 3번 줄과 4번 줄의 차례를 바꾼 것입니다.
// 플로우 카페 주문 순서
console.log('주문합니다');
console.log('커피를 받습니다');
console.log('계산합니다');주문합니다
커피를 받습니다
계산합니다계산도 하기 전에 커피를 받는 이상한 차례지만, 자바스크립트는 문장을 고치지도 오류를 내지도 않습니다. 자바스크립트는 '주문'이나 '계산'이 무슨 뜻인지 모르고, 쓰인 문장을 쓰인 차례대로 실행할 뿐입니다.
규칙 6. 컴퓨터는 이름의 뜻을 모릅니다. 쓴 대로만 합니다.
규칙 6의 '이름'은 이 단원의 변수: let으로 이름 붙이기부터 나오는, 값에 붙여 쓰는 이름입니다. 지금은 '자바스크립트는 글의 뜻을 짐작하지 않는다'로 읽으면 됩니다. 그래서 차례가 틀린 프로그램은 오류 없이 틀린 결과를 냅니다. 프로그램이 뜻대로 움직이게 하는 일은 코드를 쓰는 사람의 몫입니다.
3주석은 실행하지 않는다
// 기호부터 그 줄 끝까지는 주석(comment)입니다. 주석은 코드를 읽는 사람에게 남기는 메모라서, 자바스크립트는 실행하지 않고 건너뜁니다.
1절 코드의 1번 줄 // 플로우 카페 주문 순서는 이 프로그램이 무엇을 하는지 사람에게 알려 줄 뿐 출력에는 아무것도 남기지 않습니다. 그래서 코드는 네 줄인데 출력은 세 줄입니다.
주석 안에 console.log를 적어도 실행되지 않으므로, 문장 앞에 //를 붙이면 그 문장을 지우지 않고 실행에서 뺄 수 있습니다.
뒤 레슨들은 코드 위에 // 1. 합을 0으로처럼 덩어리마다 할 일을 주석으로 적습니다. 코드를 나눠 읽기 좋게 하는 메모일 뿐, 실행에는 영향이 없습니다.
예제
코드를 먼저 읽고 무엇이 찍힐지 적어 본 뒤 결과를 펼쳐 보세요. 맞혀 보기는 점수에 들지 않습니다.
console.log('어서 오세요');
// 메뉴를 보여 줍니다
console.log('커피 4000');
console.log('라테 4500');무엇이 몇 줄 찍힐까요?
실행 결과 보기
어서 오세요
커피 4000
라테 45001번 줄부터 차례로 실행하고, 2번 줄의 주석은 건너뛰어 세 줄이 찍힙니다(규칙 1). 예상과 다르면 그곳이 배울 곳입니다.
다음 코드는 문장 앞에 번호를 붙였는데, 번호 차례가 섞여 있습니다.
console.log('3. 커피를 받습니다');
console.log('1. 주문합니다');
console.log('2. 계산합니다');무엇이 찍힐까요?
실행 결과 보기
3. 커피를 받습니다
1. 주문합니다
2. 계산합니다예상과 다르면 그곳이 배울 곳입니다. 1, 2, 3 차례로 예상했다면 자바스크립트가 글의 뜻을 읽고 차례를 맞춘다고 본 것입니다. 번호도 따옴표 안의 글자일 뿐이라, 자바스크립트는 문장의 차례대로 찍습니다(규칙 1·6).
자주 틀리는 곳
틀린 생각: 자바스크립트는 글의 뜻을 읽고 차례를 알아서 맞춰 실행한다.
사람은 '먼저'나 '끝으로' 같은 말을 보고 차례를 고쳐 읽으니 자바스크립트도 그러리라 여기게 됩니다. 자바스크립트는 차례를 고치지 않습니다.
console.log('끝으로 인사합니다');
console.log('먼저 주문합니다');끝으로 인사합니다
먼저 주문합니다'먼저'와 '끝으로'도 따옴표 안의 글자일 뿐이라, 쓴 차례대로 찍힙니다.
맞는 규칙: 자바스크립트는 글의 뜻을 모르고, 위에서 아래로 한 문장씩 쓴 대로만 실행합니다. 차례는 코드를 쓰는 사람이 바로잡습니다(규칙 1·6).
틀린 생각: 주석에 적은 말도 자바스크립트가 따른다.
주석은 코드 줄 사이에 적히고 할 일을 적어 두기도 하니 그렇게 보입니다. 자바스크립트는 // 뒤의 글을 건너뜁니다.
// 인사를 두 번 찍습니다
console.log('어서 오세요');어서 오세요주석에는 두 번이라고 적었지만 console.log 문장이 하나라 한 번만 찍힙니다.
맞는 규칙: // 기호부터 줄 끝까지는 주석이라 자바스크립트가 실행하지 않습니다. 자바스크립트가 할 일은 주석이 아니라 문장으로 씁니다(규칙 6).
틀린 생각: 문장 끝의 ;은 빼도 늘 똑같이 돈다.
;을 빼도 대개는 돌아가니 있으나 없으나 같다고 여기게 됩니다. 자바스크립트가 줄바꿈 자리를 문장 끝으로 짐작해 주는 것인데, 그 짐작이 틀릴 때가 있습니다. 아래 2번 줄은 (로 시작하는 줄을 보이려고 넣은 계산 한 줄입니다.
console.log('주문')
(1 + 2)주문main.js:2(1 + 2)^ TypeError: console.log(...) is not a function at main.js:2:11번 줄 끝에 ;이 없고 2번 줄이 (로 시작해, 자바스크립트가 두 줄을 console.log('주문')(1 + 2) 한 문장으로 읽었습니다. '주문'을 찍은 뒤 이어 붙은 자리에서 오류로 멈춘 것입니다. 오류 메시지는 오류 메시지 읽기에서 읽습니다.
맞는 규칙: ;은 문장이 끝나는 자리를 알리는 표시라, 빼면 자바스크립트가 끝을 짐작하다 틀릴 수 있습니다. 그래서 이 과목은 문장마다 끝에 ;을 씁니다.
확인 문제
1. 예제 첫째 코드의 2번 줄 // 메뉴를 보여 줍니다를 아래처럼 console.log 문장으로 바꿨습니다. 무엇이 찍히는지 줄마다 그대로 쓰세요.
console.log('어서 오세요');
console.log('메뉴를 보여 줍니다');
console.log('커피 4000');
console.log('라테 4500');힌트
2번 줄이 //로 시작하는지 봅니다. 그다음 1번 줄부터 차례로 따라갑니다.
정답
어서 오세요
메뉴를 보여 줍니다
커피 4000
라테 45002번 줄이 주석에서 문장으로 바뀌어 출력이 한 줄 늘었고, 위에서 아래로 실행하므로 둘째 줄에 찍힙니다. 흔한 오답은 세 줄만 쓴 답입니다. 2번 줄을 아직 주석으로 본 것입니다.
2. 줄 ㉠~㉣을 위에서 아래로 놓아, 아래 실행 결과가 나오는 코드를 만드세요. 놓은 차례를 ㉠~㉣로 쓰세요.
어서 오세요
커피 4000
라테 4500
- ㉠
console.log('라테 4500'); - ㉡
// 메뉴 두 가지 - ㉢
console.log('어서 오세요'); - ㉣
console.log('커피 4000');
다 놓은 뒤에는 아래 '놓은 뒤 물음'을 펼쳐 하나 더 고르세요.
힌트
실행 결과의 줄마다 그 글자를 찍는 줄을 ㉠~㉣에서 찾습니다. ㉡은 무엇을 찍는지도 봅니다.
놓은 뒤 물음
㉣이 ㉠보다 위에 와야 하는 까닭은 무엇일까요?
- ① 자바스크립트는 위에서 아래로 실행해, 먼저 실행한 문장이 먼저 찍히기 때문
- ② 커피가 라테보다 싸서 자바스크립트가 싼 메뉴부터 찍기 때문
- ③ ㉡ 주석이 메뉴를 차례로 찍으라고 알려 주기 때문
정답
㉢ ㉡ ㉣ ㉠ 차례이고, 까닭은 ①입니다. ㉡은 주석이라 어디에 두어도 출력이 같아 ㉡ ㉢ ㉣ ㉠ · ㉢ ㉣ ㉡ ㉠ · ㉢ ㉣ ㉠ ㉡도 맞습니다.
- ② 자바스크립트가 값의 뜻(어느 메뉴가 싼지)을 안다고 본 것입니다(규칙 6).
- ③ 주석에 적은 말을 따른다고 본 것입니다. 주석은 사람에게 남기는 메모입니다.
3. 이번 주 시간표를 찍는 코드입니다. 무엇이 찍히는지 줄마다 그대로 쓰세요.
// 요일 차례대로 찍습니다
console.log('수 영어');
console.log('월 국어');
console.log('화 수학');힌트
1번 줄이 무엇으로 시작하는지 봅니다. 그다음 코드를 위에서부터 한 문장씩 따라갑니다.
정답
수 영어
월 국어
화 수학주석은 실행하지 않고, console.log 문장은 쓴 차례대로 실행합니다.
흔한 오답은 월 · 화 · 수 차례입니다. 주석에 적은 말이나 요일의 뜻을 자바스크립트가 따른다고 본 것입니다(규칙 6).
컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 1절 코드(네 줄)를 저장해 돌립니다. 그다음 2번 줄과 3번 줄을 서로 바꾸면 무엇이 찍힐지 먼저 적고, 바꿔 돌려서 맞춰 봅니다. Node를 설치하고 저장해 돌리는 법은 이 단원의 마지막 레슨 내 컴퓨터에서 돌려 보기에 있습니다.
더 보기: console.log로 출력하기