콘솔과 첫 출력

값을 눈으로 확인하는 방법

코드는 값을 계산하지만, 그 값을 저절로 보여 주지는 않습니다. 무엇이 들어 있는지 확인하려면 내보내라고 적어야 합니다. 그 일을 하는 것이 console.log 입니다.

console 은 브라우저가 미리 준비해 둔 것이고, log 는 그 안에 든 기능입니다. 괄호 안에 적은 값이 아래 출력 칸에 나옵니다.

이 단원부터 나오는 예제는 브라우저 안에서 실제로 실행됩니다. 고쳐서 실행 단추를 눌러도 됩니다. 작성한 코드는 서버로 나가지 않습니다.

첫 출력

실행 단추를 눌러 보세요. 두 줄이 차례대로 나옵니다.

console.log("안녕하세요");
console.log(1 + 1);

두 번째 줄은 "1 + 1" 이 아니라 2 로 나옵니다. 괄호 안의 식이 먼저 계산되고, 그 결과가 출력되기 때문입니다.

여러 값을 한 줄에 내기

쉼표로 구분해 여러 값을 넘기면 한 줄에 나란히 나옵니다. 사이에는 빈칸이 하나씩 들어갑니다.

console.log("이름", "홍길동", "나이", 27);

출력과 값은 다릅니다

console.log 는 값을 화면에 내보낼 뿐, 그 값을 돌려주지는 않습니다. 아래 예제의 마지막 줄에는 출력이 없고 값만 있습니다. 실행하면 출력 칸 아래에 ⟵ 표시와 함께 그 값이 나옵니다.

console.log("이 줄은 출력됩니다");
3 * 4;

브라우저의 개발자 도구 콘솔도 같은 방식으로 동작합니다. 마지막에 계산된 값을 함께 보여 줍니다.

경고와 오류로 내기

console.warn 과 console.error 는 같은 일을 하되 색이 다릅니다. 여러 줄이 섞여 나올 때 무엇이 문제인지 눈으로 갈라 보려고 사용합니다.

console.log("보통 출력");
console.warn("확인이 필요합니다");
console.error("문제가 있습니다");

처음에 자주 걸리는 것

ReferenceError: Console is not defined

SyntaxError: Invalid or unexpected token

SyntaxError: Unexpected string

직접 해보기

이 단원의 정리