console.log는 괄호 안에 넘긴 값을 화면에 글자로 찍는 함수(function)입니다. 값을 쉼표로 나눠 여럿 넘기면 값 사이에 빈칸을 하나씩 넣고, 다 찍은 뒤에는 줄을 바꿉니다.
프로그램이 무엇을 했는지 사람이 알려면 결과를 화면에 내보내야 합니다.
출력은 글자 하나하나가 결과라서, 빈칸 하나와 줄바꿈 하나까지 그대로 예측할 수 있어야 코드를 읽었다고 할 수 있습니다.
이 레슨에서는 console.log가 값 사이와 끝에 무엇을 붙이는지 봅니다.
함수는 이름을 붙여 둔 기능이고, 이름 뒤에 괄호를 붙여 부릅니다. console.log의 점(.)은 'console(콘솔 — 출력을 맡는 쪽)에 딸린 log'라는 뜻입니다. 함수를 직접 만드는 법은 6단원에서 배웁니다.
1괄호 안의 값을 한 줄로 찍는다
console.log('커피');
console.log("라테");
console.log(4000);커피
라테
4000console.log는 괄호 안의 값을 찍고 줄을 바꿉니다. 문장마다 출력이 한 줄씩 생깁니다.
따옴표로 감싼 글자를 문자열(string)이라고 합니다. 작은따옴표(')와 큰따옴표(")는 어느 쪽을 써도 같고, 이 과목은 작은따옴표를 씁니다. 따옴표는 문자열이 어디서 시작해 어디서 끝나는지 알리는 표시라서 찍히지 않습니다.
4000처럼 수는 따옴표 없이 씁니다. 수와 글자가 어떻게 다른지는 2단원의 수·글자·불리언과 typeof에서 봅니다.
2쉼표로 나눈 값 사이에는 빈칸 하나
그림의 코드입니다. 괄호 안에 값을 쉼표로 나눠 여럿 넘길 수 있습니다.
console.log('커피', '라테');
console.log('커피' + '라테');
console.log();
console.log(4000, '원');커피 라테
커피라테
4000 원쉼표는 값과 값의 경계를 알리는 표시라서 찍히지 않습니다. console.log는 값 사이에 빈칸 하나를 넣어 한 줄에 찍습니다. 그래서 1번 줄은 커피 라테, 4번 줄은 4000 원입니다. 수와 글자를 섞어 넘겨도 사이에는 빈칸이 들어갑니다.
2번 줄의 +는 찍기 전에 두 문자열을 이어 '커피라테'라는 값 하나를 만듭니다. 넘긴 값이 하나뿐이라 사이에 넣을 빈칸이 없습니다. 문자열을 +로 잇는 일은 2단원의 문자열 잇기와 길이에서 자세히 봅니다.
3다 찍은 뒤에는 줄바꿈
console.log는 값을 다 찍은 뒤 끝에 줄바꿈을 붙입니다. 그래서 다음 console.log는 늘 새 줄에서 시작합니다(규칙 1).
2절 코드의 3번 줄처럼 괄호를 비운 console.log()는 찍을 값이 없어 줄바꿈만 붙입니다. 실행 결과의 셋째 줄이 그렇게 생긴 빈 줄입니다.
| 쓰는 꼴 | 찍히는 것 |
|---|---|
console.log('커피', '라테') | 값 사이에 빈칸 하나 — 커피 라테 |
console.log('커피' + '라테') | 먼저 이은 값 하나 — 커피라테 |
console.log() | 빈 줄 하나 |
예제
빈칸과 빈 줄까지 그대로 적어 본 뒤 결과를 펼쳐 보세요.
console.log('커피', '두 잔');
console.log();
console.log('합계', 8000, '원');무엇이 몇 줄 찍힐까요?
실행 결과 보기
커피 두 잔
합계 8000 원예상과 다르면 그곳이 배울 곳입니다. 1번 줄은 '두 잔' 안의 빈칸에 더해 두 값 사이에도 빈칸을 넣습니다. 2번 줄은 빈 줄을 찍고, 3번 줄은 값 셋 사이마다 빈칸을 넣습니다.
카페 영수증을 찍는 코드입니다. 메뉴와 값을 쉼표로 나눠 넘겼습니다.
console.log('플로우 카페');
console.log('커피', 4000);
console.log('라테', 4500);
console.log('합계', 8500);플로우 카페
커피 4000
라테 4500
합계 8500합계 8500은 손으로 계산해 적은 수입니다. 값에 이름을 붙여 자바스크립트가 합계를 계산하게 하는 법은 변수: let으로 이름 붙이기에서 봅니다.
자주 틀리는 곳
틀린 생각: 쉼표로 나눠 넘긴 값은 붙어서 찍힌다.
따옴표 안에 빈칸을 적지 않았으니 빈칸도 찍히지 않으리라 여기게 됩니다. 값과 단위를 쉼표로 이어 4000원을 찍으려다 4000 원이 나오는 일이 흔합니다.
console.log('커피', '라테');
console.log(4000, '원');커피 라테
4000 원두 줄 모두 쉼표 자리에 빈칸이 하나씩 들어갔습니다.
맞는 규칙: console.log는 쉼표로 나눈 값 사이에 늘 빈칸 하나를 넣습니다. 빈칸 없이 붙이려면 '커피' + '라테'처럼 먼저 이어 값 하나로 넘깁니다.
틀린 생각: 문자열을 감싼 따옴표도 함께 찍힌다.
코드에서는 따옴표가 글자에 붙어 있어 함께 찍힐 것처럼 보입니다. 바깥 따옴표는 찍히지 않습니다.
console.log('커피');
console.log('"커피"');커피
"커피"2번 줄은 작은따옴표가 문자열을 감쌌고, 그 안의 큰따옴표는 글자라서 찍혔습니다.
맞는 규칙: 바깥 따옴표는 문자열이 어디서 시작해 어디서 끝나는지 알리는 표시라 찍히지 않습니다. 따옴표를 찍으려면 2번 줄처럼 다른 따옴표 안에 적습니다.
틀린 생각: Console.log처럼 대문자로 써도 자바스크립트는 console.log로 알아듣는다.
영어 글에서는 대문자로 시작해도 같은 낱말이라 그렇게 여기게 됩니다. 자바스크립트는 대문자와 소문자를 다른 글자로 봅니다.
console.log(4000);
Console.log(4500);4000main.js:2Console.log(4500);^ ReferenceError: Console is not defined at main.js:2:11번 줄은 실행되어 4000이 찍혔고, 2번 줄에서 오류가 나 멈췄습니다.
오류 이름 ReferenceError 뒤의 Console is not defined는 'Console이 정의되어 있지 않다', 곧 그런 이름이 없다는 뜻입니다. 자바스크립트에는 Console이라는 이름이 없고, console로 짐작해 실행해 주지도 않습니다. 오류 메시지를 읽는 차례는 다음 레슨 오류 메시지 읽기에서 배웁니다.
맞는 규칙: 자바스크립트는 대문자와 소문자를 다른 글자로 보므로 Console은 console과 다른 이름입니다. 이름은 대문자·소문자까지 똑같이 씁니다(규칙 6).
확인 문제
1. 예제 첫째 코드의 1번 줄에서 쉼표를 +로 바꿨습니다. 무엇이 찍히는지 줄마다 그대로 쓰세요.
console.log('커피' + '두 잔');
console.log();
console.log('합계', 8000, '원');힌트
1번 줄의 +가 찍기 전에 무엇을 만드는지 2절에서 찾아봅니다.
정답
커피두 잔
합계 8000 원1번 줄은 '커피'와 '두 잔'을 먼저 이어 값 하나를 만들어, 사이에 빈칸이 들어가지 않습니다. '두 잔' 안의 빈칸은 글자라 그대로 남습니다.
흔한 오답은 첫 줄을 커피 두 잔으로 쓴 답입니다. +도 쉼표처럼 빈칸을 넣는다고 본 것입니다.
2. 실행 결과가 아래처럼 나오도록 1번 줄과 2번 줄의 … 자리에 들어갈 기호를 하나씩 쓰세요.
녹차라테
녹차 라테
console.log('녹차' … '라테');
console.log('녹차' … '라테');힌트
실행 결과의 두 줄에서 '녹차'와 '라테' 사이에 빈칸이 있는지 봅니다. 빈칸을 넣는 기호와 넣지 않는 기호를 2절에서 찾습니다.
정답
1번 줄은 +, 2번 줄은 쉼표(,)입니다.
console.log('녹차' + '라테');
console.log('녹차', '라테');녹차라테
녹차 라테+는 두 문자열을 이어 값 하나로 만들어 붙여 찍고, 쉼표는 값 둘을 넘겨 사이에 빈칸이 들어갑니다.
3. 시험 점수를 찍는 코드입니다. 무엇이 찍히는지 줄마다 그대로 쓰세요.
console.log('국어', 90);
console.log('수학' + ':', 85);
console.log();
console.log('평균', 87.5);힌트
줄마다 쉼표로 나눈 값이 몇 개인지, +로 먼저 이은 값이 있는지 봅니다.
정답
국어 90
수학: 85
평균 87.52번 줄은 '수학'과 ':'을 먼저 이어 '수학:'을 만들고, 그 값과 85 사이에 빈칸을 넣습니다. 3번 줄은 빈 줄입니다.
흔한 오답은 둘째 줄을 수학 : 85로 쓴 답입니다. +도 빈칸을 넣는다고 본 것입니다. 빈 줄을 빠뜨렸다면 괄호가 빈 console.log()는 아무것도 하지 않는다고 본 것입니다.
컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요.
2절 코드(네 줄)를 저장해 돌립니다. 그다음 1번 줄의 쉼표를 +로 바꾸면 무엇이 찍힐지 먼저 적고, 바꿔 돌려서 맞춰 봅니다.
저장하고 돌리는 법은 내 컴퓨터에서 돌려 보기에 있습니다.
더 보기: 문자열 잇기와 길이