HTML DOM console.table() 메서드 완벽 가이드: 데이터를 표 형태로 시각화하기

HTML DOM의 console.table() 메서드는 데이터를 깔끔하게 정리된 표(테이블) 형식으로 출력하는 기능을 제공합니다. 복잡한 배열이나 객체를 한눈에 파악하고 싶을 때 특히 유용하며, 배열의 각 요소가 테이블의 행(row)으로 배치되어 직관적인 구조로 표시됩니다.

이 메서드는 두 개의 매개변수를 받습니다. 필수 매개변수인 tabledata와 선택적 매개변수인 tablecolumns입니다.

문법(Syntax)

console.table() 메서드의 기본 문법은 다음과 같습니다.

console.table( tabledata, tablecolumns );

매개변수 설명

tabledata (필수): 테이블을 채우는 데 사용될 데이터를 나타냅니다. 객체(Object) 또는 배열(Array) 타입을 사용할 수 있습니다.
tablecolumns (선택): 테이블에 표시할 열(column)을 지정하는 배열입니다. 이 매개변수를 생략하면 모든 열이 표시됩니다.

예제 코드

다음은 HTML DOM console.table() 메서드를 활용한 실제 예제입니다.

<!DOCTYPE html>
<html>
<body>
<h1>console.table() Method</h1>
<p>아래 버튼을 클릭하면 콘솔 테이블이 생성됩니다</p>
<button type="button" onclick="createTable()">TABLE</button>
<script>
    function createTable(){
        var fruit1 = { Name : "Mango", price : "100", color: "Yellow" }
        var fruit2 = { Name : "Guava", price : "50", color:"Green" }
        var fruit3 = { Name : "Strawberry", price : "150", color:"Red" }
        console.table([fruit1, fruit2, fruit3], ["Name","price"]);
    }
</script>
<p>콘솔 탭에서 테이블을 확인하세요</p>
</body>
</html>

실행 결과

위 코드를 실행하면 화면에 TABLE 버튼이 나타납니다.

버튼을 클릭한 후 브라우저 개발자 도구(F12)의 콘솔(Console) 탭을 열어보면 과일 데이터가 정리된 표 형태로 출력된 것을 확인할 수 있습니다.

코드 상세 분석

1. 버튼 생성 및 클릭 이벤트 연결

먼저 사용자가 클릭하면 createTable() 함수가 실행되도록 버튼을 만들었습니다.

<button type="button" onclick="createTable()">TABLE</button>

2. 데이터 객체 생성 및 테이블 출력

createTable() 함수 내부에는 세 개의 객체가 생성되어 있으며, 각각 fruit1, fruit2, fruit3이라는 이름으로 선언되었습니다. 각 객체는 과일의 이름(Name), 가격(price), 색상(color) 정보를 담고 있습니다.

이 객체들을 배열로 묶어 console.table() 메서드의 첫 번째 매개변수(tableData)로 전달합니다.

3. 선택적 매개변수로 열 필터링

두 번째 선택적 매개변수에는 테이블에 포함하고 싶은 열 이름을 배열로 전달했습니다. 여기서는 “Name”과 “price” 열만 지정했기 때문에, 결과 테이블에는 이름과 가격 열만 나타나고 “color” 열은 표시되지 않습니다.

function createTable(){
    var fruit1 = { Name : "Mango", price : "100", color: "Yellow" }
    var fruit2 = { Name : "Guava", price : "50", color:"Green" }
    var fruit3 = { Name : "Strawberry", price : "150", color:"Red" }
    console.table([fruit1, fruit2, fruit3], ["Name","price"]);
}

정리

console.table() 메서드는 디버깅 과정에서 배열이나 객체 데이터를 시각적으로 분석할 때 매우 편리한 도구입니다. 두 번째 매개변수를 활용하면 필요한 열만 선택적으로 출력할 수 있어, 대량의 데이터에서 원하는 정보만 깔끔하게 확인할 수 있다는 장점이 있습니다.