1. 생성자

1. 생성자란?

• 생성자 함수란 new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수를 말한다. 생성자 함수에 의해 생성된 객체를 인스턴스라 한다.
• 자바스크립트는 Object 생성자 함수 이외에도 String, Number, Boolean, Function, Array, Date, RegExp, Promise 등의 빌트인 생성자 함수를 제공한다.

2. 장점

• 프로퍼티 구조가 동일한 객체 여러 개를 간편하게 생성할 수 있다

3. 단점

• new 연산자와 함께 생성자 함수를 호출하지 않으면 생성자 함수가 아니라 일반 함수로 동작한다.

2. this

51. this키워드

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기참조변수이다.

1. this 특징

1. 자바스크립트 엔진에 의해 암묵적으로 생성됨.
2. 코드 어디서든 참조할 수 있음
3. this바인딩(this가 가리키는 값)은 함수 호출 방식에 의해 동적으로 결정됨.

2. strict mode

this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로 객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있다.
strict mode가 적용된 일반 함수 내부의 this에는 undefined가
바인딩된다. 일반 함수 내부에서 this를 사용할 필요가 없기 때문이다.

2. 함수 호출 방식과 this바인딩

1. 렉시컬스코프와 this바인딩

렉시컬스코프는 함수 객체가 생성되는 시점에 상위 스코프를 결정한다.
this바인딩은 함수 호출 시점에 결정된다.

2. 함수 호출 방식

const foo = function () {
  console.dir(this);
};

1. 일반함수 호출 : 전역객체 window를 가리킴 (단 strict mode가 적용된 경우 undefined임)

foo();  window

this를 사용하고 싶다면
1. 4번 방법을 사용하여 this를 명시적으로 바인딩하는 방법.
2. 화살표 함수를 사용하여 this바인딩을 일치시킴 (화살표 함수의 this는 상위 스코프의 this를 가리킨다.)
3. this바인딩을 변수에 할당하여 사용

2. 메서드 호출 : 메서드를 호출한 객체를 가리킴

const obj = { foo };
obj.foo(); // obj

3. 생성자 함수 호출 : 생성자 함수가 생성한 인스턴스를 가리킴

new foo(); // foo {}

4. Function.prototype.apply/call/bind 메서드에 의한 간접 호출 : 인수에 의해 결정됨

const bar = { name: 'bar' };

foo.call(bar); // bar
foo.apply(bar); // bar
foo.bind(bar); // bar

apply메서드와 call메서드의 본질적인 기능은 함수를 호출하는 것!
함수를 호출하면서 첫번째 인수로 전달한 특정 객체를 호출한 함수의 this에 바인딩한다.

1. apply메서드 : 호출할 함수의 인수를 배열로 묶어서 전달
2. call메서드 : 호출할 함수의 인수를 쉼표로 구분한 리스트 형식으로 전달
3. bind메서드 : 첫번째 인수로 전달한 값으로 this바인딩이 교체된 함수를 새롭게 생성해 반환

2. call, apply, bind

1. call

• call메소드는 this를 특정값으로 지정할 수 있다.
• 첫번째 매개변수: this로 사용할 값, 매개변수가 더 있다면 호출하는 함수로 전달됨

const cookie = {
  name: 'Cookie',
}

function showName() {
  console.log(this.name);
}

function update(birth, job) {
  this.birth = birth;
  this.job = job;
}

update.call(cookie, 1992, 'singer');

2. apply

• apply는 대개 call과 동일하지만 매개변수를 배열로 받는다.

const cookie = {
  name: 'Cookie',
}

function showName() {
  console.log(this.name);
}

function update(birth, job) {
  this.birth = birth;
  this.job = job;
}

update.call(cookie, [1992, 'singer']);

3. bind

• bind를 사용하면 this값을 영구적으로 바꿀 수 있다.
• 새로운 함수를 생성하여 반환한다.

const cookie = {
  name: 'Cookie',
}

function update(birth, job) {
  this.birth = birth;
  this.job = job;
}

const updateCookie = update.bind(cookie);
updateCookie(1992, 'singer');

console.log(cookie);
// { name: 'Cookie', birth: 1992, job: 'singer' }

3. 콜백함수

1. 콜백함수란?

• 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백함수라고 한다.
• 대체적으로 비동기로 작동하지만 map, forEach, filter의 인자와 같이 동기식으로 호출되는 함수도 있음
• 콜백 함수 호출이 중첩되어 복잡도가 높아지는 현상을 콜백 지옥이라고 함

2. 콜백지옥을 해결하는 방법

1. Promise사용

• Promise도 콜백 지옥을 해결할 순 없었지만 비동기 함수 후속처리가 다루기 쉬워짐
• Promise.all(): 비동기를 병렬처리할 때 사용
• Promise.race(): 여러 비동기 처리를 다룰 때 가장 먼저 fulfilled된 처리 결과를 반환

2. async/await사용

• ES8에서 간단하고 가독성 좋게 비동기 처리를 동기 처리처럼 구현하기 위해 도입됨
• Promise기반으로 동작하며, then, catch, finally와 같은 후속처리메서드 없이 동기처리처럼 사용할 수 있음

const fetch = require('node-fetch');

async function fetchTodo() {
  const url = 'https://jsonplaceholder.typicode.com/todos/1';
  const response = await fetch(url);
  const todo = await response.json();
  console.log(todo);
}

fetchTodo();

1. async함수

• async함수는 async키워드를 사용해 정의하며, 언제나 프로미스를 반환함

2. await 키워드

• await키워드는 반드시 프로미스 앞에서 사용해야 하고, 프로미스가 settled상태가 될 때까지 대기하다가 settled상태가 되면 프로미스가 resolve한 처리 결과를 반환함

3. 에러처리

• async/await는 try...catch문을 사용하여 에러 처리를 할 수 있음
• async함수 내에서 catch문을 통해서 에러 처리를 하지 않으면 async함수는 발생한 에러를 reject하는 프로미스를 반환함