[Javascript] Console 객체(1)

 

 

Console

 

자바스크립트를 처음 시작할 때부터 우리와 함께한 Console.

브라우저들은 클라이언트 측의 개발을 보조하기 위해 개발자 도구를 지원하고 있는데, 이 개발자 도구를 조작할 수 있도록 하는 기능들을 제공하는 것이 바로 console 객체이다.

 

 

 

 

 

console은 자바스크립트에서 디버깅을 위해 존재하는 객체로 console 내부의 함수를 이용하면 개발자 도구의 콘솔창에 여러 정보들을 출력할 수 있다. console 객체 내부에는 이렇게나 많은 함수들이 있지만 이 글에서는 알아두면 디버깅에 편리함을 더해주는 것들을 위주로 소개해 보려 한다.

 

반응형

 

 

 

console.log()

누구나 자바스크립트 코드의 결과 값을 출력하거나 테스트를 위해 console.log()를 정말 많이 써봤을 것이다. 역시나 가장 많이 쓰이는 함수. 인자로 전달된 값들을 출력해 주는 기능을 한다. 이때 콤마(,)를 통해 출력하고 싶은 여러 개의 인자를 집어넣을 수 있다. 콤마를 통해 출력 값을 이을 경우 별다른 게행 문자 없이 자동으로 띄어쓰기를 해 준다.

 

 

문자열 포맷

C 언어나 Java를 해 본 사람이라면 한 번쯤  printf() 를 사용해 봤을 것이다. 이는 첫 번째 문자열 내의  %d 와  %s  같은 치환자를 콤마 뒤에 입력한 인자로 매칭하여 변환시킨다.

System.out.printf("%d는 숫자고 %s는 문자열이다", 123, "abc");

 

치환 문자열	설명
%o 또는 %O	자바스크립트 객체를 출력한다.
%d 또는 %i	정수를 출력한다. 또한 서식도 지원한다. 예를 들어 console.log('Foo %.2d', '1.1')은 정부수를 0이 앞서는 두 자리로 표현하므로 Foo 01을 출력한다.
%s	문자열을 출력한다.
%f	부동 소수점 수를 출력한다. 또한 서식도 지원한다. 예를 들어 console.log('Foo %.2f', '1.1')은 소수부를 두 자리로 표현하므로 Foo 1.10을 출력한다.

 

다만 ES6 이후로는 템플릿 리터럴 문법의 등장으로  console.log(`${a}는 숫자고 ${b}는 문자열이다.`); 와 같이 사용하는 것을 선호하는 추세이다.

 

let a = 123;
let b = 'abc'

// 문자열 포맷
console.log('%d는 숫자고 %s는 문자열이다.', a, b);

// 템플릿 리터럴
console.log(`${a}는 숫자고 ${b}는 문자열이다.`);

 

 

 

출력 스타일링

 

HTML 요소를 스타일링하기 위해 CSS를 가미하듯 console 출력물 자체에 css를 적용할 수 있다. 앞서 본 문자열 포맷 방식으로 스타일링을 뜻하는 기호  %c  를 이용해 콤마 다음 CSS 문법을 인라인으로 적어 주면 된다.  %c 를 여러 번 사용해 각 문자마다 스타일링을 적용하는 것도 가능하다.

 

 

 

 

 

객체 형식으로 출력

 

console.log()의 사용법을 잘 알지 못한다면 여러 변수를 한꺼번에 출력하려 할 때 지금까지는 아래와 같이 사용해 왔을 것이다.

let name = 'barva';
let age = 100;
let adress = 'somewhere in Korea';
let job = 'developer';
let isTrue = true;
let languages = ['JAVA', 'Javascript', 'SQL', 'Python', 'C'];

console.log(name, age, adress, job, isTrue, languages);

 

그러나 이렇게 무작정 나열해버릴 경우 출력할 인자가 많아질수록 몇 번째의 값이 어떤 값인지 혼동스러워질 수 있다.

 

 

이럴 때에는 다음과 같이 구조분해 문법을 통해 그대로 console.log()의 인자에 넣어 주면 콘솔창에 객체 형식으로 출력해 준다.

console.log({name, age, adress, job, isTrue, languages});

 

 

 

console.log() 사용 시 주의사항은 아래 내용 참조.

[Javascript] console.log() 다시 보기

 

 

 

---

 

 

console.clear()

단어 그대로 콘솔창에 입력된 모든 것들을 초기화시켜 준다. 특정 시점부터 디버깅이 필요한 경우 해당 시점 맨 앞에서 이 함수를 실행시켜 주면 콘솔 확인에 편리하다.

 

브라우저 콘솔창에서의 단축키는 Windows는 Ctrl + L, Mac에서는 Command + K.