JavaScript 에센셜 | 위니북스

출력과 주석

1. 콘솔

자바스크립트에서 값을 출력하기 위해서는 console.log()를 사용합니다. console.log()를 이용하면 코드에서 사용되는 값이나 실행 과정을 개발자 도구의 콘솔 창에 출력할 수 있습니다. 아래 재생 버튼을 눌러 코드를 실행해보세요.

console.log('안녕하세요!');

위니북스에서 자바스크립트를 직접 실행하며 실습할 수 있습니다. 다만 위니북스의 콘솔이 개발자 도구의 콘솔과 동일하게 동작하지 않을 수 있습니다. 예를 들어, console.log('a', 'b', 'c')와 같이 여러개의 항목을 출력하는 코드에서는 첫번째 값만 출력되며, console.log(undefined)는 공백이 출력됩니다. 정확한 동작을 확인하기 위해서는 때에 따라서 콘솔을 확인해야 할 수 있습니다.

콘솔은 로그 뿐만 아니라 다음과 같이 다양한 기능을 제공합니다. 기능에 따라 값의 출력 형태가 다르게 나타나며, 개발자 도구에서 출력값들을 필터링할 수 있습니다. 지금은 가장 많이 사용되는 console.log()만 기억하셔도 충분합니다.

console.log('로그 메시지'); // 로그 메시지
console.error('오류 메시지'); // 오류 메시지
console.warn('경고 메시지'); // 경고 메시지
console.info('정보 메시지'); // 정보 메시지
console.table({ name: 'licat', age: 20 }); // 표 형태
console.clear(); // 출력 기록 초기화

console.log('로그 메시지'); // 로그 메시지
console.error('오류 메시지'); // 오류 메시지
console.warn('경고 메시지'); // 경고 메시지
console.info('정보 메시지'); // 정보 메시지
console.table({ name: 'licat', age: 20 }); // 표 형태
console.clear(); // 출력 기록 초기화

2. BOM (Browser Object Model) API

BOM은 Browser Object Model의 약자로, 브라우저와 상호작용할 수 있게하는 객체들의 집합을 나타냅니다. 브라우저 창이나 프레임을 제어할 수 있는 인터페이스를 제공하기 때문에 브라우저 크기 정보를 가져오거나, 알림창을 띄우거나, 페이지를 이동하는 등의 기능을 수행할 수 있습니다.

BOM에는 window 객체가 있습니다. window 객체는 브라우저의 최상위 객체이며, 이 객체 안에 여러 가지 도구들이 포함되어 있습니다. 아래 코드를 콘솔창에서 하나씩 실행해 확인해보세요.

window.alert('메시지 다이얼로그'); // 메시지 다이얼로그
window.confirm('응답 다이얼로그'); // 사용자의 응답(확인/취소) 다이얼로그
window.prompt('입력 다이얼로그'); // 입력 다이얼로그

window.alert('메시지 다이얼로그'); // 메시지 다이얼로그
window.confirm('응답 다이얼로그'); // 사용자의 응답(확인/취소) 다이얼로그
window.prompt('입력 다이얼로그'); // 입력 다이얼로그

우리가 앞서 배웠던 console.log 또한 window의 기능 중 하나입니다. 따라서 window.console.log()로 사용할 수도 있지만, 일반적으로 window를 생략해서 사용합니다. 위에서 사용한 window.alert()도 window를 생략하고 사용할 수 있습니다. 생략하고 사용하는 것이 일반적입니다.

이번에는 콘솔에 window만 출력해보세요. 브라우저에서 지원하는 다양한 기능을 확인할 수 있습니다.

BOM이나 뒤에서 배울 DOM(Document Object Model)은 ECMAScript 언어에 포함되는 영역이 아닙니다. BOM과 DOM은 각각 브라우저와 문서의 구조를 다루는 표준입니다. 각 브라우저는 BOM을 대부분 공통적으로 지원하지만, 브라우저마다 일부 차이가 있을 수 있습니다.

DOM Standard ECMA-262-Ecma International

3. 주석

주석은 코드의 가독성을 높이고 설명을 추가하기 위해 사용되는 텍스트입니다. 코드 실행 시 무시되기 때문에 프로그램의 동작에는 영향을 미치지 않습니다. 자바스크립트에서는 두 가지 주석을 사용할 수 있습니다.

3.1. 한 줄 주석

// 기호를 사용하여 주석을 시작합니다. //가 사용된 줄의 끝까지만 주석으로 처리됩니다. 다음과 같이 코드에 대한 설명을 주석으로 나타낼 수 있습니다.

// 이것은 한 줄 주석입니다. let age = 30; // 나이 let name = 'weniv'; // 이름 console.log(age); // 결과값: 30 console.log(name); // 결과값: weniv

또는 사용하지 않을 코드를 주석처리 할 수도 있습니다. 아래 코드에서 console.log(age)는 주석 처리가 되었기 때문에 실행되지 않습니다.

let age = 30; // 나이 let name = 'weniv'; // 이름 // console.log(age); // 결과값: 30 console.log(name); // 결과값: weniv

3.2. 여러 줄 주석

여러 줄에 걸쳐 주석을 작성할 때 사용됩니다. /*로 주석을 시작하고 */로 주석을 종료합니다. /*와 */ 사이의 모든 내용은 주석으로 처리됩니다.

/* 이 코드는 사용자의 나이와 이름을 저장합니다. 변수 age는 사용자의 나이를, 변수 name은 사용자의 이름을 나타냅니다. */ let age = 30; let name = 'weniv';

이처럼 주석을 이용하면 코드의 가독성을 높일 수 있으며, 협업 시 코드의 의도를 설명하는데 매우 유용하게 사용됩니다. 적절한 주석을 사용하여 코드의 기능과 목적을 명확하게 하는 것을 권장합니다.

JSDoc 주석
/**를 입력하고 엔터를 누르면 주석이 조금 다른 형태로 나타나는 것을 알 수 있습니다. 이것이 바로 JSDoc 주석입니다. JSDoc은 JavaScript 코드를 문서화하는 표준 방식으로, 코드에 대한 정보를 체계적으로 기록할 수 있게 해줍니다.

JSDoc 시작하기