브라우저 콘솔에서 바로 실행하고 오류 읽기

01. 콘솔 여는 법

개발자 도구는 페이지 옆이나 아래에 붙어서 열리는 창이에요. 여러 패널(Elements · Console · Sources · Network …)이 탭으로 나뉘어 있고, 자바스크립트를 처음 배울 때는 Console(콘솔) 패널을 가장 많이 써요. 브라우저마다 여는 방법은 이래요.

Safari는 개발자 기능이 처음에는 꺼져 있어요. 메뉴 막대의 Safari → 설정 → 고급으로 가서 맨 아래 웹 개발자 기능 체크 상자(영문 이름 Show features for web developers)를 켜면, 메뉴 막대에 개발 메뉴(영문 Develop)가 생겨요. 거기서 JavaScript 콘솔을 열 수 있어요.

지금 이 페이지에서 콘솔을 열어 보세요. 이 블로그가 남긴 메시지가 없다면 빈 화면과 > 기호만 보일 거예요. 그 > 옆이 코드를 입력하는 곳이에요.

02. 입력하고 Enter, 바로 실행돼요

콘솔에 코드를 입력하고 Enter를 누르면 그 자리에서 실행하고 결과 값을 바로 아래에 보여 줘요. 읽고(Read) · 실행하고(Eval) · 보여 주고(Print) · 다시 기다리는(Loop) 이 방식을 줄여서 REPL이라고 불러요. 파일을 만들 필요가 없어서, 문법이 헷갈릴 때 확인하기 딱 좋아요.

콘솔은 console.log를 쓰지 않아도 마지막 식의 값을 보여 줘요. const로 변수를 만드는 줄처럼 값을 돌려주지 않는 문장은 undefined가 찍히는데, 오류가 아니니 걱정하지 않아도 돼요. 이 글의 실행 블록은 콘솔과 달리 console.log로 출력한 것만 보여 줘요. 같은 내용을 실행 블록으로 옮기면 이래요.

console.log(2 ** 10);                   // 1024
const greet = name => '안녕, ' + name;
console.log(greet('콘솔'));              // 안녕, 콘솔

여러 줄 입력하기

Enter를 누르면 바로 실행되니까, 여러 줄을 쓰고 싶을 때는 Shift+Enter로 줄을 바꿔요. Chrome 콘솔은 중괄호가 아직 닫히지 않은 것처럼 코드가 덜 끝났으면 Enter를 눌러도 알아서 다음 줄로 넘어가요. 몇 가지 단축키를 더 알아 두면 편해요(Chrome 기준).

긴 코드를 여러 번 고쳐 가며 실행하고 싶다면, 콘솔보다 코드 편집기에 파일로 쓰는 편이 나아요.

붙여넣기 경고가 뜨는 이유

Chrome 콘솔을 처음 쓰는 사람이 코드를 붙여 넣으면, 붙여넣기가 막히고 경고가 떠요. 직접 allow pasting이라고 입력해야 붙여넣기가 풀려요(콘솔 기록이 다섯 줄쯤 쌓이면 이 경고가 더는 뜨지 않아요). 귀찮아 보이지만 이유가 있어요. "이 코드를 콘솔에 붙여 넣으면 혜택을 준다"며 사용자 스스로 악성 코드를 실행하게 만드는 사기가 실제로 있거든요. 콘솔에서 실행한 코드는 그 사이트에 로그인한 나의 권한으로 돌아가요. 누가 보내 준 코드인지, 무슨 일을 하는지 모르는 코드는 콘솔에 붙여 넣지 마세요.

03. 오류 메시지 읽기

페이지의 자바스크립트가 실행 중에 문제를 만나면 콘솔에 빨간 줄이 생겨요. 겁먹지 말고 세 부분으로 나눠서 읽으면 대부분 원인이 보여요.

• 종류: 어떤 성격의 오류인지 알려 줘요. 아래 표의 세 가지를 가장 자주 만나요.
• 설명: 무엇이 잘못됐는지 한 문장으로 알려 줘요. 같은 오류라도 브라우저마다 문장이 조금씩 달라요.
• 위치: 파일 이름과 줄 번호예요. 콘솔에서 누르면 그 줄이 열려요.

그림과 같은 코드를 실행해 보세요. 첫 줄은 잘 나오다가 두 번째 console.log에서 멈춰요.

const user = { name: '민지' };
console.log(user.name);
console.log(user.address.city);

user에는 address가 없어서 user.address는 undefined예요. 없는 것(undefined)에서 다시 .city를 꺼내려 해서 오류가 났어요. 위 결과는 Chromium에서 본 문장이고, Firefox에서는 같은 뜻을 다른 문장으로 보여 줘요.

자주 만나는 세 가지 종류

앞의 둘은 실행하다가 그 줄에 닿았을 때 나지만, SyntaxError는 다르게 동작해요. 엔진은 실행하기 전에 코드를 먼저 읽는데(엔진 이야기 참고), 그때 문법 오류를 발견하면 한 줄도 실행하지 않아요. 아래 코드의 첫 줄은 멀쩡한데도 출력되지 않아요.

console.log('이 줄도 실행되지 않아요');
const = 3;

04. console에는 log 말고도 있어요

console.log에는 값을 여러 개 넣을 수 있고, 배열 · 객체도 그대로 넣으면 내용을 보여 줘요. 문제를 알리고 싶을 때는 console.error를 쓰면 빨간 줄로 눈에 띄어요.

const item = { name: '연필', price: 1200 };
console.log('상품:', item);
console.log([1, 2, 3].map(n => n * 2));
console.error('재고가 없어요');

이 밖에도 쓸모 있는 기능이 많아요. console.table은 배열을 표로 보여 주고, console.time · console.timeEnd는 그 사이 코드가 얼마나 걸렸는지 재 줘요. 걸린 시간은 컴퓨터와 그때 상황에 따라 매번 달라요. 브라우저 콘솔에서 실행하면 표의 열 이름을 눌러 정렬할 수도 있어요.

console.table([{ name: '연필', price: 1200 }, { name: '공책', price: 2500 }]);

console.time('반복');
for (let i = 0; i < 1e6; i++) {}
console.timeEnd('반복'); // 반복: 몇 ms (컴퓨터마다 달라요)

const cart = [
  { name: '공책', qty: 2 },
  { name: '지우개', qty: 3 },
];
let count = 0;
for (const item of cart) {
  count += item.quantity;
}
console.log('모두 ' + count + '개');

count += item.qty;

// (가)
const price = 1000;
price();

// (나)
console.log(totl);

// (다)
console.log('닫는 따옴표가 없어요);

const price = 1000;
price();