메시지나 데이터를 콘솔에 출력하는 함수

console.log()는 브라우저 콘솔과 Node.js 환경에서 메시지를 출력하는 기본 함수입니다.

이 함수는 코드의 흐름이나 내용을 파악하기 위해 디버깅과 변수 값 확인에 가장 쉽고, 널리 사용됩니다.

콘솔에 메시지 출력하기

자바스크립트 학습을 시작하는 분들이 가장 먼저 궁금해하는 것 중 하나는 "코드를 실행하면 결과가 어디에 나타날까?"입니다.

HTML 요소(버튼, 텍스트)는 화면에 보이지만, 자바스크립트 코드 자체의 명령이나 변수 값은 일반 사용자에게 보이지 않습니다. 이때 개발자들만 볼 수 있도록 결과를 출력해주는 공간이 바로 콘솔(Console)입니다.

콘솔은 주로 웹 브라우저의 개발자 도구(Developer Tools) 안에 들어있는 특별한 창입니다. 이 콘솔이 있어야 우리가 배우는 console.log() 함수가 메시지를 보낼 수 있습니다.

웹 브라우저에서 콘솔 창 여는 방법

이 창을 여는 방법은 아주 간단합니다. 크롬(Chrome)이나 엣지(Edge) 같은 브라우저에서 키보드의 F12 키를 누르거나, 마우스 오른쪽 버튼을 클릭하여 '검사' 또는 '요소 검사'를 누른 다음, 나타나는 창에서 'Console' 탭을 선택하기만 하면 됩니다.

크롬 브라우저에서 콘솔 창 - 캡쳐 화면
크롬 브라우저에서 콘솔 창 - 캡쳐 화면

Node.js 환경에서의 콘솔

웹 브라우저 외에 서버 환경(Node.js)에서 자바스크립트를 실행할 때는, 별도의 개발자 도구 없이 코드를 실행한 터미널(Terminal) 창에 메시지가 곧바로 나타납니다. console.log()는 이렇게 환경에 관계없이 결과를 확인하는 도구로 널리 사용됩니다.

기본 예제

JavaScript 
console.log("hello world!"); // 콘솔에 "hello world!"가 출력됩니다.

이 코드는 문자열 "hello world!"를 콘솔에 출력합니다. 간단한 메시지 출력부터 시작하면, 변수 값 확인이나 디버깅까지 쉽게 이해할 수 있습니다.

출력
console.log의 웹 콘솔 결과 화면
콘솔 창에서의 출력 화면

구문

JavaScript 
console.log(value1);
console.log(value1, value2);
console.log(value1, /* …, */ valueN);

매개변수

  • 출력하고자 하는 모든 종류의 데이터가 올 수 있습니다. 텍스트(문자열), 숫자, 변수, 배열, 객체 등 어떤 JavaScript 데이터 타입이든 전달할 수 있습니다.
  • 단일 또는 여러 개의 인자를 콤마(,)로 구분해 원하는 개수만큼 전달할 수 있습니다. 여러 개의 인자를 전달하면, 전달된 모든 값이 한 줄에 순서대로 출력됩니다. 이때, 자동으로 공백이 삽입되어 각 인자의 값이 구분됩니다.

반환 값

없음(undefined).

다양한 데이터 타입 출력

console.log()는 원하는 메시지가 어떤 타입을 가지고 있는지, 값은 무엇이든지 개발자가 이해하기 쉬운 형태로 콘솔에 출력해준다는 점입니다.
다음의 예제들에서는 다양한 데이터 타입별로 console.log()가 콘솔에 어떻게 출력되는지 살펴보고, 여러 값을 동시에 출력하는 방법까지 확인합니다.

문자열(String)

JavaScript 
let str = "Hello";
console.log(str);
출력

숫자(Number)

JavaScript 
let num = 123;
console.log(num);
출력

불리언(Boolean)

JavaScript 
let bool = true;
console.log(bool);
출력

배열(array)

단순 배열
JavaScript 
let arr = [1, 2, 3];
console.log(arr);
출력
혼합 배열
JavaScript 
let complex = [1, "text", true];
console.log(complex);
출력

객체(Object)

JavaScript 
let person = {
    name: "형",
    age: 25
}
console.log(person);
출력

null

JavaScript 
let n = null;
console.log(n);
출력

undefined

JavaScript 
let u = undefined;
console.log(u);
출력

함수

JavaScript - 일반 함수 선언식 
function greet(name) {
    return `Hello, ${name}!`;
}

console.log(greet);
출력
JavaScript - 일반 함수 표현식 
const add = function(a, b) {
    return a + b;
};

console.log(add);
출력
JavaScript - 화살표 함수 
const add = (a, b) => {
    return a + b;
};

console.log(add);
출력

NodeList

JavaScript 
// HTML 예시
// <ul>
//   <li>사과</li>
//   <li>바나나</li>
//   <li>체리</li>
// </ul>

const items = document.querySelectorAll("li");
console.log(items);
출력

Map - 여러 개의 console.log() 호출

JavaScript 
const emptyMap = new Map();
console.log(emptyMap); // 호출

const initializedMap = new Map([
    ["name", "Alice"],
    ["age", 25]
]);

console.log(initializedMap); // 호출
출력 console.log()가 호출된 순서대로 한 줄에 하나씩 출력됩니다.

여러 값 동시에 출력

JavaScript 
let a = 1;
let b = "text";
let c = [1, 2];
console.log(a, b, c);
출력 여러 값을 쉼표로 구분하면 한 줄에 순서대로 출력되며, 각 값 사이에는 자동으로 공백이 삽입됩니다.

활용 예제

console.log()는 값을 콘솔에 출력하는 가장 간단한 방법이지만, 값 자체만 보여줄 뿐 타입이나 크기를 명확히 표시하지 못하는 한계가 있습니다.
실무에서는 대부분 디버깅 목적으로 사용되며, 단순 출력보다는 변수 값 확인, 데이터 타입 점검, 배열/객체 크기 확인 등으로 활용됩니다.

아래 예제에서는 console.log()와 함께 데이터 타입과 크기를 확인하는 방법을 실습해 보겠습니다.

문자열 데이터 타입 확인

JavaScript 
let str = "Hello";

if (typeof str === "string") {
    console.log(`${str}은 문자열입니다.`);
} else {
    console.log(`${str}은 문자열이 아닙니다.`);
}

코드 부연설명
typeof 연산자는 피연산자의 데이터 타입을 문자열로 반환합니다.

출력

문자열 길이 확인

JavaScript 
let str = "Hello";
console.log(str.length);

코드 부연설명
문자열에서 length 속성은 문자열에 포함된 문자의 개수를 숫자 값으로 나타냅니다.

출력

배열 데이터 타입 확인

JavaScript 
let arr = [1, 2, 3];
let person = {
    name: "형",
    age: 25
}

console.log(Array.isArray(arr)); // true
console.log(Array.isArray(person)); // false

코드 부연설명
Array.isArray() 함수는 주어진 값이 배열인지 판별하는 데 사용됩니다.

출력

배열 길이 확인

JavaScript 
let arr = [1, 2, 3];
console.log(arr.length);

코드 부연설명
배열에서 length 속성은 배열에 포함된 요소의 개수를 숫자 값으로 타나냅니다.

출력

호환성

console.log() 함수의 호환성
메서드
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
Node.js
Node.js
console.log() 1 12 4 3 0.10

명세서

console.log() 함수의 명세서 사양
명세서 사양
console.log() Console
#log

참고문헌