대부분의 초보 프로그래머 또는 일부 중급 프로그래머는 JavaScript 101 레슨으로 배운 console.log만 사용하고 콘솔 개체에서 제공하는 다른 메서드는 사용하지 않습니다. 그래서 오늘의 블로그에서는 다음 프로젝트에서 반드시 사용하게 될 잘 사용되지 않는 다른 콘솔 방법을 소개하겠습니다.

console.log

console.log() 메서드는 모든 값을 수락하고 주어진 값을 콘솔에 출력합니다. 디버깅 목적으로 가장 많이 사용되는 방법입니다. 80%의 시간 동안 사용하게 될 것이라고 말하고 싶습니다. 전달한 값에 오류가 없으면 이 방법을 선택하십시오.

const fullName = "Jaxongir Rahimov"
console.log(fullName) // Jaxongir Rahimov is output to the console

콘솔.클리어

console.clear() 메서드는 인수를 허용하지 않으며 브라우저 콘솔에서만 작동합니다. 그리고 브라우저 콘솔이 너무 많은 명령문, 개체, 함수 등으로 채워진 경우 브라우저 콘솔을 지우는 데 사용됩니다. 그러나 브라우저 기록에서 모든 코드를 제거하지는 않으므로 수동으로 제거해야 합니다.

const person = {
  name: "Jaxongir",
  country: "Uzbekistan"
}
const isAllowedToDrink = promp("Are you over 18")

// all the above code is cleared from the browser console
console.clear() 

콘솔 오류

console.error()는 모든 오류 유형 및 출력을 허용합니다. 오류 유형 및 해당 오류의 원인을 나타내는 메시지. 대부분의 사람들은 오류 메시지를 표시하기 위해 로그 방법을 고수했습니다. 따라서 다음에 오류 메시지를 표시해야 하는 경우 이 방법보다

const error = new Error("Something went wrong!");
console.error(error);
// Error: Something went wrong!

const error = new SyntaxError("It's wrong syntax!");
console.error(error);
// SyntaxError: It's wrong syntax!

콘솔.경고

console.warn()은 console.error의 별칭이지만 콘솔에 오류 메시지가 아닌 경고 메시지를 표시하는 데 사용됩니다.

console.warn("Warning! you should'not use innerHTML for setting text")

console.info

console.info는 console.log의 별칭이지만 콘솔에 정보 텍스트를 표시하는 데 사용해야 합니다.

console.info("Modal should be centered")

콘솔.어설션

console.assert()는 console.error와 매우 유사하지만 첫 번째 인수로 부울 값이 필요하고 부울이 true로 평가되면 표시되고 그렇지 않으면 표시되지 않는 두 번째 인수로 메시지가 필요합니다. console.error를 조건부로 래핑할 필요가 없으므로 매우 편리합니다.

const balance = 0
console.assert(balance <= 0, "Your balance is empty, you can't withdraw money")

console.count 및 countReset

console.count()는 레이블을 허용하고 값이 제공되지 않은 경우 해당 레이블로 count()가 호출된 횟수를 표시합니다. 그리고 console.countReset()은 레이블 수를 0으로 재설정합니다.

console.count();
console.count();
console.count();
console.countReset();
console.count();
console.count();
/**
Output:
default: 1
default: 2
default: 3
default: 0
default: 1
default: 2
*/

const label = "label";
console.count(label);
console.count(label);
console.count(label);
/**
Output:
label: 1
label: 2
label: 3
*/

console.group 및 groupEnd

console.group은 메시지 그룹화를 시작합니다. 즉, 모든 콘솔 선언이 그 안에 중첩되고 groupEnd는 메시지 그룹화를 종료하고 groupEnd 이후 콘솔이 있는 모든 메시지 출력은 중첩된 개체 외부에 있게 됩니다. 콘솔에서 아래 예제를 시도하여 실제로 효과를 확인하십시오.

const label = "label";
console.group();
console.count(label);
console.count(label);
console.count(label);
console.groupEnd();
console.log("Outside group message nesting");

콘솔 테이블

console.table은 테이블 형식으로 데이터 배열을 표시해야 할 때 매우 유용합니다. 배열을 전달하기만 하면 결과가 브라우저 콘솔에 표 형식으로 출력됩니다. 열의 이름은 값이 프리미티브인 경우 인덱스가 되지만 개체인 경우 속성 이름이 열 이름이 됩니다. 브라우저에서 아래 예를 시도하십시오.

const people = [
  { name: "Samantha" },
  { name: "Gabriel" },
  { name: "Saruman" },
  { name: "KSI" },
];

console.table(people);

console.time 및 timeEnd

console.time() 및 console.timeEnd() 메서드는 특정 작업을 수행하는 데 걸리는 시간을 계산해야 할 때 편리합니다. 둘 다 레이블을 허용하며 레이블이 동일해야 합니다. time() 메서드는 타이머를 시작하고 timeEnd는 타이머를 중지하고 작업을 완료하는 데 걸린 시간을 ms 단위로 나타냅니다. 브라우저에서 아래 코드 시도

console.time("Label");
for (let i = 0; i < 10000; i++) {
  console.log(i);
}
console.timeEnd("Label");

콘솔.추적

console.trace() 메서드는 메시지를 수락하고 trace() 메서드가 호출된 위치에 따라 순서대로 호출되는 현재 호출 스택 또는 함수 순서로 해당 메시지를 출력합니다.

const func1 = () => {
  console.trace("Current Call-Stack Trace:");
};
const func2 = () => {
  func1();
};
const func3 = () => {
  func2();
};
const func4 = () => {
  func3();
};
func4();