Javascript - console.log 사용하는 팁

 자바스크립트를 개발하게 되면 가장 많이 만나는 기능이 console.log 기능입니다. 코드 문제를 해결하거나 데이터 흐름을 추적할 때  요긴하게 사용하는 기능입니다. console.log 대신 debug와 같은 출력 라이브러리를 활용해서 하는 방법도 있지만 아무런 설치 없이 손쉽게 사용할 수 있다 보니 console.log를 애용하는 것은 어찌 보면 당연한 것일지도 모릅니다. 그럼 오늘은 자주 사용하는 console.log의 기능 중 자주 활용하거나 알아두면 좋을 부분에 대해 이야기하겠습니다.

console.log()를 사용하는 방법

기초 사용법

 기본적인 사용방법은 아래와 같이 간단합니다.

const name = "YD";
const message = "Hello world!";

const messageObj = {
  owner: name,
  text: message,
};

// 단일 데이터 출력
console.log(name);  // YD

// 다중 데이터 출력
console.log(name, message); // YD Hello World!

// 문자 포맷 출력
console.log('%s %s', message, name); // Hello World! YD

// messageObj(객체) 출력
console.log(messageObj);  // {owner: "YD", text: "Hello world!"} 문자가 아니라 객체 입니다.

// messageObj owner 출력
console.log(messageObj.owner);  // YD

// messageObj이 포함하지 않은 값을 출력
console.log(messageObj.test);  // undefined

 단순히 출력하는 console.log에 값을 넣어서 출력하는 방법도 있지만 문자 포맷을 이용해 출력하는 방법도 있으니 참고해주시면 좋을 것 같습니다. 객체를 출력할 때 일부 값만 확인이 필요한 경우에는 key가 되는 값을 "." 뒤에 지정한 뒤 출력하시면 됩니다.

const name = "YD";
const message = "Hello world!";

// 단순하게 출력
console.log(message + " " + name); // Hello World! YD

// 문자 포맷 출력
console.log("%s %s", message, name); // Hello World! YD

// "`" 백틱 활용
console.log(`${message} ${name}`); // Hello World! YD

 ES2015(ES6)부터는 백 틱을 활용해서 이전보다 문자나 문자 값을 쉽게 만들 수 있게 되었습니다. 단순히 + 연산자를 활용하는 것보다는 코드를 읽기 쉽게 만들어주는 방법이니 여러 가지 방법으로 활용해보시면 좋습니다.

객체 출력 팁 - JSON.stringify()

console.log를 사용하다 보면 단순한 값을 사용할 때도 있지만, JSON을 사용하는 경우도 많습니다. 그런 경우 아래 예제를 참고하시면 보기 쉽게 객체를 출력할 수 있습니다.

// JSON.stringify 활용팁

const messageObj = {
  owner: "YD",
  text: "Hello world!",
};

// 단순히 문자로 출력
console.log(JSON.stringify(messageObj));
// {"owner":"YD","text":"Hello world!"}

// replacer, space 옵션을 활용한 문자 출력
console.log(JSON.parse(JSON.stringify(messageObj, null, "    ")));
// {
//     "owner": "YD",
//     "text": "Hello world!"
// }

정리하기

 console.log를 기본만 잘 활용하더라도 debug를 쉽게 그리고 잘할 수 있습니다. console은 log 외에도 많은 기능들이 있으니 시간이 나신다면 한 번 확인해보시는 것을 추천드립니다.

같이 보면 좋은 글

2021.05.20 - [프로그래밍/Javascript] - Javascript - 실무에서 활용하는 console.log() 사용 방법