[자바스크립트] 노답 디자이너의 코딩 배우기 - console.dir()

자바스크립트가 함수를 객체 타입의 값으로 평가한다고 해. console.dir(); 을 사용하면 객체로 사용된다는 걸 알 수 있다는데 어떻게 하는거야?

---

 

자바스크립트에서 함수는 사실 객체 타입의 값입니다. 함수는 실행 가능한 코드일 뿐만 아니라, 프로퍼티를 가질 수 있는 객체로도 취급됩니다. 이 때문에, 자바스크립트에서 함수는 일급 객체로 불리며, 다른 값들처럼 변수에 저장되거나 인자로 전달될 수 있습니다.

 

이제 console.dir()을 사용하여 함수가 객체로 평가되는 것을 확인하는 방법을 설명해드릴게요.

 

console.dir()란?

• **console.dir()**는 특정 객체의 속성을 트리 구조로 출력해주는 콘솔 메서드입니다.

• 이 메서드를 사용하면 함수 내부의 구조를 더 자세히 확인할 수 있습니다. 특히 함수가 단순히 코드 덩어리가 아니라 객체로서 어떤 프로퍼티를 가지는지를 볼 수 있게 해줍니다.

 

예시로 알아보기:

 

먼저 함수를 정의하고, 그 함수를 console.dir()로 출력해보겠습니다.

function sayHello() {
  console.log("Hello, world!");
}

// 함수 자체를 객체로 출력해보기
console.dir(sayHello);

 

결과:

 

console.dir(sayHello)를 사용하면, 함수가 객체처럼 다양한 속성을 가진다는 사실을 콘솔에서 확인할 수 있습니다. 트리 구조로 함수에 포함된 속성들이 나타나고, 그 속성 중에서 가장 자주 볼 수 있는 것들은 아래와 같습니다.

 

주요 속성:

• name: 함수의 이름을 나타냅니다.

• length: 함수가 기대하는 **매개변수(Parameter)**의 개수를 나타냅니다.

• prototype: 함수의 프로토타입 객체를 가리킵니다. 모든 함수는 prototype이라는 속성을 가지며, 이 속성은 해당 함수가 생성자 함수로 사용될 때 중요한 역할을 합니다.

• arguments: 호출될 때 전달된 인자를 참조합니다 (ES5 이후는 권장되지 않음).

• caller: 호출한 함수에 대한 참조를 제공합니다.

 

함수가 객체로 사용된다는 점:

 

자바스크립트에서 함수는 단순히 코드 블록이 아니라, 객체처럼 프로퍼티를 가질 수 있는 값이라는 점에서 강력합니다. 예를 들어, 함수에 직접 속성을 추가할 수도 있습니다.

function sayHi() {
  console.log("Hi");
}

sayHi.customProperty = "I'm a property of this function!";

console.log(sayHi.customProperty);  // "I'm a property of this function!"
console.dir(sayHi);

 

이렇게 sayHi 함수는 객체로 평가되기 때문에 새로운 속성을 추가할 수 있습니다. console.dir(sayHi)로 확인하면, 우리가 추가한 customProperty도 함수 객체의 속성으로 나타나는 것을 확인할 수 있어요.

 

정리:

1. 함수는 객체처럼 다룰 수 있습니다. 즉, 속성을 추가하거나 수정할 수 있습니다.

2. **console.dir()**을 사용하면 함수가 실제로 객체로서 어떤 속성을 가지고 있는지 트리 구조로 확인할 수 있습니다.

3. 자바스크립트에서 함수는 일종의 객체로 취급되므로, 함수에 대해 추가적인 정보나 구조를 보고 싶을 때 console.dir()이 유용합니다.

 

이 방식으로 함수가 단순한 코드 블록이 아니라 객체로서 다양한 기능을 가지고 있다는 것을 쉽게 확인할 수 있습니다!

 

 

console.dir 랑 typeof 랑 무슨 기능 차이가 있어?

---

 

**console.dir()**와 **typeof**는 자바스크립트에서 객체나 값의 정보를 확인할 때 사용하는 도구지만, 두 가지는 완전히 다른 목적을 가지고 있습니다. 그 차이를 쉽게 설명해드릴게요.

 

1. typeof

• 목적: 값의 데이터 타입을 확인하는 데 사용됩니다.

• 반환값: typeof는 **문자열(String)**로 해당 값의 데이터 타입을 반환합니다.

• 사용 예: 숫자, 문자열, 함수, 객체, 배열, null, undefined 등 다양한 값의 타입을 알기 위해 사용됩니다.

 

예시:

console.log(typeof 42);           // "number"
console.log(typeof "Hello");      // "string"
console.log(typeof true);         // "boolean"
console.log(typeof function(){}); // "function"
console.log(typeof {});           // "object"
console.log(typeof []);           // "object" (배열도 객체로 취급)
console.log(typeof null);         // "object" (특이한 경우)
console.log(typeof undefined);    // "undefined"

 

typeof의 주요 특징:

• 간단한 값의 데이터 타입을 알 수 있는 도구입니다.

• 함수는 **“function”**이라는 타입을 반환하는데, 이는 자바스크립트에서 특별한 경우입니다. 사실 함수도 객체의 한 종류이지만, typeof에서만 함수는 “function”이라고 반환됩니다.

 

2. console.dir()

• 목적: 객체의 속성 구조를 트리 형식으로 출력하는 데 사용됩니다.

• 반환값: console.dir()은 객체의 내부 구조를 시각적으로 표시합니다. 브라우저 콘솔에서 트리 형식으로 객체의 프로퍼티와 그 값을 탐색할 수 있습니다.

• 사용 예: 객체나 함수의 세부 구조나 속성을 시각적으로 확인하기 위해 사용됩니다.

 

예시:

let person = {
  name: "John",
  age: 30,
  greet: function() {
    console.log("Hello!");
  }
};

// console.dir을 사용해 객체의 구조를 시각적으로 확인
console.dir(person);

 

console.dir()의 주요 특징:

• 객체의 구조를 트리 형태로 표시합니다.

• 객체의 프로퍼티, 메서드 등을 모두 확인할 수 있고, 각 프로퍼티의 타입과 값을 자세히 볼 수 있습니다.

• 브라우저 콘솔에서 특히 유용하며, 복잡한 객체나 DOM 요소를 디버깅할 때 사용됩니다.

 

기능 차이 요약:

• typeof: 값의 데이터 타입을 간단히 문자열로 반환합니다. 값을 분석하는 데 사용할 수 있는 매우 기본적인 도구입니다. 함수는 “function”, 나머지는 “object”, “number”, “string” 등의 값을 반환합니다.

• console.dir(): 객체나 함수의 내부 구조와 속성을 트리 형식으로 시각화하여 표시합니다. 값을 탐색하고 구조를 분석하는 데 매우 유용한 도구입니다.

 

예시 비교:

function example() {
  console.log("This is a function");
}

// typeof로 함수의 타입 확인
console.log(typeof example);  // "function"

// console.dir로 함수의 내부 구조 확인
console.dir(example);  // 트리 형태로 함수의 속성 확인 (name, length, prototype 등)

 

• typeof example은 단순히 “function”이라고 반환하지만,

• console.dir(example)은 함수 객체의 프로퍼티(예: name, length, prototype 등)와 같은 구조적인 세부 정보를 보여줍니다.

 

요약:

• **typeof**는 값을 간단하게 분석해 데이터 타입을 문자열로 알려주는 도구입니다.

• **console.dir**는 객체나 함수의 세부 구조와 속성을 브라우저 콘솔에서 트리 형식으로 보여주는 디버깅 도구입니다.

 

typeof는 데이터 타입을 확인하는 간단한 도구로, console.dir은 객체 내부를 깊이 분석할 때 유용한 도구라고 생각하시면 됩니다.

 

객체나 함수의 내부 구조와 속성이 뭐야?

---

 

객체나 함수의 내부 구조와 속성을 이해하는 것은 자바스크립트에서 매우 중요한 개념입니다. 이 용어들이 무엇을 의미하는지 설명해드릴게요!

 

1. 객체의 내부 구조와 속성

 

자바스크립트에서 **객체(Object)**는 키(Key)-값(Value) 쌍으로 이루어진 데이터 구조입니다. 이때 키를 **속성(Property)**라고 부르고, 그 속성은 **값(Value)**을 가집니다. 객체의 내부 구조는 바로 이 속성들과 그 값들이 어떻게 구성되어 있는지를 의미합니다.

 

예시: 객체

let person = {
  name: "John",   // 속성 'name'과 그 값 'John'
  age: 30,        // 속성 'age'와 그 값 30
  greet: function() {   // 속성 'greet'과 그 값으로 함수가 들어있음
    console.log("Hello!");
  }
};

 

위 코드에서 person 객체의 내부 구조는 다음과 같은 속성들로 구성되어 있습니다:

• name: “John”이라는 값을 가진 속성

• age: 30이라는 값을 가진 속성

• greet: 함수를 값으로 가진 속성

 

이 속성(프로퍼티)들은 객체의 내부에서 관리하는 데이터입니다. 객체의 내부 구조는 객체가 어떤 속성과 메서드를 가지고 있는지, 그 속성의 값이 무엇인지로 구성됩니다.

 

console.dir(person)을 사용하면:

console.dir(person);

이 명령을 실행하면 브라우저 콘솔에서 객체의 내부 구조가 트리 형태로 표시됩니다. 이때 name, age, greet 등의 속성이 각각의 값을 가지고 있는지 확인할 수 있습니다.

 

2. 함수의 내부 구조와 속성

 

함수도 자바스크립트에서 객체로 취급되기 때문에, 함수 자체도 속성을 가질 수 있습니다. 즉, 함수는 코드 블록일 뿐만 아니라 여러 프로퍼티를 가진 복잡한 구조를 가지고 있습니다. 함수의 내부 구조는 그 함수 객체가 가지고 있는 특성들을 의미합니다.

 

예시: 함수

function sayHello() {
  console.log("Hello, world!");
}

 

이 함수의 내부 구조에는 여러 가지 속성이 있습니다:

• name: 함수의 이름을 나타내는 속성 (이 경우 "sayHello")

• length: 함수가 받을 수 있는 매개변수의 수를 나타내는 속성 (이 경우 0)

• prototype: 해당 함수가 생성자 함수로 사용될 때, 새로운 객체에 연결되는 속성입니다.

 

console.dir(sayHello)을 사용하면:

console.dir(sayHello);

 

이 명령을 실행하면 브라우저 콘솔에서 함수 객체의 내부 구조가 표시됩니다. 여기서 name, length, prototype 등의 속성을 확인할 수 있고, 함수가 단순한 코드 블록이 아니라 여러 속성을 가진 객체라는 점을 알 수 있습니다.

 

함수의 주요 속성:

1. name: 함수의 이름을 나타냅니다.

console.log(sayHello.name); // "sayHello"

 

2. length: 함수가 받을 수 있는 매개변수의 수를 나타냅니다.

console.log(sayHello.length); // 0 (sayHello는 매개변수가 없음)

 

3. prototype: 모든 함수는 prototype이라는 속성을 가집니다. 이는 해당 함수가 생성자 함수로 사용될 때 중요한 역할을 합니다. prototype 속성은 새로운 객체를 만들 때 그 객체가 상속받을 속성이나 메서드를 정의하는 곳입니다.

 

요약: 객체나 함수의 내부 구조와 속성

• 객체의 내부 구조는 키-값 쌍으로 이루어진 속성들이 어떻게 구성되어 있는지를 의미합니다. 각 속성은 객체가 가지고 있는 데이터 또는 **메서드(함수)**입니다.

• 함수의 내부 구조는 단순한 코드 블록 이상의 것을 가지고 있습니다. 함수는 자바스크립트에서 객체로 취급되기 때문에 여러 속성(name, length, prototype 등)을 가질 수 있으며, 이를 내부 구조라고 합니다.

 

console.dir()로 확인할 수 있는 내부 구조:

• 객체나 함수의 모든 속성과 값들을 트리 구조로 보여줍니다.

• 객체가 어떻게 구성되어 있는지, 함수가 어떤 특성을 가지고 있는지 시각적으로 탐색할 수 있습니다.

 

이제 객체나 함수의 내부 구조와 속성이 무엇을 의미하는지 더 잘 이해하셨을 거예요!