TIL 211202 : Prototype, Object

🚀What I learned

최근 내가 듣고있는 node.js 강의가 있다. 강의 초반에 강사가 자바스크립트에서는 아래 3가지는 무조건 알고 넘어와야한다고 했지만, 내가 완벽하게 이해하고 있는 것이 없더라.
실행컨텍스트, 이벤트루프, 프로토타입
이벤트루프도 처음에는 이해가지 않았지만, 이해가 될 때 까지 여러 자료들을 찾아보니 어느순간 내용이 와닿았다. 나머지 개념들도 이해 될 때 까지 계속봐야겠다.

실행 컨텍스트
Object 생성 방법
console.dir()

Obejct 생성 방법 3가지

https://poiemaweb.com/js-object

1. 객체 리터럴

**가장 일반적인 자바스크립트의 객체 생성 방식이다. 클래스 기반 객체 지향 언어와 비교할 때 매우 간편하게 객체를 생성할 수 있다. 중괄호({})를 사용하여 객체를 생성하는데 {} 내에 1개 이상의 프로퍼티를 기술하면 해당 프로퍼티가 추가된 객체를 생성할 수 있다. {} 내에 아무것도 기술하지 않으면 빈 객체가 생성된다.

var emptyObject = {};
console.log(typeof emptyObject); // object
var person = {
  name: 'Lee',
  gender: 'male',
  sayHello: function () {
    console.log('Hi! My name is ' + this.name);
  }
};
console.log(typeof person); // object
console.log(person); // {name: "Lee", gender: "male", sayHello: ƒ}
person.sayHello(); // Hi! My name is Lee

2. Obejct 생성자

**사실 객체 리터럴 방식으로 생성된 객체는 결국 빌트인(Built-in) 함수인 Object 생성자 함수로 객체를 생성하는 것을 단순화시킨 축약 표현(short-hand)이다. 다시 말해, 자바스크립트 엔진은 객체 리터럴로 객체를 생성하는 코드를 만나면 내부적으로 Object 생성자 함수를 사용하여 객체를 생성한다. 따라서 개발자가 일부러 Object 생성자 함수를 사용해 객체를 생성해야 할 일은 거의 없다.

3. 생성자 함수

**생성자 함수를 사용하면 마치 객체를 생성하기 위한 템플릿(클래스)처럼 사용하여 프로퍼티가 동일한 객체 여러 개를 간편하게 생성할 수 있다.

// 생성자 함수
function Person(name, gender) {
  this.name = name;
  this.gender = gender;
  this.sayHello = function(){
    console.log('Hi! My name is ' + this.name);
  };
}
// 인스턴스의 생성
var person1 = new Person('Lee', 'male');
var person2 = new Person('Kim', 'female');

console.dir()

https://developer.mozilla.org/en-US/docs/Web/API/console/dir

console.dir()은 지정된 JS 객체의 속성에 대한 대화식 목록을 표시합니다. 출력은 하위 객체의 내용을 볼 수 있는 펼침 삼각형이 있는 계층 구조 목록으로 표시됩니다. 지정된 JavaScript 객체의 모든 속성을 보는 방법입니다.

매개변수(parameter, 인자) vs 인수(argument)

매개변수는 함수 내에서 변수와 동일하게 메모리 공간을 확보하며 함수에 전달한 인수는 매개변수에 할당된다. 만약 인수를 전달하지 않으면 매개변수는 undefined로 초기화된다.

var foo = function (p1, p2) {
  console.log(p1, p2);
};
foo(1); // 1 undefined

[[Prototype]] vs prototype 프로퍼티

function Person(name) {
  this.name = name;
}
var foo = new Person('Lee');
console.dir(Person); // prototype 프로퍼티가 있다.
console.dir(foo);    // prototype 프로퍼티가 없다.

[[Prototype]]
함수를 포함한 모든 객체가 가지고 있는 인터널 슬롯이다.
객체의 입장에서 자신의 부모 역할을 하는 프로토타입 객체를 가리키며 함수 객체의 경우 Function.prototype를 가리킨다. 그 이유에 대해서는 4.2 생성자 함수로 생성된 객체의 프로토타입 체인을 참조하기 바란다.

prototype 프로퍼티
함수 객체만 가지고 있는 프로퍼티이다.
함수 객체가 생성자로 사용될 때 이 함수를 통해 생성될 객체의 부모 역할을 하는 객체(프로토타입 객체)를 가리킨다.