JavaScript2_브라우저와 자바스크립트

1. 브라우저도 객체다?

🔹window: 전역객체 Global Object-->내용이 너무많아서 나중에

2. DOM(Document Object Model): 문서 객체 모델

• DOM을 활용하면 JavaScript로 HTML 태그를 객체처럼 자유롭게 다룰 수 있다.
• 웹페이지에 나타난 HTML 문서 전체를 객체로 표현한 것.
• document 객체가 웹문서의 최상단 객체로 진입점의 역할을 함.
• document 객체를 활용하면 웹 페이지의 내부에 무엇이든 수정할 수 있고 새로운 컨텐츠를 만들어 낼 수도 있다.

console.log(document);//검사창에 객체가 아니라 DOM에 해당되는 HTML이 출력됨.
console.log(typeof document);
console.dir(document);//객체형태로 다양하게 출력되는걸 확인할 수 있음.

3.console.log와 console.dir 알아보기

🔹공통점: 파라미터로 전달받은 값을 콘솔에 출력함

const str = 'Codeit';
const num = 123;
const bool = true;
const arr = [1, 2, 3];
const obj = {
  name: 'Codeit',
  email: '[email protected]',
};

function func() {
  console.log('I love Codeit!');
}

console.log('--- str ---');
console.log(str);
console.dir(str);
console.log('--- num ---');
console.log(num);
console.dir(num);
console.log('--- bool ---');
console.log(bool);
console.dir(bool);
console.log('--- arr ---');
console.log(arr);
console.dir(arr);
console.log('--- obj ---');
console.log(obj);
console.dir(obj);
console.log('--- func ---');
console.log(func);
console.dir(func);

🔹차이점

1. 출력하는 자료형이 다르다.

: dir 메소드는 문자열 표시 형식으로 콘솔에 출력.

2. log는 값 자체에, dir은 객체의 속성에

: log 메소드는 파라미터로 전달받은 값을 위주로 출력하는 반면, dir 메소드는 객체의 속성을 좀 더 자세하게 출력. dir 메소드가 출력한 부분을 보면 객체의 유형이 먼저 출력되고, 함수 부분에서는 펼쳤을 때 함수가 가진 속성들을 더 보여줌(log 메소드는 펼쳐지지 않음)

3. log는 여러 개, dir은 하나만!

console.log(str, num, bool, arr, obj, func);
console.dir(str, num, bool, arr, obj, func);

둘 사이의 차이는 파라미터로 전달할 수 있는 값의 개수에도 있는데요.
log 메소드는 여러 값을 쉼표로 구분해서 전달하면 전달받은 모든 값을 출력하는 반면,
dir 메소드는 여러 값을 전달하더라도 첫 번째 값만 출력합니다.

4. DOM 객체를 다룰 때..

지난 시간에도 확인했듯 log와 dir 메소드의 가장 큰 차이는 DOM 객체를 다룰 때 나타납니다.
값에 좀 더 중점을 둔 log 메소드는 대상을 HTML 형태로 출력하고,
객체의 속성에 좀 더 중점을 둔 dir 메소드는 대상을 객체 형태로 출력합니다.

지금까지 console 객체의 log 메소드와 dir 메소드의 차이점에 대해 살펴봤는데요.
콘솔에서 값 자체를 확인하고 싶다면 log메소드를, 객체의 속성들을 살펴보고 싶다면 dir 메소드를 활용하면 좋을 것 같습니다.