Javascript 변수 이름과 값을 출력하는 기능 만들기

우리는 개발하며 값을 수 없이 디버깅한다. 그냥 값을 찍어서 보기도 하고 보기 편하게 이름: 값과 같은 형태로 출력하기도 한다. 본인은 값을 더 직관적으로 값을 확인하기 위해 아래와 같이 로그를 찍는것을 선호한다.

let model = "TV";
console.log('model: ' + model);
//출력: model: TV

하지만 계속 값을 확인할 때마다 값을 위의 방식으로 확인하는 것은 비효율적이라 느껴 변수를 넣어주면 변수 이름과 값을 동시에 출력해주는 기능을 만들기로 했다. 아래는 앞서 말한 기능을 구현한 함수다.

var DebugLog = function(obj){
  for(let key in obj){
    console.log(key + ": " + obj[key]);
  }
}

사용 방법은 아래와 같이 선언된 변수들을 오브젝트로 만들어준뒤 인자로 넘겨주면 알아서 이름: 값의 형태로 넣은 변수 개수만큼 출력해준다. 여기서 변수명은 key값이 되고 값은 value가 된다.

let model = "TV";
let price = 300000;
let brand = "LG";
DebugLog({model, price, brand});

결과는 다음과 같다.

model: TV
price: 300000
brand: LG

별거 아닌거 같지만 로그를 찍는데 시간과 노력이 많이 드는거 같다면 위의 방법으로 간편하고 직관적으로 변수 로그를 찍을 수 있는 기능을 만들어 효율적으로 로그를 찍어보도록 하자.