console.log()

개발자들의 가장 친밀한 소통 도구인 **console.log()**에 대해 깊이 있게 알아보겠습니다.

이 함수는 자바스크립트 코드를 실행하면서 변수의 값이나 상태를 확인하기 위해 사용하는 출력 명령어입니다.

---

1. console.log()란 무엇인가?

console.log()는 웹 브라우저의 **'디버깅 콘솔'**에 메시지를 출력하는 역할을 합니다.

일반 사용자는 볼 수 없지만, 개발자는 이 도구를 통해 코드 뒷단에서 어떤 일이 벌어지고 있는지 실시간으로 감시할 수 있습니다.

비유하자면, 요리사가 요리 중간에 간이 맞는지 직접 먹어보는 **'기록용 수첩'**과 같습니다.

---

2. 사용법과 예제

사용법은 매우 간단합니다. 괄호 ( ) 안에 출력하고 싶은 내용물(값, 변수, 식 등)을 넣기만 하면 됩니다.

• 단순 텍스트 출력: 문자열은 큰따옴표(")나 작은따옴표(')로 감쌉니다.
• 변수 값 확인: 변수 이름을 넣으면 그 안에 저장된 값을 보여줍니다.
• 여러 값 동시에 출력: 쉼표(,)를 사용하여 여러 데이터를 한 번에 확인할 수 있습니다.

JavaScript

 

// 1. 기본 메시지 출력
console.log("프로그램이 시작되었습니다.");

// 2. 변수와 함께 출력
let score = 95;
console.log("현재 점수:", score); // "현재 점수: 95"

// 3. 연산 결과 출력
console.log(10 + 20 + 30); // 60

// 4. 불리언(참/거짓) 출력
console.log(10 > 5); // true

---

3. 왜 alert() 대신 console.log()를 쓸까요?

입문자들은 눈에 잘 띄는 alert()를 선호하기도 하지만, 실제 개발에서는 console.log()를 압도적으로 많이 사용합니다.

• 흐름의 방해: alert()는 확인 버튼을 누르기 전까지 모든 동작을 멈추지만, console.log()는 멈춤 없이 계속 실행됩니다.
• 가독성: 콘솔창에서는 객체({})나 배열([])의 복잡한 구조를 펼쳐서 상세히 볼 수 있습니다.
• 성능: 수백 번의 출력을 확인해야 할 때 alert()를 쓰면 수백 번 클릭해야 하지만, 콘솔은 한 번에 쭉 나열해 줍니다.

---

4. 꿀팁: 콘솔을 확인하는 방법

브라우저(크롬, 엣지 등)에서 다음 방법으로 콘솔창을 열 수 있습니다.

1. 키보드 상단의 F12 키를 누릅니다.
2. 'Console(콘솔)' 탭을 클릭합니다.
3. 내가 작성한 console.log()의 결과가 찍혀 있는 것을 확인합니다.

---

학습 정리

• **console.log()**는 개발자가 코드의 실행 과정을 추적하기 위해 사용하는 출력 함수이다.
• 쉼표(,)를 사용하여 문자열과 변수를 섞어서 출력하면 훨씬 알아보기 쉽다.
• 에러를 찾거나 변수의 현재 상태를 알고 싶을 때 가장 먼저 사용해야 하는 기술이다.

---

이제 자바스크립트의 눈과 귀가 되어줄 콘솔 사용법을 익히셨습니다!