JavaScript에서 개체 인쇄

1. console.log() 메서드를 사용하여 JavaScript에서 개체 인쇄
2. console.dir() 메서드를 사용하여 JavaScript에서 개체 인쇄
3. JavaScript에서 console.log()와 console.dir()의 차이점
4. JSON.stringify() 메서드를 사용하여 JavaScript에서 개체 인쇄
5. 결론

print 기능은 JavaScript의 주요 기능 중 하나입니다. 이 기사에서는 JavaScript에서 객체를 인쇄하는 일반적이고 쉬운 기술을 배웁니다.

JavaScript의 print 기능은 JavaScript 파일의 내용을 표시하거나 인쇄합니다. 개체 속성 또는 배열일 수 있습니다.

JavaScript에서 객체를 인쇄하는 방법에는 여러 가지가 있습니다.

console.log() 메서드를 사용하여 JavaScript에서 개체 인쇄

console.log() 함수는 JavaScript에서 객체를 인쇄하는 일반적인 방법입니다. 이 함수는 웹 콘솔에 인수를 표시/인쇄한 다음 결과로 문자열을 얻을 수 있습니다.

통사론:

console.log(object);

Sam 및 Roger 값을 포함하는 array라는 배열과 type 및 model과 같은 객체 속성을 포함하는 car라는 객체를 생성해 보겠습니다. 그런 다음 Ford 및 Mustang과 같은 속성에 값을 할당할 수 있습니다.

아래와 같이 console.log() 함수를 사용하여 배열과 객체를 인쇄할 수 있습니다.

예제 코드:

const array = ['Sam', 'Roger'];
const car = {
  type: 'Ford',
  model: 'Mustang'
};

console.log(array);
console.log(car);

이 코드를 실행하면 배열과 객체가 문자열 형식으로 표시됩니다.

출력:

예를 들어, 아래 코드에서 car 객체에는 type과 model이라는 두 가지 객체 속성이 있습니다. console.log() 함수는 이러한 속성을 인쇄하는 데 사용되었습니다.

예제 코드:

const car = {
  type: 'Ford',
  model: 'Mustang'
};

console.log(car.type);
console.log(car.model);

그 결과 자동차 유형 Ford와 모델 Mustang이 확보되었습니다.

출력:

또한 console.log() 함수를 사용하여 한 줄에 값을 인쇄할 수 있습니다.

예제 코드:

const car = {
  type: 'Ford',
  model: 'Mustang'
};

console.log(car.type, ',', car.model);

위의 코드는 아래 결과를 제공합니다.

출력:

console.dir() 메서드를 사용하여 JavaScript에서 개체 인쇄

console.dir() 함수는 JavaScript에서 객체를 인쇄하는 또 다른 방법입니다. 이를 통해 사용자는 지정된 개체의 속성을 대화형 목록이라고도 하는 계층적 목록으로 인쇄할 수 있습니다.

펼침 삼각형을 클릭하여 개체의 속성을 볼 수 있습니다.

통사론:

console.dir(object);

이전 예를 들어 보겠습니다. 아래와 같이 console.dir() 함수를 사용하여 객체의 속성을 출력할 수 있습니다.

여기서 car 개체는 코드의 유일한 개체이므로 지정할 필요가 없습니다.

예제 코드:

const car = {
  type: 'Ford',
  model: 'Mustang'
};

console.dir(car);

그 결과 콘솔에서 펼침 삼각형으로 개체를 획득할 수 있습니다. 클릭하면 다음과 같이 자식 개체를 볼 수 있습니다.

출력:

JavaScript에서 console.log()와 console.dir()의 차이점

console.log()와 console.dir()의 주요 차이점은 console.log() 함수가 개체의 toString 표현과 console.dir() 함수를 제공한다는 것입니다. JavaScript 개체 및 해당 속성의 대화형 목록을 제공합니다. 예를 들어 보겠습니다.

배열은 Ford, Toyota 및 BMW 값으로 선언되고 car 개체는 type 및 model 속성으로 선언됩니다.

배열과 객체 모두 console.log() 함수와 console.dir() 함수를 사용하여 표시됩니다. 처음 두 console.log() 함수의 결과로 toString 형식을 볼 수 있습니다.

예제 코드:

const array = ['Ford', 'Toyota', 'BMW'];
const car = {
  type: 'Ford',
  model: 'Mustang'
};

console.log(array);
console.log(car);
console.dir(array);
console.dir(car);

출력:

JSON.stringify() 메서드를 사용하여 JavaScript에서 개체 인쇄

웹 개발을 고려할 때 JSON은 웹 서버에서 데이터를 웹 서버로 데이터를 변환하는 데 사용됩니다. 데이터를 전송할 때 문자열 형식으로 웹 서버에 도달해야 합니다. 그렇지 않으면 오류가 발생하기 시작합니다.

이를 고려하여 JavaScript의 개체를 콘솔에 보내기 전에 문자열 형식으로 변환해야 합니다. 이를 위해 JavaScript는 JSON.stringify() 기능을 제공합니다.

이 기능을 통해 개체는 문자열 형식으로 변환된 다음 성공적으로 서버로 전송됩니다.

통사론:

JSON.stringify(object);

이전 개체인 car에 새 속성으로 HP를 추가해 보겠습니다. HP는 자동차의 마력을 의미합니다.

또한 HP는 값이 460인 숫자입니다. car 개체는 HP가 숫자이기 때문에 문자열로 변환하지 않고 콘솔로 구문 분석할 수 없습니다.

따라서 JSON.stringify() 함수를 사용하여 문자열로 변환해 보겠습니다.

먼저 객체에 새 속성을 HP로 추가하고 460을 값으로 지정한 다음 JSON.stringify() 함수를 사용하여 자동차 객체를 문자열로 변환합니다. JSON.stringify() 함수를 새 변수(carString)에 할당하고 console.log() 함수를 사용하여 새 변수를 인쇄합니다.

코드는 다음과 같습니다.

const car = {
  type: 'Ford',
  model: 'Mustang',
  HP: 460
};

let carString = JSON.stringify(car);
console.log(carString);

또한 JSON.stringify() 함수를 console.log() 함수의 인수로 만들어 새 변수를 선언하지 않고도 이 작업을 수행할 수 있습니다.

const car = {
  type: 'Ford',
  model: 'Mustang',
  HP: 460
};

console.log(JSON.stringify(car));

두 가지 방법의 결과는 객체의 문자열이지만 JSON 형식입니다.

출력:

결론

위의 방법을 사용하면 JavaScript에서 개체를 인쇄할 수 있음이 분명합니다. JavaScript에서 개체를 표시할 수 있는 console.table() 및 Object.entries()와 같은 몇 가지 메서드가 더 있지만 여기에서 설명하는 메서드는 가장 일반적이고 자주 사용됩니다.