[1] Console 객체의 메서드
console 객체
- 웹브라우저와 Node.js를 포함한 다양한 자바스크립트 실행 환경에서 사용할 수 있다.
- 웹브라우저에서 console 객체는 콘솔 출력을 돕는 다양한 기능을 제공한다.
- alert를 사용하는 것보다 사용 방법이 간단하고 부모 창의 동작을 간섭하지 않기 때문에 [high]프로그램의 동작을 확인하거나 디버깅을 할 때 자주 사용[/high]된다.
< Console 객체의 주요 메서드 >
[wptb id=2615][2] 콘솔에 텍스트 출력하기
문자열이나 변수 값을 콘솔에 로그로 출력하려면,
- console.log, console.info, console.warn, console.error 메서드를 사용한다.
- 이 메서드들이 받는 인수와 표시하는 문자열은 같다.
- 단지 메서드에 따라 로그 시작 부분에 주의 표식을 추가하는 등 로그 스타일이 다를 뿐이다.
console 객체의 메서드에는 인수 여러 개를 쉼표로 구분해서 넘길 수 있다. 그러면 각 값을 문자열로 표현한 후 공백 문자로 구분해서 순서대로 출력한다.
var a = [2, 4, 6];
console.log("배열", a, "의 길이는", a.length, "입니다.");
// → 배열 [2, 4, 6] 의 길이는 3 입니다.
값을 한 문자열로 연결해서 인수로 넘기면 공백 문자를 빼고 출력할 수 있다.
var a = [2, 4, 6];
console.log("배열" + a + "의 길이는" + a.length + "입니다.");
// → 배열2,4,6의 길이는3입니다.
또한 서식 문자열을 사용하여 값을 지정된 서식으로 변환해서 출력할 수 있다.
var name = "Tom"; var height = 172.5; console.log = "그의 이름은 %s 이며 키는 %f cm 입니다.", name, height); // → 그의 이름은 Tom 이며 키는 172.5 cm 입니다.
console 객체의 메서드에는 첫 번째 인수로 받은 문자열 안에 포함되어 있는 %s와 %f 등의 서식 문자열을 두 번째 이후 인수의 값으로 바꾸는 기능이 있다. 위 코드에서는
- %s → name
- %f → height
이때 각 값의 타입은 서식 문자열이 가리키는 타입으로 변환된다. 단, 자바스크립트 실행 환경에 따라 동작이 다를 수 있다.
< Console 객체의 메서드에서 사용할 수 있는 서식 문자열 >
[wptb id=2616][3] 객체의 프로퍼티를 목록으로 표시하기
console.dir 메서드
- 객체의 프로퍼티를 나열
- 인수로는 객체 하나를 받는다.
파이어폭스를 제외한 주요 웹브라우저에는 객체의 펼침 상태를 뜻하는 ▶마크가 표시된다.
▶마크를 클릭하면 객체 내부의 프로퍼티를 펼쳐서 볼 수 있다.
var p = {x:1, y:2};
console.dir(p);
크롬에서 표시되는 모습은 다음과 같다.
[4] 타이머
console.time와 console.timeEnd 메서드를 사용해서 특정 코드의 실행 시간을 측정할 수 있다. 타이머는 여러 개 만들 수 있다.
- console.time 메서드에 타이머 이름을 뜻하는 문자열을 인자로 넘겨 호출
- 실행 시간을 측정하는 작업이 끝난 후에
- console.timeEnd 메서드에 타이머 이름을 인수로 넘겨서 호출한다.
- 처리에 소용된 시간이 밀리초 단위로 표시된다.
console.time("answer_time");
alert("확인 버튼을 누르십시오");
console.timeEnd("answer_time");
// → answer_time: 1605.56201171875 ms
< 참고문헌 >
🔹주 참고문헌 : 모던 자바스크립트 입문 – 이소 히로시 지음, 서재원 옮김
🔹MDN Web Docs
