모던 자바스크립트 딥다이브Chapter19~24

HYEON17·2023년 1월 9일
JavaScript스터디

WIL

목록 보기
4/13
post-thumbnail

19장: 프로토타입

19.1 객체지향 프로그래밍

  • 여러 개의 독립적 단위, 객체의 집합으로 프로그램을 표현하는 프로그래밍 패러다임
  • 다양한 속성 중에서 프로그램에 필요한 속성만 간추려 내어 표현하는 것을 추상화라고 함
  • 객체는 상태 데이터와 동작을 하나의 논리적인 단위로 묶은 복합적인 자료구조

19.2 상속과 프로토타입

상속은 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것

예제

// 생성자 함수
function Circle(radius) {
  this.radius = radius;
  this.getArea = function () {
    // Math.PI는 원주율을 나타내는 상수다.
    return Math.PI * this.radius ** 2;
  };
}

// 반지름이 1인 인스턴스 생성
const circle1 = new Circle(1);
// 반지름이 2인 인스턴스 생성
const circle2 = new Circle(2);

// Circle 생성자 함수는 인스턴스를 생성할 때마다 동일한 동작을 하는
// getArea 메서드를 중복 생성하고 모든 인스턴스가 중복 소유한다.
// getArea 메서드는 하나만 생성하여 모든 인스턴스가 공유해서 사용하는 것이 바람직하다.
console.log(circle1.getArea === circle2.getArea); // false

console.log(circle1.getArea()); // 3.141592653589793
console.log(circle2.getArea()); // 12.566370614359172


Circle생성자 함수는 인스턴스를 생성할 때마다 getArea메서드를 중복 생성하고 모든 인스턴스가 중복 소유하는 문제가 발생

해결책

자바스크립트는 프로토타입을 기반으로 상속을 구현

/ 생성자 함수
function Circle(radius) {
  this.radius = radius;
}

// Circle 생성자 함수가 생성한 모든 인스턴스가 getArea 메서드를
// 공유해서 사용할 수 있도록 프로토타입에 추가한다.
// 프로토타입은 Circle 생성자 함수의 prototype 프로퍼티에 바인딩되어 있다.
Circle.prototype.getArea = function () {
  return Math.PI * this.radius ** 2;
};

// 인스턴스 생성
const circle1 = new Circle(1);
const circle2 = new Circle(2);

// Circle 생성자 함수가 생성한 모든 인스턴스는 부모 객체의 역할을 하는
// 프로토타입 Circle.prototype으로부터 getArea 메서드를 상속받는다.
// 즉, Circle 생성자 함수가 생성하는 모든 인스턴스는 하나의 getArea 메서드를 공유한다.
console.log(circle1.getArea === circle2.getArea); // true

console.log(circle1.getArea()); // 3.141592653589793
console.log(circle2.getArea()); // 12.566370614359172

  • Circle생성자 함수가 생성하는 모든 인스턴스는 getArea 메서드를 상속받아 사용할 수 있다
  • 자신의 상태를 나타내는 radius 프로퍼티만 개별적으로 소유하고 내용이 동일한 메서드는 상속을 통해 공유하여 사용

19.3 프로토타입 객체

  • 객체지향 프로그래밍의 근간을 이후는 객체 간 상속을 구현하기 위해 사용
  • 프로토타입은 어떤 객체의 상위 객체의 역할을 하는 객체로서 다른 객체에 공유 프로퍼티를 제공
  • 객체가 생성될 때 객체 생성 방식에 따라 프로토타입이 결정되고 [[Prototype]]에 저장됨

19.3.1 proto 접근자 프로퍼티

  • 모든 객체는 __proto__ 접근자 프로퍼티를 통해 자신의 프로토타입, 즉 [[Prototype]] 내부 슬롯에 간접적으로 접근할 수 있다
  • 프로토타입 체인은 단방향 링크드 리스트로 구현되어야 함. 즉, 프로퍼티 검색 방향이 한쪽 방향으로만 흘러가야 한다

19.3.2 함수 객체의 prototype 프로퍼티

함수 객체만이 소유하는 prototype 프로퍼티는 생성자 함수가 생성할 인스턴스의 프로토타입을 가리킴

19.4 리터럴 표기법에 의해 생성된 객체의 생성자 함수와 프로토타입

프로토타입과 생성자 함수는 단독으로 존재할 수 없고 언제나 쌍으로 존재

19.5 프로토타입의 생성 시점

프로토타입은 생성자 함수가 생성되는 시점에 더불어 생성

19.5.1 사용자 정의 생성자 함수와 프로토타입 생성 시점

생성자 함수로서 호출 할수 있는 함수 constructor는 함수 정의가 평가되어 함수 객체를 생성하는 시점에 프로토타입도 더불어 생성

19.7 프로토타입 체인

  • 자바스크립트는 객체의 프로퍼티(메서드 포함)에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티가 없다면 [[Prototype]] 내부 슬롯의 참조를 따라 자신의 부모 역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색한다 이를 프로토타입 체인이라 한다
    • 프로토타입 체인은 자바스크립트가 객체지향 프로그래밍의 상속을 구현하는 메커니즘
  • Object.prototype을 프로토타입 체인의 종점이라 한다
    • [[Prototype]] 내부 슬롯의 값은 null이다
  • 프로토타입 체인의 종점에서도 프로퍼티를 검색할 수 없는 경우 undefined를 반환

19.8 오버라이딩과 프로퍼티 섀도잉

상속관계에 의해 프로퍼티가 가려지는 현상을 프로퍼티 섀도잉이라 한다

const Person = (function () {
  // 생성자 함수
  function Person(name) {
    this.name = name;
  }

  // 프로토타입 메서드
  Person.prototype.sayHello = function () {
    console.log(`Hi! My name is ${this.name}`);
  };

  // 생성자 함수를 반환
  return Person;
}());

const me = new Person('Lee');

// 인스턴스 메서드
me.sayHello = function () {
  console.log(`Hey! My name is ${this.name}`);
};

// 인스턴스 메서드가 호출된다. 프로토타입 메서드는 인스턴스 메서드에 의해 가려진다.
me.sayHello(); // Hey! My name is Lee

오버라이딩

상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의하여 사용하는 방식

오버로딩

함수의 이름은 동일하지만 매개변수의 타입 또는 개수가 다른 메서드를 구현하고 매개변수에 의해 메서드를 구별하여 호출하는 방식

프로토타입 프로퍼티를 변경 또는 삭제 하려면 프로토타입에 직접 접근해야 한다

// 프로토타입 메서드 변경
Person.prototype.sayHello = function () {
  console.log(`Hey! My name is ${this.name}`);
};
me.sayHello(); // Hey! My name is Lee

// 프로토타입 메서드 삭제
delete Person.prototype.sayHello;
me.sayHello(); // TypeError: me.sayHello is not a function

19.10 instanceof 연산자

instanceof 연산자는 이항 연산자로서 좌변에 객체를 가리키는 식별자, 우변에 생성자 함수를 가리키는 식별자를 피연산자로 받는다

객체 instanceof 생성자 함수

우변의 생성자 함수의 prototype에 바인딩된 객체가 좌변의 객체의 프로토타입 체인 상에 존재하면 true로 평가되고, 그렇지 않은 경우에는 false로 평가된다

// 생성자 함수
function Person(name) {
  this.name = name;
}

const me = new Person('Lee');

// Person.prototype이 me 객체의 프로토타입 체인 상에 존재하므로 true로 평가된다.
console.log(me instanceof Person); // true

// Object.prototype이 me 객체의 프로토타입 체인 상에 존재하므로 true로 평가된다.
console.log(me instanceof Object); // true

19.12 정적 프로퍼티/메서드

생성자 함수로 인스턴스를 생성하지 않아도 참조/호출할 수 있는 프로퍼티/메서드

// 생성자 함수
function Person(name) {
  this.name = name;
}

// 프로토타입 메서드
Person.prototype.sayHello = function () {
  console.log(`Hi! My name is ${this.name}`);
};

// 정적 프로퍼티
Person.staticProp = 'static prop';

// 정적 메서드
Person.staticMethod = function () {
  console.log('staticMethod');
};

const me = new Person('Lee');

// 생성자 함수에 추가한 정적 프로퍼티/메서드는 생성자 함수로 참조/호출한다.
Person.staticMethod(); // staticMethod

// 정적 프로퍼티/메서드는 생성자 함수가 생성한 인스턴스로 참조/호출할 수 없다.
// 인스턴스로 참조/호출할 수 있는 프로퍼티/메서드는 프로토타입 체인 상에 존재해야 한다.
me.staticMethod(); // TypeError: me.staticMethod is not a function

정적 프로퍼티/메서드는 생성자 함수가 생성한 인스턴스로 참조/호출할 수 없다

19.13 프로퍼티 존재 확인

19.13.1 in 연산자

in연산자는 객체 내에 특정 프로퍼티가 존재하는지 여부를 확인

/**
 * key: 프로퍼티 키를 나타내는 문자열
 * object: 객체로 평가되는 표현식
 */
key in object

const person = {
  name: 'Lee',
  address: 'Seoul'
};

// person 객체에 name 프로퍼티가 존재한다.
console.log('name' in person);    // true
// person 객체에 address 프로퍼티가 존재한다.
console.log('address' in person); // true
// person 객체에 age 프로퍼티가 존재하지 않는다.
console.log('age' in person);     // false

in 연산자는 확인 대상 객체의 프로퍼티뿐만 아니라 확인 대상 객체가 상속받은 모든 프로토타입의 프로퍼티를 확인하므로 주의가 필요

console.log('toString' in person); // true

in연산자 대신 Reflect.has 메서드를 사용할 수 있다

const person = { name: 'Lee' };

console.log(Reflect.has(person, 'name'));     // true
console.log(Reflect.has(person, 'toString')); // true

19.14 프로퍼티 열거

19.14.1 for...in 문

객체의 모든 프로퍼티를 순회하며 열거하려면 for...in문을 사용한다

for(변수선언문 in 객체){...}

const person = {
  name: 'Lee',
  address: 'Seoul'
};

// for...in 문의 변수 key에 person 객체의 프로퍼티 키가 할당된다.
for (const key in person) {
  console.log(key + ': ' + person[key]);
}
// name: Lee
// address: Seoul
  • for...in문은 객체의 프로퍼티 개수만큼 순회하며 for...in문의 변수 선언문에서 선언한 변수에 프로퍼티키를 할당
  • 프로퍼티키가 심벌인 프로퍼티는 열거하지 않음
  • 배열에서는 for..in문 보단 for문이나 for..of문을 사용하기를 권장

19.14.2 Object.keys/values/entries 메서드

Object.keys

객체 자신의 열거 가능한 프로퍼티 키를 배열로 반환

const person = {
  name: 'Lee',
  address: 'Seoul',
  __proto__: { age: 20 }
};

console.log(Object.keys(person)); // ["name", "address"]

Object.values

객체 자신의 열거 가능한 프로퍼티 값을 배열로 반환

console.log(Object.values(person)); // ["Lee", "Seoul"]

Object.entries

객체 자신의 가능한 프로퍼티 키와 값의 쌍의 배열을 배열에 담아 반환

console.log(Object.entries(person)); // [["name", "Lee"], ["address", "Seoul"]]

Object.entries(person).forEach(([key, value]) => console.log(key, value));
/*
name Lee
address Seoul
*/

20장: strict mode

20.2 strict mode의 적용

strict mode를 적용하려면 전역의 선두 또는 함수 몸체의 선두에 'use strict';를 추가한다

20.3 전역에 strict mode를 적용하는 것은 피하자

  • 전역에 적용한 strict mode는 스크립트 단위로 적용
  • 전역에 strict mode를 적용하는것은 바람직하지 않으므로 즉시 실행 함수로 스크립트 전체를 감싸서 스코프를 구분하고 즉시 실행 함수의 선두에 strict mode를 적용
// 즉시 실행 함수의 선두에 strict mode 적용
(function () {
  'use strict';

  // Do something...
}());

20.4 함수 단위로 strict mode를 적용하는 것도 피하자

strict mode는 즉시 실행 함수로 감싼 스크립트 단위로 적용하는것이 바람직

20.5 strict mode가 발생시키는 에러

20.5.1 암묵적 전역

선언하지 않은 변수를 참조하면 ReferenceError가 발생

20.5.2 변수, 함수, 매개변수의 삭제

delete연산자로 변수, 함수, 매개변수를 삭제하면 SyntaxError가 발생

20.5.3 매개변수 이름의 중복

중복된 매개변수 이름 사용시 SyntaxError가 발생

20.6 strict mode 적용에 의한 변화

20.6.1 일반 함수의 this

strict mode에서 함수를 일반 함수로서 호출하면 this에 undefined가 바인딩

20.6.2 arguments 객체

strict mode에서는 매개변수에 전달된 인수를 재할당하여 변경해도 arguments 객체에 반영되지 않음

21장: 빌트인 객체

21.1 자바스크립트 객체의 분류

21.2 표준 빌트인 객체

생성자 함수 객체인 표준 빌트인 객체는 프로토타입 메서드와 정적 메서드를 제공하고 생성자 함수 객체가 아닌 표준 빌트인 객체는 정적 메서드만 제공

21.3 원시값과 래퍼 객체

문자열, 숫자, 불리언 값에 대해 객체처럼 접근하면 생성되는 임시 객체를 래퍼 객체라 한다

21.4 전역 객체

코드가 실행되기 이전 단계에 자바스크립트 엔진에 의해 어떤 객체보다도 먼저 생성되는 특수한 객체이며, 어떤 객체에도 속하지 않은 최상위 객체

  • 브라우저 환경: window(또는 self, this, frames)
  • Node.js: global

var키워드로 선언한 전역 변수와 선언하지 않은 변수에 값을 할당한 암묵적 전역, 그리고 전역 함수는 전역 객체의 프로퍼티가 된다

// var 키워드로 선언한 전역 변수
var foo = 1;
console.log(window.foo); // 1

// 선언하지 않은 변수에 값을 암묵적 전역. bar는 전역 변수가 아니라 전역 객체의 프로퍼티다.
bar = 2; // window.bar = 2
console.log(window.bar); // 2

// 전역 함수
function baz() { return 3; }
console.log(window.baz()); // 3

let이나 const 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 아니다

let foo = 123;
console.log(window.foo); // undefined

21.4.1 빌트인 전역 프로퍼티

  • 전역 객체의 프로퍼티를 의미함
  • 주로 애플리케이션 전역에서 사용하는 값을 제공

21.4.2 빌트인 전역 함수

애플리케이션 전역에서 호출할 수 있는 빌트인 함수로서 전역 객체의 메서드

22장: this

22.1 this 키워드

  • this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수
  • this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조
  • this가 가리키는 값은 함수 호출 방식에 의해 동적으로 결정
// this는 어디서든지 참조 가능하다.
// 전역에서 this는 전역 객체 window를 가리킨다.
console.log(this); // window

function square(number) {
  // 일반 함수 내부에서 this는 전역 객체 window를 가리킨다.
  console.log(this); // window
  return number * number;
}
square(2);

const person = {
  name: 'Lee',
  getName() {
    // 메서드 내부에서 this는 메서드를 호출한 객체를 가리킨다.
    console.log(this); // {name: "Lee", getName: ƒ}
    return this.name;
  }
};
console.log(person.getName()); // Lee

function Person(name) {
  this.name = name;
  // 생성자 함수 내부에서 this는 생성자 함수가 생성할 인스턴스를 가리킨다.
  console.log(this); // Person {name: "Lee"}
}

const me = new Person('Lee');

22.2 함수 호출 방식과 this 바인딩

22.2.1 일반 함수 호출

  • 일반 함수로 호출하면 함수 내부의 this에는 전역 객체가 바인딩
  • 메서드 내에서 정의한 중첩 함수도 일반 함수로 호출되면 중첩 함수 내부의 this에는 전역 객체가 바인딩
  • 콜백 함수가 일반 함수로 호출되면 콜백 함수 내부의 this에도 전역 객체가 바인딩
  • 어떠한 함수라도 일반 함수로 호출되면 this에 전역 객체가 바인딩

메서드 내부의 중첩 함수나 콜백 함수의 this바인딩을 메서드의 this바인딩과 일치시키기 위한 방법

var value = 1;

const obj = {
  value: 100,
  foo() {
    // this 바인딩(obj)을 변수 that에 할당한다.
    const that = this;

    // 콜백 함수 내부에서 this 대신 that을 참조한다.
    setTimeout(function () {
      console.log(that.value); // 100
    }, 100);
  }
};

obj.foo();

22.2.2 메서드 호출

메서드 내부의 this는 메서드를 호출한 객체에 바인딩

24장: 클로저

24.1 렉시컬 스코프

자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정. 이를 렉시컬 스코프(정적 스코프)라 한다

24.2 함수 객체의 내부 슬롯 [[Environment]]

함수는 자신의 내부 슬롯 [[Environment]]에 자신이 정의된 환경, 즉 상위 스코프의 참조를 저장한다

24.3 클로저와 렉시컬 환경

  • 외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명 주기가 종료한 외부 함수의 변수를 참조할 수 있다. 이러한 중첩 함수를 클로저라 한다
  • 클로저는 중첩 함수가 상위 스코프의 식별자를 참조하고 있고 중첩 함수가 외부 함수보다 더 오래 유지되는 경우에 한정하는 것이 일반적

24.4 클로저의 활용

  • 클로저는 상태를 안전하게 변경하고 유지하기 위해 사용
    • 상태를 안전하게 은닉하고 특정 함수에게만 상태 변경을 허용

24.5 캡슐화와 정보 은닉

캡슐화는 객체의 상태를 나타내는 프로퍼티와 프로퍼티를 참조하고 조작할 수 있는 동작인 메서드를 하나로 묶는 것

profile
HYEON17
프론트엔드 개발자
이전 포스트

모던 자바스크립트 딥다이브Chapter13~18

다음 포스트

모던 자바스크립트 딥다이브Chapter25~30

0개의 댓글