JS console.log - 자바스크립트 데이터 콘솔로 체크하기

console.log의 정의

console.log()는 JavaScript에서 콘솔에 메시지를 출력하는 데 사용되는 함수입니다. 

쉽게 말해 자바스크립트가 출력을 하도록 도와주는 기능으로, 개발자가 코드의 실행 과정을 확인하고 디버깅하는 데 가장 많이 사용되는 도구입니다. 

---

기본 사용법

console.log의 기본 구문은 다음과 같습니다:

console.log(출력할 대상);

 

console.log(300);      // 숫자 300이 출력됩니다.
console.log("apple");  // 문자열 "apple"이 출력됩니다.
console.log(true);     // 불리언 값 true가 출력됩니다.

 

 

---

다양한 사용 방법

여러 값 출력하기
여러 값을 쉼표로 구분하여 한 번에 출력할 수 있습니다:

let name = "홍길동";
let age = 25;
console.log('이름:', name, ', 나이:', age);
// 출력: 이름: 홍길동 , 나이: 25

 

 

 

템플릿 리터럴 사용하기
ES6의 템플릿 리터럴을 사용하면 더 깔끔하게 출력할 수 있습니다:

let name = "홍길동";
let age = 25;
console.log(`이름: ${name}, 나이: ${age}`);
// 출력: 이름: 홍길동, 나이: 25

 

 

객체 출력하기
객체를 직접 출력하면 객체의 내용을 확인할 수 있습니다:

const person = {
  name: "홍길동",
  age: 25,
  job: "개발자"
};
console.log(person);
// 출력: {name: "홍길동", age: 25, job: "개발자"}

 

 

 

 

 

---

console.log의 활용

 

디버깅 용도
console.log는 코드의 특정 지점에서 변수의 값이나 상태를 확인하는 데 매우 유용합니다. 

function calculateSum(a, b) {
  console.log('입력값:', a, b);  // 함수에 어떤 값이 들어왔는지 확인
  const result = a + b;
  console.log('계산 결과:', result);  // 계산 결과 확인
  return result;
}

 

 

성능 측정
console.time()과 console.timeEnd()와 함께 사용하여 코드 실행 시간을 측정할 수 있습니다:

console.time('연산 시간');
// 시간을 측정할 코드
let sum = 0;
for (let i = 0; i < 1000000; i++) {
  sum += i;
}
console.log('합계:', sum);
console.timeEnd('연산 시간');
// 출력: 연산 시간: 10.123ms (실제 시간은 다를 수 있음)

 

 

 

 

---

주의사항

console.log는 개발 단계에서만 사용하고, 프로덕션 코드에서는 제거하는 것이 좋습니다.
브라우저의 콘솔에서만 출력이 보이므로, 일반 사용자에게는 보이지 않습니다.
대량의 데이터를 출력하면 성능에 영향을 줄 수 있습니다.

 

 

---

결론

console.log는 JavaScript 개발에서 가장 기본적이고 필수적인 디버깅 도구입니다. 

코드의 실행 흐름을 추적하고, 변수의 값을 확인하며, 오류를 찾는 데 매우 유용합니다. 

다양한 형태로 활용하여 개발 과정을 더욱 효율적으로 만들 수 있습니다. 

 

---

크롬에서 콘솔 체킹하는 방법

 

코드에서 console.log 로 체크할 데이터 코딩

 

 

 

브라우저

우측마우스 클릭

검사 클릭

or

F12

 

 

 

 

개발자 도구 윈도우

 

 

 

 

 

console 탭 클릭

창에서 데이터 첵

 

 

 

 

end

 

console-03.PNG

0.06MB

console-02.PNG

0.09MB

console-01.PNG

0.04MB