[Javascript] console.log() 활용 팁

나는 console.log()를 많이 활용한다. 통신을 할 때 data가 제대로 들어왔는지, 함수가 내가 원하는대로 작동하고 있는지 console.log()로 항상 체크를 한다. 처음 자바스크립트 공부를 할 때는 console.log(변수) 와 같이 단순하게 활용을 했었다. 이 방법은 값 하나를 확인할 땐 편하지만, 확인하고 싶은 값이 여러 개일 때 이 값이 어떤 값인지 확인하려면 console.log()가 실행된 게 몇 번째 줄인지 보고 그 줄을 확인해야 한다는 단점이 있다.

여러 개 값을 확인하고 싶을 때

그래서 여러 개의 값을 확인하고 싶을 때는 앞에 문자로 어떤 변수인지 ‘변수 이름 : ‘ 을 써주고, 두 번째에 변수를 적었다. 이렇게 하니 console.log()에 찍힌 값이 어떤 변수인지를 식별하기가 매우 편리했다.

함수의 작동 결과를 보고 싶을 때

여러 개의 함수를 작동했을 때 각각의 결과가 궁금해 console.log()를 찍을 때가 있다. 지금 기업협업을 하면서 순차적으로 함수를 실행해 rawData를 정제되도록 만드는 코드를 짰는데, 그 과정에서 console.log()를 다음과 같이 활용했다.

    console.log("1. 양식 통일하기", combinedForm);
    console.log("2. type 지정해주기", convertedForm);
    console.log("3. 중복 ID 제거", checkedDuplicatedId);
    console.log("4. 공백 체크하기", checkedBlank);
    console.log("5. 공백이 없는 값", notEmptyData);
    console.log("5-2. 공백이 있는 값", emptyData);
    console.log("6. 핸드폰에서 문자와 특수기호 제거", modifiedPhoneNumber);
    console.log("7. 핸드폰 길이에 따라 에러 체크", checkedPhoneNumber);
    console.log("8. 최종 데이터 반환", refinedData);

이렇게 쓰면 각각 함수의 결과로 얻어지는 값이 무엇인지 알아보기 편하다!

 

또 계속해서 실행하다 보면 어디서부터 console.log()가 새롭게 시작되는지 알아보기가 힘든데, console.log(’—————-여기서부터 시작——————’) 을 활용하면 시작과 끝을 알아보기 좋다. 여러분들도 다양한 형태로 console.log()를 입력해서 보기 쉽게 활용하셨으면 좋겠당!!