일단 해보는 코딩노트

[JS] javaScript Study 19

2023-05-12T00:00:00+09:00

19장 프로토타입

자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어다.
자바스크립트는 클래스 기반 객체지향 프로그래밍 언어보다 효율적이며 더 강력한 객체지향 프로그래밍 능력을 지니고 있는 프로토타입 기반의 객체지향 프로그래밍 언어다.
자바스크립트는 객체 기반의 프로그래밍 언어이며 자바스크립트를 이루고 있는 거의 “모든 것”이 객체다. 원시 타입의 값을 제외한 나머지 값들(함수, 배열, 정규 표현식 등)은 모두 객체다.

19.1 객체지향 프로그래밍

객체지향 프로그래밍은 프로그램을 명령어 또는 함수의 목록으로 보는 전통적인 명령형 프로그래밍의 절차지향적 관점에서 벗어나 여러 개의 독립적 단위, 즉 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 말한다.
객체지향 프로그래밍은 실세계의 실체(사물이나 개념)을 인식하는 철학적 사고를 프로그래밍에 접목하려는 시도에서 시작한다. 실체는 특징이나 성질을 나타내는 속성을 가지고 있고, 이를 통해 실체를 인식하거나 구별할 수 있다.
속성을 통해 여러 개의 값을 하나의 단위로 구성한 복합적인 자료구조를 객체라 하며, 객체지향 프로그래밍은 독립적인 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임이다.
객체지향 프로그래밍은 객체의 상태를 나타내는 데이터와 상태 데이터를 조작할 수 있는 동작을 하나의 논리적인 단위로 묶어 생각한다. 따라서 객체는 상태 데이터와 동작을 하나의 논리적인 단위로 묶은 복합적인 자료구조라고 할 수 있다. 이때 객체의 상태 데이터를 프로퍼티, 동작을 메서드라 부른다.

19.2 상속과 프로토타입

상속은 객체지향 프로그래밍의 핵심 개념으로, 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것을 말한다.

  // 생성자 함수
  function Circle(radius) {
  	this.radius = radius;
  	this.getArea = function () {
  		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.1415921653589793
  console.log(circle2.getArea()); // 12.5663706148359172

동일한 생성자 함수에 의해 생성된 모든 인스턴스가 동일한 메서드를 중복 소유하는 것은 메모리를 불필요하게 낭비한다. 또한 인스턴스를 생성할 때마다 메서드를 생성하므로 퍼포먼스에도 악영향을 준다.

상속을 통해 불필요한 중복을 제거한다. 자바스크립트는 프로토타입을 기반으로 상속을 구현한다.

  // 생성자 함수
  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.1415921653589793
  console.log(circle2.getArea()); // 12.5663706148359172

Circle 생성자 함수가 생성한 모든 인스턴스는 자신의 프로토타입, 즉 상위(부모) 객체 역할을 하는 Circle, prototype의 모든 프로퍼티와 메서드를 상속받는다.
getArea 메서드는 단 하나만 생성되어 프로토타입인 Circle.prototype의 메서드로 할당되어 있다. 따라서 Circle 생성자 함수가 생성하는 모든 인스턴스는 getArea 메서드를 상속받아 사용할 수 있다.
즉, 자신의 상태를 나타내는 radius 프로퍼티만 개별적으로 소유하고 내용이 동일한 메서드는 상속을 통해 공유하여 사용하는 것이다.

상속은 코드의 재사용이란 관점에서 매우 유용하다. 생성자 함수가 생성할 모든 인스턴스가 공통적으로 사용할 프로퍼티나 메서드를 프로토타입에 미리 구현해 두면 생성자 함수가 생성할 모든 인스턴스는 별도의 구분없이 상위(부모) 객체인 프로토타입의 자산을 공유하여 사용할 수 있다.

19.3 프로토타입 객체

프로토타입 객체란 객체지향 프로그래밍의 근간을 이루는 객체 간 상속을 구현하기 위해 사용된다. 프로토타입은 어떤 객체의 상위(부모) 객체의 역할을 하는 객체로서 다른 객체에 공유 프로퍼티를 제공한다. 프로토타입을 상속받은 하위(자식) 객체는 상위 객체의 프로퍼티를 자신의 프로퍼티처럼 자유롭게 사용 할 수 있다.
모든 객체는 [[Prototype]]이라는 내부 슬롯을 가지며, 이 내부 슬롯의 값은 프로토타입의 참조다. [[Prototype]]에 저장되는 프로토타입은 객체 생성 방식에 의해 결정된다. 즉, 객체가 생성될 때 객체 생성 방식에 따라 프로토타입이 결정되고 [[Prototype]]에 저장된다.
모든 객체는 하나의 프로토타입을 갖는다. 그리고 모든 프로토타입은 생성자 함수와 연결되어 있다. 즉, 객체와 프로토타입과 생성자 함수는 서로 연결되어 있다.

proto 접근자 프로퍼티

모든 객체는 __proto__ 접근자 프로퍼티를 통해 자신의 프로토타입, 즉 [[Prototype]] 내부 슬롯에 간접적으로 접근할 수 있다.

proto 접근자 프로퍼티는 상속을 통해 사용한다.

 const person = { name: 'Lee' };
            
 // person 객체는 __proto__ 프로퍼티를 소유하지 않는다.
 console.log(person.hasOwnProperty('__proto__')); // false
            
 // __proto__ 프로퍼티는 모든 객체의 프로토타입 객체인 Object.prototype의 접근자 프로퍼티다.
 console.log(Object.getOwnPropertyDescriptor(Object.prototype, '__proto__'));
 // {get: f, set: f, enumerable: false, configurable: true}
            
 // 모든 객체는 Object.prototype의 접근자 프로퍼티 __proto__를 상속받아 사용할 수 있다.
 console.log({}.__proto__ === Object.prototype); true

proto 접근자 프로퍼티를 통해 프로토타입에 접근하는 이유
- [[Prototype]] 내부 슬롯의 값, 즉 프로토타입에 접근하기 위해 접근자 프로퍼티를 사용하는 이유는 상호 참조에 의해 프로토타입 체인이 생성되는 것을 방지하기 위해서다.
```
  const parent = {};
  const child = {};
                
  // child의 프로토타입을 parent로 설정
  child.__proto__ = parent;
  // parent의 프로토타입을 child로 설정
  parent.__proto__ = child; // TypeError: Cyclic __proto__ value
```
  - 프로토타입 체인은 단방향 링크드 리스트로 구현되어야 한다. 즉, 프로퍼티 검색 방향이 한쪽 방향으로만 흘러가야 한다.

proto 접근자 프로퍼티를 코드 내에서 직접 사용하는 것은 권장하지 않는다.

모든 객체가 proto 접근자 프로퍼티를 사용할 수 있는 것은 아니기 때문이다.

  // obj는 프로토타입 체인의 종점이다. 따라서 Object.__proto__를 상속받을 수 없다.
  const obj = Object.create(null);
                
  // obj는 Object.__proto__를 상속받을 수 없다.
  console.log(obj.__proto__); // undefined
                
  // 따라서 __proto__보다 Object.getPrototypeOf 메서드를 사용하는 편이 좋다.
  console.log(Object.getPrototypeOf(obj))); // null

proto 접근자 프로퍼티 대신 프로토타입의 참조를 취득하고 싶은 경우에는 Object.getPrototypeOf 메서드를 사용하고, 프로토타입을 교체하고 싶은 경우에는 Object.setPrototypeOf 메서드를 사용할 것을 권장한다.

  const obj = {};
  const parent = { x: 1 };
                
  // obj 객체의 프로토타입을 취득
  Object.getPrototypeOf(obj); // obj.__proto__;
  // obj 객체의 프로토타입을 교체
  Object. setPrototypeOf(obj, parent); // obj.__proto__ = parent;
                
  console.log(obj.x); // 1

Object.getPrototypeOf 메서드와 Object. setPrototypeOf 메서드는 get Object.prototype.proto 와 set Object.prototype.__proto__의 처리 내용과 정확히 일치한다.

함수 객체의 prototype 프로퍼티

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

 // 함수 객체는 prototype 프로퍼티를 소유한다.
 (function () {}).hasOwnProperty('prototype'); // -> true
        
 // 일반 객체는 prototype 프로퍼티를 소유하지 않는다.
 ({}).hasOwnProperty('prototype'); // -> false

non-constructor인 화살표 함수와 ES6 메서드 축약 표현으로 정의한 메서드는 prototype 프로퍼티를 소유하지 않으며 프로토타입도 생성하지 않는다.

 // 화살표 함수는 non-constructor다.
 const Person = name => {
 	this.name = name;
 };
        
 // non-constructor는 prototype 프로퍼티를 소유하지 않는다.
 console.log(Person.hasOwnProperty('prototype')); // false
        
 // non-constructor는 프로토타입을 생성하지 않는다.
 console.log(Person.prototype); // undefined
        
 // ES6의 메서드 축약 표현으로 정의한 메서드는 non-constructor다.
 const obj = {
 	foo() {}
 };
        
 // non-constructor는 prototype 프로퍼티를 소유하지 않는다.
 console.log(obj.foo.hasOwnProperty('prototype')); // false
        
 // non-constructor는 프로토타입을 생성하지 않는다.
 console.log(obj.foo.prototype); // undefined

모든 객체가 가지고 있는(엄밀히 말하면 Object.prototype으로부터 상속받은) __proto__ 접근자 프로퍼티와 함수 객체만이 가지고 있는 prototype 프로퍼티는 결국 동일한 프로토타입을 가리킨다.

구분	소유	값	사용 주체	사용 목적
proto
접근자 프로퍼티	모든 객체	프로토타입의 참조	모든 객체	객체가 자신의 프로토타입에 접근 또는 교체하기 위해 사용
prototype
프로퍼티	constructor	프로토타입의 참조	생성자 함수	생성자 함수가 자신이 생성할 객체(인스턴스)의 프로토타입을 할당하기 위해 사용

  // 생성자 함수
  function Person(name) {
  	this.name = name;
  }
        
  const me = new Person('Lee');
        
  // 결국 Person.prototype과 me.__proto__는 결국 동일한 프로퍼티를 가리킨다.
  console.log(Person.prototype === me.__proto__); // true

프로토타입의 constructor 프로퍼티와 생성자 함수
1. 모든 프로토타입은 constructor 프로퍼티를 갖는다. 이 constructor 프로퍼티는 prototype 프로퍼티로 자신을 참조하고 있는 생성자 함수를 가리킨다. 이 연결은 생성자 함수가 생성될 때, 즉 함수 객체가 생성될 때 이뤄진다.
```
 // 생성자 함수
 function Person(name) {
 	this.name = name;
 }
        
 const me = new Person('Lee');
        
 // me 객체의 생성자 함수는 Person이다.
 console.log(me.constructor === Person); // true
```
  - me 객체는 프로토타입의 constructor 프로퍼티를 통해 생성자함수와 연결된다. me 객체에는 constructor 프로퍼티가 있다. 따라서 me 객체는 프로토타입인 Person.prototype의 constructor 프로퍼티를 상속받아 사용할 수 있다.

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

// 객체 리터럴
const obj = {};

// 함수 리터럴
const add = function (a, b) { return a + b; };

// 배열 리터럴
cosnt arr = [1,2,3];

// 정규 표현식 리터럴
const regexp = /is/ig;

리터럴 표기법에 의해 생성된 객체도 물론 프로토타입이 존재한다. 하지만 리터럴 표기법에 희해 생성된 객체의 경우 프로토탙입의 constructor 프로퍼티가 가리키는 생성자 함수가 반드시 객체를 생성한 생성자 함수라고 단정할 수는 없다.
Object 생성자 함수에 인수를 전달하지 않거나 undefined 또는 null을 인수로 전달하면서 호출하면 내부적으로는 추상 연산 OrdinaryObjectCreate를 호출하여 Object.prototype을 프로토타입으로 갖는 빈 객체를 생성한다.
- 추상 연산은 ECMAScript 사양에서 내부 동작의 구현 알고리즘을 표현한 것이다.

// 2. Object 생성자 함수에 의한 객체 생성
// 인수가 전달되지 않았을 때 추상 연산 OrdinaryObjectCreate를 호출하여 빈 객체를 생성한다.
let obj = new Object();
console.log(obj); // {}

// 1. new.target이 undefined나 Object가 아닌 경우
// 인스턴스 -> Foo.prototype -> Object.prototype 순으로 프로토타입 체인이 생성된다.
class Foo extends Object {}
new Foo(); // Foo {}

// 3. 인수가 전달된 경우에는 인수를 객체로 반환한다.
// Number 객체 생성
obj = new Object(123);
console.log(obj); // Number {123}

// String 객체 생성
obj = new Object('123');
console.log(obj); // String {"123"}

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

따라서 프롱토타입의 constructor 프로퍼티를 통해 연결되어 있는 생성자 함수를 리터럴 표기법으로 생성한 객체를 생성한 생성자 함수로 생각해도 크게 무리는 없다. 리터럴 표기법에 의해 생성된 객체의 생성자 함수와 프로토타입은 다음과 같다.

리터럴 표기법	생성자 함수	프로토타입
객체 리터럴	Object	Object.prototype
함수 리터럴	Function	Function.prototype
배열 리터럴	Array	Array.prototype
정규 표현식 리터럴	RegExp	RegExp.prototype

19.5 프로토타입의 생성 시점

프로토타입은 생성자 함수가 생성되는 시점에 더불어 생성된다.
생성자 함수는 사용자가 직접 정의한 사용자 정의 생성자 함수와 자바스크립트가 기본 제공하는 빌트인 생성자 함수로 구분할 수 있다.
1. 사용자 정의 생성자 함수와 프로토타입 생성 시점
  1. 생성자 함수로서 호출할 수 있는 함수, 즉 constructor는 함수 정의가 평가되어 함수 객체를 생성하는 시점에 프로토타입도 더불어 생성된다.
    // 함수 정의(constructor)가 평가되어 함수 객체를 생성하는 시점에 프로토타입도 더불어 생성된다. console.log(Person.prototype); // {constructor: f} // 생성자 함수 function Person(name) { this.name = name; }
    - 생성된 프로토타입은 오직 constructor 프로퍼티만을 갖는 객체다. 프로토타입도 객체이고 모든 객체는 프로토타입을 가지므로 프로토타입도 자신의 프로토타입을 갖는다. 생성된 프로토타입의 프로토타입은 Object.prototype이다.
  2. 사용자 정의 생성자 함수는 자신이 평가되어 함수 객체로 생성되는 시점에 프로토타입도 더불어 생성되며, 생성된 프로토타입의 프로토타입은 언제나 Object.prototype이다.
2. 빌트인 생성자 함수와 프로토타입 생성 시점
  1. 빌트인 생성자 함수도 일반 함수와 마찬가지로 빌트인 생성자 함수가 생성되는 시점에 프로토타입이 생성된다. 모든 빌트인 생성자 함수는 전역 객체가 생성되는 시점에 생성된다. 생성된 프로토타입은 빌트인 생성자 함수의 prototype 프로퍼티에 바인딩된다.
  2. 객체가 생성되기 이전에 생성자 함수와 프로토타입은 이미 객체화되어 존재한다. 이후 생성자 함수 또는 리터럴 표기법으로 객체를 생성하면 프로토타입은 생성된 객체의 [[Prototype]] 내부 슬롯에 할당된다. 이로써 생성된 객체는 프로토타입을 상속받는다.

19.6 객체 생성 방식과 프로토타입의 결정

프로토타입은 추상 연산 OrdinaryObjectCreate에 전달되는 인수에 의해 결정된다. 이 인수는 객체가 생성되는 시점에 객체 생성 방식에 의해 결정된다.
1. 객체 리터럴에 의해 생성된 객체의 프로토타입
```
 const obj = {x: 1};
        
 // 객체 리터럴에 의해 생성된 obj 객체는 Object.prototype을 상속받는다.
 console.log(obj.constructor === Object); // true
 console.log(obj.hasOwnProperty('x'); // true
```
2. Object 생성자 함수에 의해 생성된 객체의 프로토타입
```
 const obj = new Object();
 obj.x = 1;
        
 // Object 생성자 함수에 의해 생성된 obj 객체는 Object.prototype을 상속받는다.
 console.log(obj.constructor === Object); // true
 console.log(obj.hasOwnProperty('x')); // true
```
  - 객체 리터럴과 Object 생성자 함수에 의한 객체 생성 방식의 차이는 프로퍼티를 추가하는 방식에 있다.
    - 객체 리터럴 방식은 객체 리터럴 내부에 프로퍼티를 추가한다.
    - Object 생성자 함수 방식은 빈 객체를 생성한 이후 프로퍼티를 추가한다.
3. 생성자 함수에 의해 생성된 객체의 프로토타입
  1. 생성자 함수에 의해 생성되는 객체의 프로토타입은 생성자 함수의 prototype 프로퍼티에 바인딩되어 있는 객체다.
  2. 표준 빌트인 객체인 Object 생성자 함수와 더불어 생성된 프로토타입 Object.prototype은 다양한 빌트인 메서드(hasOwnProperty, propertyIsEnumerable 등)를 갖고 있다. 하지만 사용자 정의 생성자 함수 Person과 더불어 생성된 프로토타입 Person.prototype의 프로퍼티는 constructor뿐이다.
```
 function Person(name) {
 	this.name = name;
 }
        
 // 프로토타입 메서드
 Person.prototype.sayHello = function () {
 	console.log('Hi! My name is ${this.name}');
 };
        
 const me = new Person('Lee');
 const you = new Person('Kim');
        
 me.sayHello(); // Hi! My name is Lee
 you.sayHello(); // Hi! My name is Kim
```

19.7 프로토타입 체인

function Person(name) {
	this.name = name;
}

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

const me = new Person('Lee');

// hasOwnProperty는 Object.prototype의 메서드다.
console.log(me.hasOwnProperty('name')); // true

Person 생성자 함수에 의해 생성된 me 객체는 Object.prototype의 메서드인 hasOwnProperty를 호출할 수 있다. 이것은 me 객체가 Person.prototype뿐만 아니라 Object.prototype도 상속받았다는 것을 의미한다. me 객체의 프로토타입은 Person.prototype이다.

Object.getPrototypeOf(me) === Person.prototype; // true

Person.prototype의 프로토타입은 Object.prototype이다. 프로토타입의 프로토타입은 언제나 Object.prototype이다.

Object.getPrototypeOf(Person.prototype) === Object.prototype; // true

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

// hasOwnProperty는 Object.prototype의 메서드다.
// me 객체는 프로토타입 체인을 따라 hasOwnProperty 메서드를 검색하여 사용한다.
me.hasOwnProperty('name'); // true

Object.prototype.hasOwnProperty.call(me, 'name');

프로토타입 체인의 최상위에 위치하는 객체는 언제나 Object.prototype이다. 따라서 모든 객체는 Object.prototype을 상속받는다. Object.prototype을 프로토타입 체인의 종점이라 한다. Object.prototype의 프로토타입, 즉 [[Prototype]] 내부 슬롯의 값은 null이다.
자바스크립트 엔진은 객체 간의 상속 관계로 이루어진 프로토타입의 계층적인 구조에서 객체의 프로퍼티를 검색한다. 따라서 프로토타입 체인은 상속과 프로퍼티 검색을 위한 메커니즘이라고 할 수 있다.
이에 반해, 자바스크립트 엔진은 함수의 중첩 관계로 이루어진 스코프의 계층적 구조에서 식별자를 검색한다. 따라서 스코프 체인은 식별자 검색을 위한 메커니즘이라고 할 수 있다.
스코프 체인과 프로토타입 체인은 서로 연관없이 별도로 동작하는 것이 아니라 서로 협력하여 식별자와 프로퍼티를 검색하는 데 사용된다.

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

프로토타입이 소유한 프로퍼티(메서드 포함)를 프로토타입 프로퍼티, 인스턴스가 소유한 프로퍼티를 인스턴스 프로퍼티라고 부른다.
- 프로토타입 프로퍼티와 같은 이름의 프로퍼티를 인스턴스에 추가하면 프로토타입 체인을 따라 프로토타입 프로퍼티를 검색하여 프로토타입 프로퍼티를 덮어쓰는 것이 아니라 인스턴스 프로티로 추가한다.
  - 이때 인스턴스 메서드 sayHello는 프로토타입 메서드 sayHello를 오버라이딩했고 프로토타입 메서드 sayHello는 가려진다. 이처럼 상속 관계에 의해 프로퍼티가 가려지는 현상을 프로퍼티 섀도잉이라 한다.
    - 오버라이딩 : 상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의하여 사용하는 방식이다.
    - 오버로딩 : 함수 이름은 동일하지만 매개변수의 타입 또는 개수가 다른 메서드를 구현하고 매개변수에 의해 메서드를 구별하여 호출하는 방식이다. 자바스크립트는 오버로딩을 지원하지 않지만 arguments 객체를 사용하여 구현할 수는 있다.
- 프로퍼티를 삭제하는 경우 인스턴스 메서드 sayHello가 삭제된다.
  - 하위 객체를 통해 프로토타입의 프로퍼티를 변경 또는 삭제하는 것은 불가능하다. 다시 말해 하위 객체를 통해 프로토타입에 get 액세스는 허용되나 set 액세스는 허용되지 않는다.
  - 프로토타입 프로퍼티를 변경 또는 삭제하려면 하위 객체를 통해 프로토타입 체인으로 접근하는 것이 아니라 프로토타입에 직접 접근해야 한다.

19.9 프로토타입의 교체

생성자 함수에 의한 프로토타입의 교체

 const Person = (function() {
 	function Person(name) {
 		this.name = name;
 	}
    
 	// 1 생성자 함수의 prototype 프로퍼티를 통해 프로토타입을 교체
 	Person.prototype = {
 		sayHello() {
 			console.log('Hi! My name is ${this.name}');
 		}
 	};
    
 	return Person;
 }());
    
 const me = new Person('Lee');

1에서 Person.prototype에 객체 리터럴을 할당했다. 이는 Person 생성자 함수가 생성할 객체의 프로토타입을 객체 리터럴로 교체한 것이다.

프로토타입으로 교체한 객체 리터럴에는 constructor 프로퍼티가 없다. constructor 프로퍼티는 자바스크립트 엔진이 프로토타입을 생성할 때 암묵적으로 추가한 프로퍼티다. 따라서 me 객체의 생성자 함수를 검색하면 Person이 아닌 Object가 나온다.

 // 프로토타입을 교체하면 constructor 프로퍼티와 생성자 함수 간의 연결이 파괴된다.
 console.log(me.constructor === Person); // false
 // 프로토타입 체인을 따라 Object.prototype의 constructor 프로퍼티가 검색된다.
 console.log(me.constructor === Object); // true

이처럼 프로토타입을 교체하면 constructor 프로퍼티와 생성자 함수 간의 연결이 파괴된다.
프로토타입으로 교체한 객체 리터럴에 constructor 프로퍼티를 추가하여 프로토타입의 constructor 프로퍼티를 되살린다.

 const Person = (function () {
 	function Person(name) {
 		this.name =name;
 	}
    
 	// 생성자 함수의 prototype 프로퍼티를 통해 프로토타입을 교체
 	Person.prototype = {
 		// constructor 프로퍼티와 생성자 함수 간의 연결을 설정
 		constructor: Person,
 		sayHello() {
 			console.log('Hi! My name is ${this.name}');
 		}
 	};
    
 	return Person;
 }());
    
 const me = new Person('Lee');
    
 // constructor 프로퍼티가 생성자 함수를 가리킨다.
 console.log(me.constructor === Person); // true
 console.log(me.constructor === Object); // false

인스턴스에 의한 프로토타입의 교체
1. 프로토타입은 생성자 함수의 prototype 프로퍼티뿐만 아니라 인스턴스의 proto 접근자 프로퍼티(또는 Object.getPrototypeOf 메서드)를 통해 접근할 수 있다. 따라서 인스턴스의 proto 접근자 프로퍼티(또는 Object.setPrototypeOf 메서드)를 통해 프로토타입을 교체할 수 있다.
2. 생성자 함수의 prototype 프로퍼티에 다른 임의의 객체를 바인딩하는 것은 미래에 생성할 인스턴스의 프로토타입을 교체하는 것이다. proto 접근자 프로퍼티를 통해 프로토타입을 교체하는 것은 이미 생성된 객체의 프로토타입을 교체하는 것이다.
```
 function Person(name) {
 	this.name = name;
 }
    
 const me = new Person('Lee');
    
 // 프로토타입으로 교체할 객체
 const parent = {
 	sayHello() {
 		console.log('Hi: My name is ${this.name}');
 	}
 };
    
 // 1 me 객체의 프로토타입을 parent 객체로 교체한다.
 Object.setPrototypeOf(me, parent);
 // 위 코드는 아래의 코드와 동일하게 동작한다.
 // me.__proto__ = parent;
    
 me.sayHello(); // Hi! My name is Lee
```

[JS] javaScript Study 18

2023-05-10T00:00:00+09:00

18장 함수와 일급 객체

18.1 일급 객체

다음과 같은 조건을 만족하는 객체를 일급객체라 한다.
1. 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다.
2. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다.
3. 함수의 매개변수에 전달할 수 있다.
4. 함수의 반환값으로 사용할 수 있다.

// 1. 함수는 무명의 리터럴로 생성할 수 있다.
// 2. 함수는 변수에 저장할 수 있다.
// 런타임(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당된다.
const increase = function (num) {
	return ++num;
};

const decrease = function (num) {
	return --num;
};

// 2. 함수는 객체에 저장할 수 있다.
const auxs = { increase, decrease };

// 3. 함수의 매개변수에 전달할 수 있다.
// 4. 함수의 반환값으로 사용할 수 있다. 
function makeCounter(aux) {
	let num = 0;
	
	return function () {
		num = aux(num);
		return num;
	};
}

// 3. 함수는 매겨변수에게 함수를 전달할 수 있다.
const increaser = makeCounter(auxs.increase);
console.log(increaser); // 1
console.log(increaser); // 2

// 3. 함수는 매겨변수에게 함수를 전달할 수 있다.
const decreaser = makeCounter(auxs.decrease);
console.log(decreaser); // -1
console.log(decreaser); // -2

함수가 일급 객체라는 것은 함수를 객체와 동일하게 사용할 수 있다는 의미다. 객체는 값이므로 함수는 값과 동일하게 취급할 수 있다. 따라서 함수는 값을 사용할 수 있는 곳(변수 할당문, 객체의 프로퍼티 값, 배열의 요소, 함수 호출의 인수, 함수 반환문)이라면 어디서든지 리터럴로 정의할 수 있으며 런타임에 함수 객체로 평가된다.
일급 객체로서 함수가 가지는 가장 큰 특징은 일반 객체와 같이 함수의 매개변수에 전달할 수 있으며, 함수의 반환값으로 사용할 수도 있다는 것이다. 이는 함수형 프로그래밍을 가능케 하는 자바스크립트의 장점 중 하나다.
함수는 객체이지만 일반 객체와는 차이가 있다. 일반 객체는 호출할 수 없지만 함수 객체는 호출할 수 있다. 그리고 함수 객체는 일반 객체에는 없는 함수 고유의 프로퍼티를 소유한다.

18.2 함수 객체의 프로퍼티

함수의 모든 프로퍼티의 프로퍼티 어트리뷰트를 Object.getOwnPropertyDescriptors 메서드로 확인한다.

  function square(number) {
  	return number * number;
  }
    
  console.log(Object.getOwnPropertyDescriptors(square));
  /*
  {
  	length: {value: 1, writable: false, enumerable: false, configurable: true},
  	name: {value: "square", writable: false, enumerable: false, configurable: true},
  	arguments: {value: null, writable: false, enumerable: false, configurable: false},	
  	caller: {value: null, writable: false, enumerable: false, configurable: false},
  	prototype: {value: {...}, writable: true, enumerable: false, configurable: false}
  }
  */
    
  // __proto__는 square 함수의 프로퍼티가 아니다.
  console.log(Object.getOwnPropertyDescriptor(square,'__proto__')); // undefined
    
  // __proto__는 Object.prototype 객체의 접근자 프로퍼티다.
  // square 함수는 Object.prototype 객체로붙 __proto__ 접근자 프로퍼티를 상속받는다.
  console.log(Object.getOwnPropertyDescriptor(Object.prototype,'__proto__')); 
  // {get: f, set: f, enumerable: false, configurable: true}

arguments, caller, length, name, prototype 프로퍼티는 일반 객체에는 없는 함수 객체의 고유의 프로퍼티다.
하지만 __proto__는 접근자 프로퍼티이며, 함수 객체 고유의 프로퍼티가 아니라 Object.prototype 객체의 프로퍼티를 상속받은 것을 알 수 있다.
Object.prototype 객체의 프로퍼티는 모든 객체가 상속받아 사용할 수 있다. 즉 Object.prototype 객체의 proto 접근자 프로퍼티는 모든 객체가 사용할 수 있다.

arguments 프로퍼티

함수 객체의 arguments 프로퍼티 값은 arguments 객체다. arguments 객체는 함수 호출 시 전달된 인수들의 정보를 담고 잇는 순회 가능한 유사 배열이며, 함수 내부에서 지역 변수처럼 사용된다. 즉, 함수 외부에서는 참조할 수 없다.

 function multiply(x, y) {
 	console.log(arguments);
 	return x * y;
 }
    
 console.log(multiply()); // NaN
 console.log(multiply(1)); // NaN
 console.log(multiply(1,2)); // 2
 console.log(multiply(1,2,3)); // 2

선언된 매개변수의 개수보다 인수를 적게 전달했을 경우 인수가 전달되지 않은 매개변수는 undefined로 초기화된 상태를 유지한다. 매개변수의 개수보다 인수를 더 많이 전달한 경우 초과된 인수는 무시된다.
그렇다고 초과된 인수가 그냥 버려지는 것은 아니다. 모든 인수는 암묵적으로 arguments 객체의 프로퍼티로 보관된다.

 multiply()`
 Arguments [callee: f, Symbol(Symbol.iterator): f]
 - callee: f multiply(x,y)
   length: 0
 - Symbol(Symbol.iterator): f values()
 - __proto__: Object
    
 => NaN
    
 multiply(1)
 Arguments [callee: f, Symbol(Symbol.iterator): f]
   0: 1
 - callee: f multiply(x,y)
   length: 1
 - Symbol(Symbol.iterator): f values()
 - __proto__: Object
    
 => NaN
    
 multiply(1,2)
 Arguments [callee: f, Symbol(Symbol.iterator): f]
   0: 1 
   1: 2
 - callee: f multiply(x,y)
   length: 2
 - Symbol(Symbol.iterator): f values()
 - __proto__: Object
    
 => 2
    
 multiply(1,2,3)
 Arguments [callee: f, Symbol(Symbol.iterator): f]
   0: 1 
   1: 2
   2: 3
 - callee: f multiply(x,y)
   length: 3
 - Symbol(Symbol.iterator): f values()
 - __proto__: Object
    
 => 2

arguments 객체는 인수를 프로퍼티 값으로 소유하며 프로퍼티 키는 인수의 순서를 나타낸다. arguments 객체의 callee 프로퍼티는 호출되어 arguments 객체를 생성한 함수, 즉 함수 자신을 가리키는 arguments 객체의 length 프로퍼티는 인수의 개수를 가리킨다.

arguments 객체의 Symbol(Symbol.iterator) 프로퍼티
- arguments 객체를 순회 가능한 자료구조인 이터러블로 만들기 위한 프로퍼티다. Symbol.iterator를 프로퍼티 키로 사용한 메서드를 구현하는 것에 의해 이터러블이 된다.

  function multiply(x,y) {
  	// 이터레이터
  	const iterator = arguments[Symbol.iterator]();
        	
  	// 이터레이터의 next 메서드를 호출하여 이터러블 객체 arguments를 순회
  	console.log(iterator.next()); // {value: 1, done: false}
  	console.log(iterator.next()); // {value: 2, done: false}
  	console.log(iterator.next()); // {value: 3, done: false}
  	console.log(iterator.next()); // {value: undefined, done: true}
        
  	return x*y;
  }
        
  multiply(1,2,3);

함수가 호출되면 인수 개수를 확인하고 이에 따라 함수의 동작을 달리 정의할 필요가 있을 수 있다. 이때 유용하게 사용되는 것이 arguments 객체다.
arguments 객체는 매개변수 개수를 확정할 수 없는 가변 인자 함수를 구현할 때 유용하다.

  function sum() {
  	let res = 0;
        
  	// arguments 객체는 length 프로퍼티가 있는 유사 배열 객체이므로 for 문으로 순회할 수 있다.
  	for(let i=0;i<arguments.length;i++) {
  		res += arguments[i];
  	}
        
  	return res;
  }
        
  console.log(sum()); // 0
  console.log(sum(1,2)); // 3
  console.log(sum(1,2,3)); // 6

유사 배열 객체는 배열이 아니므로 배열 메서드를 사용할 경우 에러가 발생한다. 따라서 배열 메서드를 사용하려면 Function.prototype.call, Function.prototype.apply를 사용해 간접 호출해야 하는 번거로움이 있다.

  function sum() {
  	// arguments 객체를 배열로 변환
  	const array = Array.prototype.slice.call(arguments);
  	return array.reduce(function (pre, cur) {
  		return pre + cur;
  	}, 0);
  }
            
  console.log(sum(1,2)); // 3
  console.log(sum(1,2,3,4,5)); // 15

이러한 번거러움을 해결하기 위해 ES6에서는 Rest 파라미터를 도입했다.

  //ES6 Rest parameter
  function sum(...args) {
  	return args.reduce((pre, cur) => pre + cur,0);
  }
            
  console.log(sum(1,2)); // 3
  console.log(sum(1,2,3,4,5)); // 15

caller 프로퍼티
1. 관심이 없다면 지나치래 ㅋㅋ ㄱㅇㄷ
length 프로퍼티
1. 함수 객체의 length 프로퍼티는 함수를 정의할 때 선언한 매개변수의 개수를 가리킨다.
  1. arguments 객체의 length 프로퍼티와 함수 객체의 length 프로퍼티의 값은 다를 수 있으므로 주의해야 한다.
  2. arguments 객체의 length 프로퍼티는 인자의 개수를 가리키고, 함수 객체의 length 프로퍼티는 매개변수의 개수를 가리킨다.
```
 function foo() {}
 console.log(foo.length); // 0
    
 function bar(x) {
 	return x;
 }
 console.log(bar.length); // 1
    
 function bar(x,y) {
 	return x*y;
 }
 console.log(bar.length); // 2
```

name 프로퍼티

함수 객체의 name 프로퍼티는 함수 이름을 나타낸다. ES6에서 정식 표준이 되었다.

 // 기명 함수 표현식
 var namedFunc = function foo() {};
 console.log(namedFunc.name); // foo
    
 // 익명 함수 표현식
 var anonymousFunc = function() {};
 // ES5: name 프로퍼티는 빈 문자열을 값으로 갖는다.
 // ES6: name 프로퍼티는 함수 객체를 가리키는 변수 이름을 값으로 갖는다.
 console.log(anonymousFunc.name); // anonymousFunc
    
 // 함수 선언문
 function bar() {}
 console.log(bar.name); // bar

proto 접근자 프로퍼티
1. 모든 객체는 [[Prototype]]이라는 내부 슬롯을 갖는다. [[Prototype]] 내부 슬롯은 객체지향 프로그래밍의 상속을 구현하는 프로토타입 객체를 가리킨다.
2. proto 프로퍼티는 [[Prototype]] 내부 슬롯이 가리키는 프로토타입 객체에 접근하기 위해 사용하는 접근자 프로퍼티다. 내부 슬롯에는 직접 접근할 수 없고 간접적인 접근 방법을 제공하는 경우에 한하여 접근할 수 있다.
```
 const obj = { a: 1 };
    
 // 객체 리터럴 방식으로 생성한 객체의 프로토타입 객체는 Object.prototype이다.
 console.log(obj.__proto__ === Object.prototype); // true
    
 // 객체 리터럴 방식으로 생성한 객체는 프로토타입 객체인 Object.prototype의 프로퍼티를 상속받느나.
 // hasOwnProperty 메서드는 Object.prototype의 메서드다.
 console.log(obj.hasOwnProperty('a')); // true
 console.log(obj.hasOwnProperty('__proto__')); // false
```
- hasOwnProperty 메서드는 이름에서 알 수 있듯이 인수로 전달받은 프로퍼티 키가 객체 고유의 프로퍼티 키인 경우에만 true를 반환하고 상속받은 프로토타입의 프로퍼티 키인 경우 false를 반환한다.
prototype 프로퍼티
1. prototype 프로퍼티는 생성자 함수로 호출할 수 있는 함수 객체, 즉 constructor만이 소유하는 프로퍼티다. 일반 객체와 생성자 함수로 호출할 수 없는 non-constructor에는 prototype 프로퍼티가 없다.
2. prototype 프로퍼티는 함수가 객체를 생성하는 생성자 함수로 호출될 때 생성자 함수가 생성할 인스턴스의 프로토타입 객체를 가리킨다.
```
 // 함수 객체는 prototype 프로퍼티를 소유한다.
 (function () {}).hasOwnProperty('prototype'); // true
        
 // 일반 객체는 prototype 프로퍼티를 소유하지 않는다.
 ({}).hasOwnProperty('prototype'); // false
```

[JS] javaScript Study 17

2023-05-07T00:00:00+09:00

17장 생성자 함수에 의한 객체 생성

객체 리터럴을 사용하여 객체를 생성하는 방식과 생성자 함수를 사용하여 객체를 생성하는 방식과의 장단점을 살펴보자

17.1 Object 생성자 함수

new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다. 빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성할 수 있다.

  // 빈 객체의 생성
  const person = new Object();
    
  // 프로퍼티 추가
  person.name = 'Lee';
  person.sayHello = function() {
  	console.log('Hi! My name is ' + this.name);
  };
    
  console.log(person); // {name: "Lee", sayHello: f}
  person.sayHello(); // Hi! My name is Lee

생성자 함수란 new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수를 말한다. 생성자 함수에 의해 생성된 객체를 인스턴스라 한다.

자바스크립트는 Object 생성자 함수 이외에도 String, Number, Boolean, Function, Array, Date, RegExp, Promise 등의 빌트인 생성자 함수를 제공한다.

  // String 생성자 함수에 의한 String 객체 생성
  const strObj = new String('Lee');
  console.log(typeof strObj); // object
  console.log(strObj); // String {"Lee"}
        
  // Number 생성자 함수에 의한 Number 객체 생성
  const numObj = new Number(123);
  console.log(typeof numObj); // object
  console.log(numObj); // Number {123}
        
  // Boolean 생성자 함수에 의한 Boolean 객체 생성
  const boolObj = new Boolean(true);
  console.log(typeof boolObj); // object
  console.log(boolObj); // Boolean {true}
        
  // Function 생성자 함수에 의한 Function 객체(함수) 생성
  const func = new Function('x','return x * x');
  console.log(typeof func); // function
  console.log(func); // f anonymous(x)
        
  // Array 생성자 함수에 의한 Array 객체(배열) 생성
  const arr = new Array(1, 2, 3);
  console.log(typeof arr); // object
  console.log(arr); // [1, 2, 3]
        
  // RegExp 생섣ㅇ자 함수에 의한 RegExp 객체(정규 표현식) 생성
  const regExp = new RegExp(/ab+c/i);
  console.log(typeof regExp); // object
  console.log(regExp); // /ab+c/i
        
  // Date 생성자 함수에 의한 Data 객체 생성
  const data = new Date();
  console.log(typeof data); // object
  console.log(date); // Mon May 04 2020 08:36:33 GMT+0900 (대한민국 표준시)

반드시 Object 생성자 함수를 사용해 빈 객체를 생성해야하는 것은 아니다. 객체를 생성하는 방법은 객체 리터럴을 사용하는 것이 더 간편하다. Object 생성자 함수를 사용해 객체를 생성하는 방식은 특별한 이유가 없다면 그다지 유용해 보이지 않는다.

17.2 생성자 함수

객체 리터럴에 의한 객체 생성 방식의 문제점
1. 객체 리터럴에 의한 객체 생성 방식은 직관적이고 간편하다. 하지만 객체 리터럴에 의한 객체 생성 방식은 단 하나의 객체만 생성한다. 따라서 동일한 프로퍼티를 갖는 객체를 여러 개 생성해야 하는 경우 매번 같은 프로퍼티를 기술해야 하기 때문에 비효율적이다.
```
 const circle1 = {
 	radius: 5,
 	getDiameter() {
 		return 2 * this.radius;
 	}
 };
    
 console.log(circle1.getDiameter()); // 10
    
 const circle2 = {
 	radius: 10,
 	getDiameter() {
 		return 2 * this.radius;
 	}
 };
    
 console.log(circle2.getDiameter()); // 20
```
1. 객체는 프로퍼티를 통해 객체 고유의 상태를 표현한다. 그리고 메서드를 통해 상태 데이터인 프로퍼티를 참조하고 조작하는 동작을 표현한다. 따라서 프로퍼티는 객체마다 프로퍼티 값이 다를 수 있지만 메서드는 내용이 동일한 경우가 일반적이다.
2. 각체 리터럴에 의해 객체를 생성하는 경우 프로퍼티 구조가 동일함에도 불구하고 매번 같은 프로퍼티와 메서드를 기술해야 한다.

생성자 함수에 의한 객체 생성 방식의 장점

생성자 함수에 의한 객체 생성 방식은 마치 객체(인스턴스)를 생성하기 위한 템플릿(클래스)처럼 생성자 함수를 사용하여 프로퍼티 구조가 동일한 객체 여러 개를 간편하게 생성할 수 있다.

 // 생성자 함수
 function Circle(radius) {
 	// 생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킨다.
 	this.radius = radius;
 	this.getDiameter = function () {
 		return 2 * this.radius;
 	};
 }
        
 // 인스턴스의 생성
 const circle1 = new Circle(5); // 반지름이 5인 Circle 객체를 생성
 const circle2 = new Circle(10); // 반지름이 10인 Circle 객체를 생성
        
 console.log(circle1.getDiameter()); // 10
 console.log(circle2.getDiameter()); // 20

this는 객체 자신의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수다. this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 따라 동적으로 결정된다.

함수 호출 방식	this가 가리키는 값(this 바인딩)
일반 함수로서 호출	전역 객체
메서드로서 호출	메서드를 호출한 객체(마침표 앞의 객체)
생성자 함수로서 호출	함수가 (미래에) 생성할 인스턴스

 // 함수는 다양한 방식으로 호출될 수 있다.
 function foo() {
 	console.log(this);
 }
        
 // 일반적인 함수로서 호출
 // 전역 객체는 브라우저 환경에서는 window, Node.js 환경에서는 global을 가리킨다.
 foo(); // window
        
 const obj = { foo }; // ES6 프로퍼티 축약 표현
        
 // 메서드로서 호출
 obj.foo(); // obj
        
 // 생성자 함수로서 호출
 const inst = new foo(); // inst

일반 함수와 동일한 방법으로 생성자 함수를 정의하고 new 연산자와 함께 호출하면 해당 함수는 생성자 함수로 동작한다.

 // new 연산자와 함께 호출하지 않으면 생성자 함수로 동작하지 않는다.
 // 즉, 일반 함수로서 호출된다.
 const circle3 = Circle(15);
        
 // 일반 함수로서 호출된 Circle은 반환문이 없으므로 암묵적으로 undefined를 반환한다.
 console.log(circle3); // undefined
        
 // 일반 함수로서 호출된 Circle 내의 this는 전역 객체를 가리킨다.
 console.log(radius); // 15

생성자 함수의 인스턴스 생성 과정
1. 생성자 함수의 역할은 프로퍼티 구조가 동일한 인스턴스를 생성하기 위한 템플릿(클래스)으로서 동작하여 인스턴스를 생성하는 것과 생성된 인스턴스를 초기화(인스턴스 프로퍼티 추가 및 초기값 할당)하는 것이다.
2. 생성자 함수가 인스턴스를 생성하는 것은 필수이고, 생성된 인스턴스를 초기화하는 것은 옵션이다.
```
 // 생성자 함수
 function Circle(radius) {
 	// 인스턴스 초기화
 	this.radius = radius;
 	this.getDiameter = function () {
 		return 2 * this.radius;
 	};
 }
    
 // 인스턴스 생성
 const circle1 = new Circle(5); // 반지름이 5인 Circle 객체를 생성
```
- 자바스크립트 엔진은 암묵적인 처리를 통해 인스턴스를 생성하고 반환한다. new 연산자와 함께 생성자 함수를 호출하면 자바스크립트 엔진은 다음과 같은 과정을 거쳐 암묵적으로 인스턴스를 생성하고 인스턴트를 초기화한 후 암묵적으로 인스턴스를 반환한다.
```
  function Circle(radius) {
  	// 1. 암묵적으로 인스턴스가 생성되고 this에 바인딩된다.
        	
  	// 2. this에 바인딩되어 있는 인스턴스를 초기화한다.
  	this.radius = radius;
  	this.getDiameter = function () {
  		return 2 * this.radius;
  	};
        
  	// 3. 암묵적으로 this를 반환한다.
  	// 명시적으로 원시 값을 반환하면 원시 값 반환은 무시되고 암묵적으로 this가 반환된다.
  	return 100;
  }
        
  // 인스턴스 생성. Circle 생성자 함수는 명시적으로 반환한 객체를 반환한다.
  const circle = new Circle();
  console.log(circle); // Circle {radius: 1, getDiameter: f}
```
  1. 인스턴스 생성과 this 바인딩
    1. 바인딩이란 식별자와 값을 연결하는 과정을 의미한다.
      1. 변수 선언은 변수 이름(식별자)고 확보된 메모리 공간의 주소를 바인딩하는 것이다.
      2. this 바인딩은 this와 this가 가리킬 객체를 바인딩하는 것이다.
  2. 인스턴스 초기화
    1. 생성자 함수에 기술되어 있는 코드가 한 줄씩 실행되어 this에 바인딩되어 있는 인스턴스를 초기화한다.
  3. 인스턴스 반환
    1. 생성자 함수 내부의 모든 처리가 끝나면 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환된다.
  - 생성자 함수 내부에서 명시적으로 this가 아닌 다른 값을 반환하는 것은 생성자 함수의 기본 동작을 훼손한다. 따라서 생성자 함수 내부에서 return 문을 반드시 생략해야 한다.
내부 메서드 [[Call]]과 [[Construct]]
```
 // 함수는 객체다
 function foo() {}
    
 // 함수는 객체이므로 프로퍼티를 소유할 수 있다.
 foo.prop = 10;
    
 // 함수는 객체이므로 메서드를 소유할 수 있다.
 foo.method = function() {
 	console.log(this.prop);
 };
    
 foo.method(); // 10
```
1. 일반 객체는 호출할 수 없지만 함수는 호출할 수 있다.
2. 함수 객체는 일반 객체가 가지고 있는 내부 슬롯과 내부 메서드는 물론, 함수로서 동작하기 위해 함수 객체만을 위한 [[Environment]], [[FormalParameters]] 등의 내부 슬롯과 [[Call]], [[Construct]] 같은 내부 메서드를 추가로 가지고 있다.
3. 함수가 일반 함수로서 호출되면 함수 객체의 내부 메서드 [[Call]]이 호출되고 new 연산자와 함계 생성자 함수로서 호출되면 내부 메서드 [[Construct]]가 호출된다.
```
 function foo() {
    	
 // 일반적인 함수로서 호출: [[Call]]이 호출된다.
 foo();
    
 // 생성자 함수로서 호출: [[Construct]]가 호출된다.
 new foo();
```
1. 내부 메서드 [[Call]]을 갖는 함수 객체를 callable이라 하며, 내부 메서드 [[Construct]]를 갖는 함수 객체를 constructor, [[Construct]]를 갖지 않는 함수 객체를 non-constructor라고 부른다.
2. callable은 호출할 수 있는 객체, 즉 함수를 말하며, constructor는 생성자 함수로서 호출할 수 있는 함수, non-constructor는 객체를 생성자 함수로서 호출할 수 없는 함수를 의미한다.
3. 호출할 수 없는 객체는 함수 객체가 아니므로 함수로서 기능하는 객체, 즉 함수 객체는 반드시 callable이어야 한다. 모든 함수 객체는 내부 메서드 [[Call]]을 갖고 있으므로 호출할 수 있다.
4. 함수 객체는 constructor일 수도 있고 non-constructor일 수도 있다.
5. 모든 함수 객체는 호출할 수 있지만 모든 함수 객체를 생성자 함수로서 호출할 수 있는 것은 아니다.

constructor와 non-constructor의 구분

자바스크립트 엔진은 함수 정의를 평가하여 함수 객체를 생성할 때 함수 정의 방식에 따라 함수를 constructor와 non-constructor로 구분한다.
1. constructor : 함수 선언문, 함수 표현식, 클래스(클래스도 함수다)
2. non-constructor : 메서드(ES6 메서드 축약 표현), 화살표 함수

ECMAScript 사양에서 메서드로 인정하는 범위가 일반적인 의미의 메서드보다 좁다.

 // 일반 함수 정의: 함수 선언문, 함수 표현식
 function foo() {}
 const bar = function() {};
 // 프로퍼티 x의 값으로 할당된 것은 일반 함수로 정의된 함수다. 이는 메서드로 인정하지 않는다.
 const baz = {
 	x: function () {}
 };
        
 // 일반 함수로 정의된 함수만이 constructor다.
 new foo(); // -> foo {}
 new bar(); // -> bar {}
 new baz.x(); // -> x {}
        
 // 화살표 함수 정의
 const arrow = () => {};
        
 new arrow(); // TypeError: arrow is not a constructor
        
 // 메서드 정의: ES6의 메서드 축약 표현만 메서드로 인정한다.
 const obj = {
 	x() {}
 };
        
 new obj.x(); // TypeError: obj.x is not a constructor

new 연산자

new 연산자와 함께 호출하면 해당 함수는 생성자 함수로 동작한다.
함수 객체의 내부 메서드 [[Call]]이 호출되는 것이 아니라 [[Construct]]가 호출된다.

 // 생성자 함수로서 정의하지 않은 일반 함수
 function add(x,y) {
 	return x+y;
 }
    
 // 생성자 함수로서 정의되지 않은 일반 함수를 new 연산자와 함께 호출
 let inst = new add();
    
 // 함수가 객체를 반환하지 않았으므로 반환문이 무시된다. 따라서 빈 객체가 생성되어 반환된다.
 console.log(inst); // {}
    
 // 객체를 반환하는 일반 함수
 function createUser(name, role) {
 	return { name, role };
 }
    
 // 일반 함수를 new 연산자와 함께 호출
 inst = new createUser('Lee','admin');
 // 함수가 생성한 객체를 반환한다.
 console.log(inst); // {name: "Lee", role: "admin"}

new.target
1. 생성자 함수가 new 연산자 없이 호출되는 것을 방지하기 위해 파스칼 케이스 컨벤션을 사용한다 하더라도 실수는 언제나 발생할 수 있다. 이러한 위험성을 회피하기 위해 ES6에서는 new.target을 지원한다.
2. new.target은 this와 유사하게 constructor인 모든 함수 내부에서 암묵적인 지역 변수와 같이 사용되며 메타 프로퍼티라고 부른다.
3. 함수 내부에서 new.target을 사용하면 new 연산자와 함께 생성자 함수로서 호출되었는지 확인할 수 있다. new 연산자와 함께 생성자 함수로서 호출되면 함수 내부의 new.target은 함수 자신을 가리킨다. new 연산자없이 일반 함수로서 호출된 함수 내부의 new.target은 undefined다.
4. 따라서 함수 내부에서 new.target을 사용하여 new 연산자와 생성자 함수로서 호출했는지 확인하여 그렇지 않은 경우 new 연산자와 함께 재귀 호출을 통해 생성자 함수로서 호출할 수 있다.
```
 // 생성자 함수
 function Circle(radius) {
 	// 이 함수가 new 연산자와 함께 호출되지 않았다면 new.target은 undefined다.
 	if(!new.target) {
 		// new 연산자와 함께 생성자 함수를 재귀 호출하여 생성된 인스턴스를 반환한다.
 		return new Circle(radius);
 	}
 	this.radius = radius;
 	this.getDiameter = function () {
 		return 2 * this.radius;
 	};
 }
    
 // new 연산자 없이 생성자 함수를 호출하여도 new.target을 통해 생성자 함수로서 호출된다.
 const circle = Circle(5);
 console.log(circle.getDiameter());
```
- new 연산자와 함께 생성자 함수에 의해 생성된 객체(인스턴스)는 프로토타입에 의해 생성자 함수와 연결된다. 이를 이용해 new 연산자와 함께 호출되었는지 확인할 수 있다. 프로토타입과 instanceof 연산자에 대해서는 19장 “프로토타입”에서 살펴볼 것이다.

[JS] javaScript Study 16

2023-05-06T00:00:00+09:00

16장 프로퍼티 어트리뷰트

16.1 내부 슬롯과 내부 메서드

내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드다.
ECMAScript 사양에 등장하는 이중 대괄호 ([[…]])로 감싼 이름들이 내부 슬롯과 내부 메서드다.
내부 슬롯과 내부 메서드는 자바스크립트 엔진의 내부 로직이므로 원칙적으로 자바스크립트는 내부 슬로소가 내부 메서드에 직접적으로 접근하거나 호출할 수 있는 방법을 제공하지 않는다. 단, 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 잇는 수단을 제공하기는 한다.

16.2 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체

자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다.
- 프로퍼티의 상태란 프로퍼티의 값 (value), 값의 갱신 가능 여부 (writable), 열거 가능 여부 (enumerable), 재정의 가능 여부 (configurable)을 말한다.
프로퍼티 어트리뷰트는 자바스크립트 엔진이 관리하는 내부 상태 값인 내부 슬롯 [[Value]], [[Writable]], [[Enumerable]], [[Configurable]]이다.
- 따라서 프로퍼티 어트리뷰트에 직접 접근할 수 없지만 Object.getOwnPropertyDescriptor 메서드를 사용하여 간접적으로 확인할 수는 있다.

const person = {
	name: 'Lee'
};

// 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체를 반환한다.
console.log(Object.getOwnPropertyDescriptor(person,'name'));
// {value: "Lee", writable: true, enumerable: true, configurable: true}

Object.getOwnPropertyDescriptor 메서드는 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체를 반환한다.
- ES8에서 도입된 Object.getOwnPropertyDescriptors 메서드는 모든 프로퍼티의 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체들을 반환한다.

16.3 데이터 프로퍼티와 접근자 프로퍼티

프로퍼티는 데이터 프로퍼티와 접근자 프로퍼티로 구분할 수 있다.
- 데이터 프로퍼티
  - 키와 값으로 구성된 일반적인 프로퍼티다. 지금까지 살펴본 모든 프로퍼티는 데이터 프로퍼티다.
- 접근자 프로퍼티
  - 자체적으로는 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 호출되는 접근자 함수로 구성된 프로퍼티다.

데이터 프로퍼티

| 프로퍼티 어트리뷰트 | 프로퍼티 디스크립터 객체의 프로퍼티 | 설명 | | — | — | — | | [[Value]] | value | 프로퍼티 키를 통해 프로퍼티 값에 접근하면 반환되는 값이다. 프로퍼티 키를 통해 프로퍼티 값을 변경하면 [[Value]]에 값을 재할당한다. 이때 프로퍼티가 없으면 프로퍼티를 동적 생성하고 생성된 프로퍼티의 [[Value]]에 값을 저장한다. | | [[Writable]] | writable | 프로퍼티 값의 변경 가능 여부를 나타내며 불리언 값을 갖는다. [[Writable]]의 값이 false인 경우 해당 프로퍼티의 [[Value]]의 값을 변경할 수 없는 읽기 전용 프로퍼티가 된다. | | [[Enumerable]] | enumerable | 프로퍼티의 열거 가능 여부를 나타내며 불리언 값을 갖는다. [[Enumerable]]의 값이 false인 경우 해당 프로퍼티는 for … in 문이나 Object.keys 메서드 등으로 열거할 수 없다. | | [[Configurable]] | configurable | 프로퍼티의 재정의 가능 여부를 나타내며 불리언 값을 갖는다. [[Configurable]]의 값이 false인 경우 해당 프로퍼티의 삭제, 프로퍼티 어트리뷰터 값의 변경이 금지된다. 단, [[Writable]]이 true 인 경우 [[Value]]의 변경과 [[Writable]]을 false로 변경하는 것은 허용된다. |
```
 const person = {
 	name: 'Lee'
 };
    
 // 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체를 취득한다.
 console.log(Object.getOwnPropertyDescriptor(person,'name'));
 // {value: "Lee", writable: true, enumerable: true, configurable: true}
```

접근자 프로퍼티

접근자 프로퍼티는 자체적으로는 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 사용하는 접근자 함수로 구성된 프로퍼티다.

프로퍼티
어트리뷰트	프로퍼티 디스크립터
객체의 프로퍼티	설명
[[Get]]	get	접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 읽을 때 호출되는 접근자 함수다. 즉, 접근자 프로퍼티 키로 프로퍼티 값에 접근하면 프로퍼티 어트리뷰트 [[Get]]의 값, 즉 getter 함수가 호출되고 그 결과가 프로퍼티 값으로 반환된다.
[[Set]]	set	접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 저장할 때 호출되는 접근자 함수다. 즉, 접근자 프로퍼티 키로 프로퍼티 값을 저장하면 프로퍼티 어트리뷰트 [[Set]]의 값, 즉 setter 함수가 호출되고 그 결과가 프로퍼티 값으로 저장된다.
[[Enumerable]]	enumerable	데이터 프로퍼티의 [[Enumerable]]과 같다.
[[Configurable]]	configurable	데이터 프로퍼티의 [[Configurable]]과 같다.

접근자 함수는 getter/setter 함수라고도 부른다. 접근자 프로퍼티는 getter와 setter 함수를 모두 정의 할수도 있고 하나만 정의할 수도 있다.

 const person = {
 	// 데이터 프로퍼티
 	firstName: 'Ungmo',
 	lastName: 'Lee',
        
 	// fullName은 접근자 함수로 구성된 접근자 프로퍼티다.
 	// getter 함수
 	get fullName() {
 		return `${this.firstName} ${this.lastName}`;
 	},
 	// setter 함수
 	set fullName(name) {
 		// 배열 디스트럭처링 할당: "31.1 배열 디스트럭처링 할당" 참고
 		[this.firstName, this.lastName] = name.split(' ');
 	}
 };
        
 // 데이터 프로퍼티를 통한 프로퍼티 값의 참조.
 console.log(person.firstName + ' ' + person.lastName); // Ungmo Lee
        
 // 접근자 프로퍼티를 통한 프로퍼티 값의 참조.
 // 접근자 프로퍼티 fullName에 값을 저장하면 setter 함수가 호출된다.
 person.fullName = 'Heegun Lee';
 console.log(person); // {firstName: "Heegun", lastName: "Lee"}
        
 // 접근자 프로퍼티를 통한 프로퍼티 값의 참조
 // 접근자 프로퍼티 fullName에 접근하면 getter 함수가 호출된다.
 console.log(person.fullName); // Heegun Lee
        
 // firstName은 데이터 프로퍼티다.
 // 데이터 프로퍼티는 [[Value]], [[Writable]], [[Enumerable]], [[Configurable]]
 // 프로퍼티 어트리뷰트를 갖는다.
 let descriptor = Object.getOwnPropertyDescriptor(person,'firstName');
 console.log(descriptor);
 // {value: "Heegun", writable: true, enumerable: true, configurable: true}
        
 // fullName은 접근자 프로퍼티다.
 // 접근자 프로퍼티는 [[Get]], [[Set]], [[Enumerable]], [[Configurable]]
 // 프로퍼티 어트리뷰트를 갖는다.
 descriptor = Object.getOwnPropertyDescriptor(person,'fullName');
 console.log(descriptor);
 // {get: f, set: f, enumerable: true, configurable: true}

person 객체의 firstName과 lastName 프로퍼티는 일반적인 데이터 프로퍼티다. 메서드 앞에 get, set이 붙은 메서드가 있는데 이것들이 바로 getter와 setter 함수이고, getter/setter 함수의 이름 fullName이 접근자 프로퍼티다. 접근자 프로퍼티는 자체적으로 값(프로퍼티 어트리뷰트 [[Value]])을 가지지 않으며 다만 데이터 프로퍼티의 값을 읽거나 저장할 때 관여할 뿐이다.
이를 내부 슬롯/메서드 관점에서 설명하면 다음과 같다. 접근자 프로퍼티 fullName으로 프로퍼티 값에 접근하면 내부적으로 [[Get]] 내부 메서드가 호출되어 다음과 같이 동작한다.
1. 프로퍼티 키가 유효한지 확인한다. 프로퍼티 키는 문자열 또는 심벌이어야 한다. 프로퍼티 키 “fullName”은 문자열이므로 유효한 프로퍼티 키다.
2. 프로토타입 체인에서 프로퍼티를 검색한다. person 객체에 fullName 프로퍼티가 존재한다.
3. 검색된 fullName 프로퍼티가 데이터 프로퍼티인지 확인한다. fullName 프로퍼티는 접근자 프로퍼티다.
4. 접근자 프로퍼티 fullName의 프로퍼티 어트리뷰트 [[Get]]의 값, 즉 getter 함수를 호출하여 그 결과를 반환한다. 프로퍼티 fullName의 프로퍼티 어트리뷰트 [[Get]]의 값은 Object.getOwnPropertyDescriptor 메서드가 반환하는 프로퍼티 디스크립터 객체의 get 프로퍼티 값과 같다.

접근자 프로퍼티와 데이터 프로퍼티를 구별하는 방법

 // 일반 객체의 __proto__는 접근자 프로퍼티다.
 Object.getOwnPropertyDescriptor(Object.prototype, '__proto__');
 // {get: f, set: f, enumerable: false, configurable: true}
    
 // 함수 객체의 prototype는 데이터 프로퍼티다.
 Object.getOwnPropertyDescriptor(function() {}, 'prototype');
 // {value: {... }, writable: true, enumerable: false, configurable: false}

16.4 프로퍼티 정의

프로퍼티 정의란 새로운 프로퍼티를 추가하면서 프로퍼티 어트리뷰트를 명시적으로 정의하거나, 기존 프로퍼티의 프로퍼티 어트리뷰트를 재정의하는 것을 말한다.

Object.defineProperty 메서드를 사용하면 프로퍼티의 어트리뷰트를 정의할 수 있다. 인수로는 객체의 참조와 데이터 프로퍼티의 키인 문자열, 프로퍼티 디스크립터 객체를 전달한다.

  const person = {};
        
  // 데이터 프로퍼티 정의
  Object.defineProperty(person,'firstName', {
  	value: 'Ungmo',
  	writable: true,
  	enumerable: true,
  	configurable: true
  });
        
  Object.defineProperty(person, 'lastName', {
  	value: 'Lee'
  });
        
  let descriptor = Object.getOwnPropertyDescriptor(person, 'firstName');
  console.log('firstNname', descriptor);
  // firstName {value: "Ungmo", writable: true, enumerable: true, configurable: true}
        
  // 디스크립터 객체의 프로퍼티를 누락시키면 undefined, false가 기본값이다.
  descriptor = Object.getOwnPropertyDescriptor(person, 'lastName');
  console.log('lastNname', descriptor);
  // lastName {value: "Lee", writable: false, enumerable: false, configurable: false}
        
  // [[Enumerable]]의 값이 false인 경우
  // 해당 프로퍼티는 for...in 문이나 Object.keys 등으로 열거할 수 없다.
  // lastName 프로퍼티는 [[Enumerable]]의 값이 false이므로 열거되지 않는다.
  console.log(Object.keys(person)); // ["firstName"]
        
  // [[Writable]]의 값이 false인 경우 해당 프로퍼티의 [[Value]]의 값을 변경할 수 없다.
  // lastName 프로퍼티는 [[Writable]]의 값이 false이므로 값을 변경할 수 없다.
  // 이때 값을 변경하면 에러는 발생하지 않고 무시된다.
  person.lastName = 'Kim';
        
  // [[Configurable]]의 값이 false인 경우 해당 프로퍼티를 삭제할 수 없다.
  // lastName 프로퍼티는 [[Configurable]]의 값이 false이므로 값을 삭제할 수 없다.
  // 이때 값을 변경하면 에러는 발생하지 않고 무시된다.
  delete person.lastName;
        
  // [[Configurable]]의 값이 false인 경우 해당 프로퍼티를 재정의할 수 없다.
  // Object.defineProperty(person,'lastName',{enumerable: true});
  // Uncaught TypeError: Cannot redefine property: lastName
        
  descriptor = Object.getOwnPropertyDescriptor(person,'lastName');
  console.log('lastName',descriptor);
  // lastName {value: "Lee", writable: false, enumerable: false, configurable: false}
        
  // 접근자 프로퍼티 정의
  Object.defineProperty(person, 'fullName', {
  	// getter 함수
  	get() {
  		return `${this.firstName} ${this.lastName}`;
  	},
  	// setter 함수
  	set(name) {
  		[this.firstName, this.lastName] = name.split(' ');
  	},
  	enumerable: true,
  	configurable: true
  });
        
  descriptor = Object.getOwnPropertyDescriptor(person,'fullName');
  console.log('fullName',descriptor);
  // fullName {get: f, set: f, enumerable: true, configurable: true}
        
  person.fullName = 'Heegun Lee';
  console.log(person); // {firstName: "Heegun", lastName: "Lee"}

Object.defineProperty 메서드로 프로퍼티를 정의할 때 프로퍼티 디스크럽터 객체의 프로퍼티를 일부 생략할 수 있다. 프로퍼티 디스크럽터 객체에서 생략된 어트리뷰트는 다음과 같이 기본값이 적용된다.

프로퍼티 디스크럽터 객체의 프로퍼티	대응하는 프로퍼티 어트리뷰트	생략했을 때의 기본값
value	[[Value]]	undefined
get	[[Get]]	undefined
set	[[Set]]	undefined
writable	[[Writable]]	false
enumerable	[[Enumerable]]	false
configurable	[[Configurable]]	false

Object.defineProperty 메서드는 한번에 하나의 프로퍼티만 정의할 수 있다. Object.defineProperties 메서드를 사용하면 여러 개의 프로퍼티를 한 번에 정의할 수 있다.

 const person = {};
            
 Object.defineProperties(person, {
 	// 데이터 프로퍼티 정의
 	firstName: {
 		value: 'Ungmo',
 		writable: true,
 		enumerable: true,
 		configurable: true
 	},
 	lastName: {
 		value: 'Lee',
 		writable: true,
 		enumerable: true,
 		configurable: true
 	},
 	// 접근자 프로퍼티 정의
 	fullName: {
 		// getter 함수
 		get() {
 			return `${this.firstName} ${this.lastName}`;
 		},
 		// setter 함수
 		set(name) {
 			[this.firstName, this.lastName] = name.split(' ');
 		},
 		enumerable: true,
 		configurable: true
 	}
 });
            
 person.fullName = 'Heegun Lee';
 console.log(person); // {firstName: "Heegun", lastName: "Lee"}

16.5 객체 변경 방지

객체는 변경 가능한 값이므로 재할당 없이 직접 변경할 수 있다. 즉, 프로퍼티를 추가하거나 삭제할 수 있고, 프로퍼티 값을 갱신할 수 있으며, Object.defineProperty 또는 Object.defineProperties 메서드를 사용하여 프로퍼티 어트리뷰트를 재정의할 수도 있다.
자바스크립트는 객체의 변경을 방지하는 다양한 메서드를 제공한다. 객체 변경 방지 메서드들은 객체의 변경을 금지하는 강도가 다르다.

구분	메서드	프로퍼티
추가	프로퍼티
삭제	프로퍼티
값 읽기	프로퍼티
값 쓰기	프로퍼티 어트리뷰트 재정의
객체 확장 금지	Object.preventExtensions	X	O	O	O	O
객체 밀봉	Object.seal	X	X	O	O	X
객체 동결	Object.freeze	X	X	O	X	X

객체 확장 금지

Object.preventExtensions 메서드는 객체의 확장을 금지한다. 즉, 확장이 금지된 객체는 프로퍼티 추가가 금지된다.
확장이 가능한 객체인지 여부는 Object.isExtensible 메서드로 확인할 수 있다.

 const person = { name: 'Lee' };
    
 // person 객체는 확장이 금지된 객체가 아니다.
 console.log(Object.isExtensible(person)); // true
    
 // person 객체의 확장을 금지하여 프로퍼티 추가를 금지한다.
 Object.preventExtensions(person);
    
 // person 객체는 확장이 금지된 객체다ㅏ.
 console.log(Object.isExtensible(person)); // false
    
 // 프로퍼티 추가가 금지된다.
 person.age = 20; // 무시, strict mode에서는 에러
 console.log(person); // {name: "Lee"}
    
 // 프로퍼티 추가는 금지되지만 삭제는 가능하다.
 delete person.name;
 console.log(person); // {}
    
 // 프로퍼티 정의에 의한 프로퍼티 추가도 근ㅁ지된다.
 Object.defineProperty(person, 'age', {value: 20});
 // TypeError: Cannot define property age, object is not extensible

객체 밀봉

Object.seal 메서드는 객체를 밀봉한다. 객체 밀봉이란 프로퍼티 추가 및 삭제와 프로퍼티 어트리뷰트 재정의 금지를 의미한다. 즉, 밀봉된 객체는 읽기와 쓰기만 가능하다.
밀봉된 객체인지 여부는 Object.isSealed 메서드로 확인할 수 있다.

 const person = { name: 'Lee' };
    
 // person 객체는 밀봉(seal)된 객체가 아니다.
 console.log(Object.isSealed(person)); // false
    
 // person 객체를 밀봉(seal)하여 프로퍼티 추가, 삭제, 재정의를 금지한다.
 Object.seal(person);
    
 // person 객체는 밀봉(seal)된 객체다.
 console.log(Object.isSealed(person)); // true
    
 // 밀봉(seal)된 객체는 configurable이 false다.
 console.log(Object.getOwnPropertyDescriptors(person));
 /*
 {
 	name: {value: "Lee", writable: true, enumerable: true, configurable: false},
 }
 */
    
 // 프로퍼티 추가가 금지된다.
 person.age = 20; // 무시, strict mode에서는 에러
 console.log(person); // {name: "Lee"}
    
 // 프로퍼티 삭제가 금지된다.
 delete person.name; // 무시, strict mode에서는 에러
 console.log(person); // {name: "Lee"}
    
 // 프로퍼티 값 갱신은 가능하다.
 person.name = 'Kim';
 console.log(person); // {name: "Kim"}
    
 // 프로퍼티 어트리뷰트 재정의가 금지된다.
 Object.defineProperty(person, 'name', { configurable: true });
 // TypeError: Cannot redefine property: name

객체 동결

Object.freeze 메서드는 객체를 동결한다. 객체 동결이란 프로퍼티 추가 및 삭제와 프로퍼티 어트리뷰트 재정의 금지, 프로퍼티 값 갱신 금지를 의미한다. 즉, 동결된 객체는 읽기만 가능하다.
동결된 객체인지 여부는 Object.isFrozen 메서드로 확인할 수 있다.

 const person = { name: 'Lee' };
    
 // person 객체는 동결(freeze)된 객체가 아니다.
 console.log(Object.isFrozen(person)); // false
    
 // person 객체를 동결(freeze)하여 프로퍼티 추가, 삭제, 재정의, 쓰기를 금지한다.
 Object.freeze(person);
    
 // person 객체는 동결(freeze)된 객체다.
 console.log(Object.isFrozen(person)); // true
    
 // 동결(freeze)된 객체는 writable과 configurable이 false다.
 console.log(Object.getOwnPropertyDescriptors(person));
 /*
 {
 	name: {value: "Lee", writable: false, enumerable: true, configurable: false},
 }
 */
    
 // 프로퍼티 추가가 금지된다.
 person.age = 20; // 무시, strict mode에서는 에러
 console.log(person); // {name: "Lee"}
    
 // 프로퍼티 삭제가 금지된다.
 delete person.name; // 무시, strict mode에서는 에러
 console.log(person); // {name: "Lee"}
    
 // 프로퍼티 값 갱신이 금지된다.
 person.name = 'Kim'; // 무시, strict mode에서는 에러
 console.log(person); // {name: "Lee"}
    
 // 프로퍼티 어트리뷰트 재정의가 금지된다.
 Object.defineProperty(person, 'name', { configurable: true });
 // TypeError: Cannot redefine property: name

불변 객체

지금까지 살펴본 변경 방지 메서드들은 얕은 변경 방지로 직속 프로퍼티만 변경이 방지되고 중첩 객체까지는 영향을 주지는 못한다. 따라서 Object.freeze 메서드로 객체를 동결하여도 중첩 객체까지 동결할 수 없다.

 const person = { 
 	name: 'Lee',
 	address: { city: 'Seoul' }
 };
        
 // 얕은 객체 동결
 Object.freeze(person);
        
 // 직속 프로퍼티만 동결한다.
 console.log(Object.isFrozen(person)); // true
 // 중첩 객체까지 동결하지는 못한다.
 console.log(Object.isFrozen(person.address)); // false
        
 person.address.city = 'Busan';
 console.log(person); // {name: "Lee", address: {city: "Busan"}}

객체의 중첩 객체까지 동결하여 변경이 불가능한 읽기 전용의 불변 객체를 구현한려면 객체를 값으로 갖는 모든 프로퍼티에 대해 재귀적으로 Object.freeze 메서드를 호출해야 한다.

 function deepFreeze(target) {
 	// 객체가 아니거나 동결된 객체는 무시하고 객체이고 동결되지 않은 객체만 동결한다.
 	if (target && typeof target === 'object' && !Object.isFrozen(target)) {
 		Object.freeze(target);
 		/*
 			모든 프로퍼티를 순회하며 재귀적으로 동결한다.
 			Object.keys 메서드는 객체 자신의 열거 가능한 프로퍼티 키를 배열로 반환한다.
 			(19.14.2절 "Object.keys/values/entries 메서드" 참고)
 			forEach 메서드는 배열을 순회하며 배열의 각 요소에 대하여 콜백 함수를 실행한다.
 			(27.9.2절 "Array.prototype.forEach" 참고)
 		*/
 		Object.keys(target).forEach(key => deepFreeze(target[key]));
 	}
 	return target;
 }
        
 const person = {
 	name: 'Lee',
 	address: { city: 'Seoul' }
 };
        
 // 깊은 객체 동결
 deepFreeze(person);
        
 console.log(Object.isFrozen(person)); // true
 // 중첩 객체까지 동결한다.
 console.log(Object.isFrozen(person.address)); // true
        
 person.address.city = 'Busan';
 console.log(person); // {name: "Lee", address: {city: "Seoul"}}

[JS] javaScript Study 15

2023-05-05T00:00:00+09:00

15장 let, const 키워드와 블록 레벨 스코프

15.1 var 키워드로 선언한 변수의 문제점

변수 중복 선언 허용

 var x = 1;
 var y = 1;
    
 // var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다.
 // 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다.
 var x = 100;
 // 초기화문이 없는 변수 선언문은 무시된다.
 var y;
    
 console.log(x); // 100
 console.log(y); // 1

함수 레벨 스코프
1. var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다. 따라서 함수 외부에서 var 키워드로 선안한 변수는 코드 블록 내에서 선언해도 모두 전역 변수가 된다.
2. 함수 레벨 스코프는 전역 변수를 남발할 가능성을 높인다. 이로 인해 의도치 않게 전역 변수가 중복 선언되는 경우가 발생한다.

변수 호이스팅

var 키워드로 변수를 선언하면 변수 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어 올려진 것처럼 동작한다. 즉, 변수 호이스팅에 의해 var 키워드로 선언한 변수는 변수 선언문 이전에 참조할 수 있다. 단, 할당문 이전에 변수를 참조하면 언제나 undefined를 반환한다.

 // 이 시점에는 변수 호이스팅에 의해 이미 foo 변수가 선언되었다(1. 선언 단계)
 // 변수 foo는 undefined로 초기화된다(2. 초기화 단계)
 console.log(foo); // undefined
    
 // 변수에 값을 할당(3. 할당 단계)
 foo = 123;
    
 console.log(foo); // 123
    
 // 변수 선언은 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 실행된다.
 var foo;

15.2 let 키워드

var 키워드의 단점을 보완하기 위해 ES6에서는 새로운 변수 선언 키워드인 let과 const를 도입했다.

변수 중복 선언 금지
1. let이나 const 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용하지 않는다.
블록 레벨 스코프
1. var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정하는 함수 레벨 스코프를 따른다.
2. let 키워드로 선언한 변수는 모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등)을 지역 스코프로 인정하는 블록 레벨 스코프를 따른다.

변수 호이스팅

let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 동작한다.
1. let 키워드로 선언한 변수도 여전히 호이스팅이 발생하기 때문에 참조 에러가 발생한다.
```
 let foo = 1; // 전역 변수
        
 {
 	console.log(foo); // ReferenceError: Cannot access 'foo' before initialization
 	let foo = 2; // 지역 변수
 }
```
let 키워드로 선언한 변수는 “선언 단계”와 “초기화 단계”가 분리되어 진행된다.

let 키워드로 선언한 변수는 스코프의 시작 지점부터 초기화 단계 시작 지점(변수 선언문)까지 변수를 참조할 수 없다.

스코프의 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 없는 구간을 일시적 사각지대라고 부른다.

 // 런타임 이전에 선언 단계가 실행된다. 아직 변수가 초기화되지 않았다.
 // 초기화 이전의 일시적 사각지대에서는 변수를 참조할 수 없다.
 console.log(foo); // ReferenceError: foo is not defined
        
 let foo; // 변수 선언문에서 초기화 단계가 실행된다.
 console.log(foo); // undefined
        
 foo = 1; // 할당문에서 할당 단계가 실행된다.
 console.log(foo); // 1

전역 객체와 let

var 키워드로 선언한 전역 변수와 전역 함수, 그리고 선언하지 않은 변수에 값을 할당한 암묵적 전역은 전역 객체 window의 프로퍼티가 된다. 전역 객체의 프로퍼티를 참조할 때 window를 생략할 수 있다.

 // 이 예제는 브라우저 환경에서 실행해야 한다.
        
 // 전역 변수
 var x = 1;
 // 암묵적 전역
 y = 2;
 // 전역 함수
 function foo() {}
        
 // var 키워드로 선언한 전역 변수는 전역 객체 window의 프로퍼티다.
 console.log(window.x); // 1
 // 전역 객체 window의 프로퍼티는 전역 변수처럼 사용할 수 있다.
 console.log(x); // 1
        
 // 암묵적 전역은 전역 객체 window의 프로퍼티다.
 console.log(window.y); // 2
 console.log(y); // 2
        
 // 함수 선언문으로 정의한 전역 함수는 전역 객체 window의 프로퍼티다. 
 console.log(window.foo); // f foo() {}
 // 전역 객체 window의 프로퍼티는 전역 변수처럼 사용할 수 있다.
 console.log(foo); // f foo() {}

let 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 아니다. 즉 window.foo와 같이 접근할 수 없다. let 전역 변수는 보이지 않는 개념적인 블록 내에 존재한다.

 // 이 예제는 브라우저 환경에서 실행해야 한다.
 let x = 1;
        
 // let, const 키워드로 선언한 전역 변수는 전역 객체 window의 프로퍼티가 아니다.
 console.log(window.x); // undefined
 console.log(x); // 1

15.3 const 키워드

const 키워드는 상수를 선언하기 위해 사용한다. 하지만 반드시 상수만을 위해 사용하지는 않는다. const 키워드의 특징은 let 키워드와 대부분 동일하므로 let 키워드와 다른 점을 중심으로 살펴보자

선언과 초기화
1. const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화해야 한다.
재할당 금지
1. const 키워드로 선언한 변수는 재할당이 금지된다.
상수
1. 상수는 재할당이 금지된 변수를 말한다.
2. const 키워드로 선언된 변수에 윈시 값을 할당한 경우 원시 값은 변경할 수 없는 값이고 const 키워드에 의해 재할당이 금지되므로 할당된 값을 변경할 수 있는 방법은 없다.
const 키워드와 객체
1. const 키워드로 선언된 변수에 객체를 할당한 경우 값을 변경할 수 있다.
2. const 키워드는 재할당을 금지할 뿐 “불변”을 의미하지는 않는다.

15.4 var vs. let vs. const

변수 선언에는 기본적으로 const를 사용하고 let은 재할당이 필요한 경우에 한정해 사용하는 것이 좋다. const 키워드를 사용하면 의도치 않은 재할당을 방지하기 때문에 안전하다.
- ES6를 사용한다면 var 키워드는 사용하지 않는다.
- 변경이 발생하지 않고 읽기 전용으로 사용하는(재할당이 필요 없는 상수) 원시 값과 객체에는 const 키워드를 사용한다. const 키워드는 재할당을 금지하므로 var, let 키워드보다 안전하다.

console.log(name); // X

const name='fuck';

[JS] javaScript Study 14

2023-05-04T00:00:00+09:00

14장 전역 변수의 문제점

14.1 변수의 생명 주기

지역 변수의 생명 주기
```
 function foo() {
 	var x = 'local';
 	console.log(x); // local
 	return x;
 }
    
 foo();
 console.log(x); // ReferenceError: x is not defined. 
```
1. 변수는 자신이 선언된 위치에서 생성되고 소멸한다.
2. 함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸한다.
3. 지역 변수의 생멸 주기는 함수의 생명 주기와 일치한다.
```
 var x = 'global';
    
 function foo() {
 	console.log(x); // 1. undefined
 	var x = 'local';
 }
    
 foo();
 console.log(x); // global
```
1. foo 함수 내부에서 선언된 지역 변수 x는 1의 시점에 이미 선언되었고 undefined로 초기화되어 있다. 따라서 전역 변수 x를 참조하는 것이 아니라 지역 변수 x를 참조해 값을 출력한다.
  1. 즉 지역 변수는 함수 전체에서 유효하다. 단, 변수 할당문이 실행되기 이전까지는 undefined 값을 갖는다.
2. 호이스팅은 스코프를 단위로 동작한다.
  1. 호이스팅은 변수 선언이 스코프의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 말한다.
전역 변수의 생명 주기
1. var 키워드로 선언한 전역 변수의 생명 주기는 전역 객체의 생명 주기와 일치한다.

14.2 전역 변수의 문제점

암묵적 결합
- 전역 변수를 선언한 의도는 전역, 즉 코드 어디서든 참조하고 할당할 수 있는 변수를 사용하겠다는 것이다. 이는 모든 코드가 전역 변수를 참조하고 변경할 수 있는 암묵적 결합을 허용하는 것이다.
- 변수의 유효 범위가 클수록 코드의 가독성은 나빠지고 의도치 않게 상태가 변경될 수 있는 위험성도 높아진다.
긴 생명 주기
- 전역 변수는 생명 주기가 길다. 따라서 메모리 리소스도 오랜 기간 소비한다. 또한 전역 변수의 상태를 변경할 수 있는 시간도 길고 기회도 많다.
- 지역 변수는 전역 변수보다 생명 주기가 훨씬 짧다. 지역 변수의 상태를 변경할 수 있는 시간도 짧고 기회도 적다.
- 이는 전역 변수보다 상태 변경에 의한 오류가 발생할 확률이 작다는 것을 의미한다. 또한 메모리 리소스도 짧은 기간만 소비한다.
스코프 체인 상에서 종점에 존재
- 전역 변수는 스코프 체인 상에서 종점에 존재한다. 즉, 전역 변수의 검색 속도가 가장 느리다.
네임스페이스 오염
- 파일이 분리되어 있다 해도 하나의 전역 스코프를 공유한다. 따라서 다른 파일 내에서 동일한 이름으로 명명된 전역 변수나 전역 함수가 같은 스코프 내에 존재할 경우 예상치 못한 결과를 가져올 수 있다.

14.3 전역 변수의 사용을 억제하는 방법

전역 변수를 반드시 사용해야 할 이유를 찾지 못한다면 지역 변수를 사용해야 한다. 변수의 스코프는 좁을수록 좋다.

즉시 실행 함수

모든 코드를 즉시 실행 함수로 감싸면 모든 변수는 즉시 실행 함수의 지역 변수가 된다.

 (function () {
 	var foo = 10; // 즉시 실행 함수의 지역 변수
 	// ...
 }());
    
 console.log(foo); // ReferenceError: foo is not defined

네임스페이스 객체
1. 전역에 네임스페이스 역할을 담당할 객체를 생성하고 전역 변수처럼 사용하고 싶은 변수를 프로퍼티로 추가하는 방법이다.
2. 네임스페이스를 분리해서 식별자 충돌을 방지하는 효과는 있으나 네임스페이스 객체 자체가 전역 변수에 할당되므로 그다지 유용해 보이지는 않는다.
```
 var MYAPP = {}; // 전역 네임스페이스 객체
    
 MYAPP.person = {
 	name: 'Lee',
 	address: 'Seoul'
 };
    
 console.log(MYAPP.person.name); // Lee
```
모듈 패턴
1. 클래스를 모방해서 관련이 있는 변수와 함수를 모아 즉시 실행함수로 감싸 하나의 모듈을 만든다.
2. 자바스크립트의 강력한 기능인 클로저를 기반으로 작동한다.
3. 모듈 패턴의 특징은 전역 변수의 억제는 물론 캡슐화까지 구현할 수 있다는 것이다.
  1. 캡슐화는 객체의 상태를 나타내는 프로퍼티와 프로퍼티를 참조하고 조작할 수 있는 동작 메서드를 하나로 묶는 것을 말한다.
  2. 캡슐화는 객체의 특정 프로퍼티나 메서드를 감출 목적으로 사용하기도 하는데 이를 정보 은닉이라고 한다.
```
 var Counter = (function() {
 	// private 변수
 	var num = 0;
    
 	// 외부로 공개할 데이터나 메서드를 프로퍼티로 추가한 객체를 반환한다.
 	return {
 		increase() {
 			return ++num;
 		},
 		decrease() {
 			return --num;
 		}
 	}
 }());
    
 // private 변수는 외부로 노출되지 않는다.
 console.log(Counter.num); // undefined
    
 console.log(Counter.increase()); // 1
 console.log(Counter.increase()); // 2
 console.log(Counter.decrease()); // 1
 console.log(Counter.decrease()); // 0
```
ES6 모듈
1. ES6 모듈을 사용하면 더는 전역 변수를 사용할 수 없다. ES6 모듈은 파일 자체의 독자적인 모듈 스코프를 제공한다.
```
 <script type="module" src="lib.mjs"></script>
 <script type="module" src="app.mjs"></script>
```

[JS] javaScript Study 13

2023-05-03T00:00:00+09:00

13장 스코프

13.1 스코프란?

var var1 = 1; // 코드의 가장 바깥 영역에서 선언된 변수

if (true) {
	var var2 = 2; // 코드 블록 내에서 선언한 변수
	if(true) {
		var var3 = 3; // 중첩된 코드 블록 내에서 선언한 변수
	}
}

function foo() {
	var var4 = 4; // 함수 내에서 선언한 변수
	
	function bar() {
		var var5 = 5; // 중첩된 함수 내에서 선언한 변수
	}
}

console.log(var1); // 1
console.log(var2); // 2
console.log(var3); // 3
console.log(var4); // ReferenceError: var4 is not defined
console.log(var5); // ReferenceError: var5 is not defined

모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. 이를 스코프라 한다.
즉, 스코프는 식별자가 유효한 범위를 말한다.

var x = 'global';

function foo() {
	var x = 'local';
	console.log(x); // 1. local
}

foo();

console.log(x); // 2. global

코드의 가장 바깥 영역과 foo 함수 내부에 같은 이름을 갖는 x 변수를 선언했고 1과 2에서 x 변수를 참조한다. 이때 자바스크립트 엔진은 이름이 같은 두 개의 변수 중에서 어떤 변수를 참조해야 할 것인지를 결정해야한다. 이를 식별자 결정이라 한다.
자바스크립트 엔진은 스코프를 통해 어떤 변수를 참조해야할 것인지 결정한다. 따라서 스코프란 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙이라고도 할 수 있다.

13.2 스코프의 종류

| 구분 | 설명 | 스코프 | 변수 | | — | — | — | — | | 전역 | 코드의 가장 바깥 영역 | 전역 스코프 | 전역 변수 | | 지역 | 함수 몸체 내부 | 지역 스코프 | 지역 변수 |

전역과 전역 스코프
1. 전역이란 코드의 가장 바깥 영역을 말한다.
2. 전역은 전역 스코프를 만든다.
3. 전역에 변수를 선언하면 전역 스코프를 갖는 전역 변수가 된다.
4. 전역 변수는 어디서든지 참조할 수 있다.
지역과 지역 스코프
1. 지역이란 함수 몸체 내부를 말한다.
2. 지역은 지역 스코프를 만든다.
3. 지역에 변수를 선언하면 지역 스코프를 갖는 지역 변수가 된다.
4. 지역 변수는 자신의 지역 스코프와 하위 지역 스코프에서 유효하다.

13.3 스코프 체인

함수는 중첩될 수 있으므로 함수의 지역 스코프도 중첩될 수 있다. 이는 스코프가 함수의 중첩에 의해 계층적 구조를 갖는다는 것을 의미한다.
- 중첩 함수의 지역 스코프는 중첩 함수를 포함하는 외부 함수의 지역 스코프와 계층적 구조를 갖는다.
- 이때 외부 함수의 지역 스코프를 중첩 함수의 상위 스코프라 한다.
모든 스코프는 하나의 계층적 구조로 연결되며, 모든 지역 스코프의 최상위 스코프는 전역 스코프다. 이렇게 스코프가 계층적으로 연결된 것을 스코프 체인이라 한다.
- 변수를 참조할 때 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색한다.

스코프 체인에 의한 변수 검색
1. 상위 스코프에서 유효한 변수는 하위 스코프에서 자유롭게 참조할 수 있지만 하위 스코프에서 유효한 변수를 상위 스코프에서 참조할 수 없다.

스코프 체인에 의한 함수 검색

 // 전역 함수
 function foo() {
 	console.log('global function foo');
 }
    
 function bar() {
 	// 중첩 함수
 	function foo() {
 		console.log('local function foo');
 	}
 	foo(); // local function foo
 }
    
 bar();

스코프를 “변수를 검색할 때 사용하는 규칙”이라고 표현하기보다는 “식별자를 검색하는 규칙”이라고 표현하는 편이 좀 더 적합하다.

13.4 함수 레벨 스코프

지역은 함수 몸체 내부를 말하고 지역은 지역 스코프를 만든다고 했다. 이는 코드 블록이 아닌 함수에 의해서만 지역 스코프가 생성된다는 의미다.
대부분의 프로그래밍 언언느 함수 몸체만이 아니라 모든 코드 블록(if, for, while, try/catch 등)이 지역 스코프를 만든다. 이러한 특성을 블록 레벨 스코프라 한다.
하지만 var 키워드로 선언도니 변수는 오로지 함수의 코드 블록(함수 몸체)만을 지역 스코프로 인정한다.

var i = 10;

// for 문에서 선언한 i는 전역 변수다. 이미 선언된 전역 변수 i가 있으므로 중복 선언된다.
for(var i=0;i<5;i++) {
	console.log(i); // 0 1 2 3 4
}

// 의도치 않게 변수의 값이 변경되었다.
console.log(i); // 5

13.5 렉시컬 스코프

var x = 1;

function foo() {
	var x = 10;
	bar();
}

function bar() {
	console.log(x);
}

foo(); // 
bar(); //

함수를 어디서 호출했는지에 따라 함수의 상위 스코프를 결정한다.
1. bar 함수의 상위 스코프는 foo 함수의 지역 스코프와 전역 스코프일 것이다.
2. 함수가 호출되는 시점에 동적으로 상위 스코프를 결정해야 하기 때문에 동적 스코프라고 부른다.
함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정한다.
1. bar 함수의 상위 스코프는 전역 스코프일 것이다.
2. 상위 스코프가 동적으로 변하지 않고 함수 정의가 평가되는 시점에 상위 스코프가 정적으로 결정되기 때문에 렉시컬 스코프 또는 정적 스코프라고 부른다.
3. 자바스크립트는 렉시컬 스코프를 따르므로 함수를 어디서 호출했는지가 아니라 함수를 어디서 정의했는지에 따라 상위 스코프를 결정한다. 함수가 호출된 위치는 상위 스코프 결정에 어떠한 영향도 주지 않는다. 즉, 함수의 상위 스코프는 언제나 자신이 정의된 스코프다.
4. 이처럼 함수의 상위 스코프는 함수 정의가 실행될 때 정적으로 결정된다 .함수 정의(함수 선언문 또는 함수 표현식)가 실행되어 생성된 함수 객체는 이렇게 결정된 상위 스코프를 기억한다. 함수가 호출될 때마다 함수의 상위 스코프를 참조할 필요가 있기 때문이다.

[JS] javaScript Study 12

2023-05-02T00:00:00+09:00

12장 함수

12.1 함수란?

함수는 일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다.
- 프로그래밍 언어의 함수도 입력을 받아서 출력을 내노낸다. 이때 함수 내부로 입력을 전달받는 변수를 매개변수(parameter), 인수(argument), 출력을 반환값(return value)이라 한다.
- 함수는 함수 정의를 통해 생성한다.
- 미리 정의된 일련의 과정을 실행하기 위해 필요한 입력, 즉 인수를 매개변수를 통해 함수에 전달하면서 함수의 실행을 명시적으로 지시해야 한다. 이를 함수 호출이라 한다.
  - 함수를 호출하면 코드 블록에 담긴 문들이 일괄적으로 실행되고, 실행 결과, 즉 반환값을 반환한다.

12.2 함수를 사용하는 이유

동일한 작업을 반복적으로 수행해야 한다면 같은 코드를 중복해서 여러 번 작성하는 것이 아니라 미리 정의된 함수를 재사용하는 것이 효율적이다. 함수는 몇 번이든 호출할 수 있으므로 코드의 재사용이라는 측면에서 매우 유용하다.
코드의 중복을 억제하고 재사용성을 높이는 함수는 유지보수의 편의성을 높이고 실수를 줄여 코드의 신뢰성을 높이는 효과가 있다.
적절한 훔수 이름은 함수의 내부 코드를 이해하지 않고도 함수의 역할을 파악할 수 있게 돕는다. 이는 코드의 가독성을 향상시킨다.

12.3 함수 리터럴

자바스크립트의 함수는 객체 타입의 값이다. 함수 리터럴은 function 키워드, 함수 이름, 매개변수 목록, 함수 몸체로 구성된다.
- 리터럴은 값을 생성하기 위한 표기법이다. 따라서 함수 리터럴도 평가되어 값을 생성하며 이 값은 객체다. 즉, 함수는 객체다.
함수 리터럴의 구성 요소
- 함수 이름
  - 함수 이름은 식별자다. 따라서 식별자 네이밍 규칙을 준수해야 한다.
  - 함수 이름은 함수 몸체 내에서만 참조할 수 있는 식별자다.
  - 함수 이름은 생략할 수 있다. 이름이 있는 함수를 기명 함수, 이름이 없는 함수를 무명/익명 함수라 한다.
- 매개변수 목록
  - 0개 이상의 매개변수를 소괄호로 감싸고 쉼표로 구분한다.
  - 각 매개변수에는 함수를 호출할 때 지정한 인ㅅ후가 순서대로 할당된다. 즉, 매개변수 목록은 순서에 의미가 있다.
  - 매개변수는 함수 몸체 내에서 변수와 동일하게 취급한다. 따라서 매개변수도 변수와 마찬가지로 식별자 네이밍 규칙을 준수해야 한다.
- 함수 몸체
  - 함수가 호출되었을 때 일괄적으로 실행될 문들을 하나의 실행 단위로 정의된 코드 블록이다.
  - 함수 몸체는 함수 호출에 의해 실행된다.
함수는 객체지만 일반 객체와는 다르다. 일반 객체는 호출할 수 없지만 함수는 호출할 수 있다. 그리고 일반 객체에는 없는 함수 객체만의 고유한 프로퍼티를 갖는다.

12.4 함수 정의

함수 정의란 함수를 호출하기 이전에 인수를 전달받을 매개변수와 실행할 문들, 그리고 반환할 값을 지정하는 것을 말한다.

함수 정의 방식

함수 선언문

  function add(x,y){
  	return x+y;
  }

함수 표현식

  var add = function add(x,y){
  	return x+y;
  };

Function 생성자 함수

  var add = new Function('x','y','return x + y');

화살표 함수(ES6)
```
  var add = (x,y) => x + y;
```

모든 함수 정의 방식은 함수를 정의한다는 면에서는 동일하다. 단, 미묘하지만 중요한 차이가 있다.
변수에는 선언, 함수에는 정의라고 표현한다.

함수 선언문
1. 함수 선언문은 함수 리터럴과 형태가 동일하다. 단, 함수 리터럴은 함수 이름을 생략할 수 있으나 함수 선언문은 함수 이름을 생략할 수 없다.
```
 // 함수 선언문
 function add(x,y){
 	return x + y;
 }
        
 // 함수 참조
 // console.dir은 console.log와는 달리 함수 객체의 프로퍼티까지 출력한다.
 // 단, Node.js 환경에서는 console.log와 같은 결과가 출력된다.
 console.dir(add); // f add(x,y)
        
 // 함수 호출
 console.log(add(2,5)); // 7
```
2. 함수 선언문은 표현식이 아닌 문이다.
  1. 함수 선언문이든 함수 리터럴 표현식이든 함수가 생성되는 것은 동일하다. 하지만 함수를 생성하는 내부 동작에 차이가 있다.
    // 기명 함수 리터럴을 단독으로 사용하면 함수 선언문으로 해석된다. // 함수 선언문에서는 함수 이름을 생략할 수 없다. function foo() { console.log('foo'); } foo(); // foo // 함수 리터럴을 피연산자로 사용하면 함수 선언문이 아니라 함수 리터럴 표현식으로 해석된다. // 함수 리터럴에서는 함수 이름을 생략할 수 있다. (function bar() { console.log('bar'); }); bar(); // ReferenceError: bar is not defined
    1. 단독으로 사용된 함수 리터럴(foo)은 함수 선언문으로 해석된다.
      1. foo는 함수 몸체 내부에서만 유효한 식별자인 함수 이름이므로 foo로 함수를 호출할 수 없어야 한다. 그런데 가능하다.
      2. 그 이유는 foo는 자바스크립트 엔진이 암묵적으로 생성한 식별자이기 때문이다.
      3. 자바스크립트 엔진은 생성된 함수를 호출하기 위해 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고, 거기에 함수 객체를 할당한다.
    2. 그룹 연산자 () 내에 있는 함수 리터럴(bar)은 함수 선언문으로 해석되지 않고 함수 리터럴 표현식으로 해석된다.
      1. 그룹 연산자의 피연산자는 값으로 평가될 수 있는 표현식이어야 한다. 따라서 표현식이 아닌 문인 함수 선언문은 피연산자로 사용할 수 없다.
      2. 함수 몸체 외부에서는 함수 이름으로 함수를 참조할 수 없다. 따라서 위 예제의 bar 함수는 호출할 수 없다.
3. 함수는 함수 이름으로 호출하는 것이 아니라 함수 객체를 가리키는 식별자로 호출한다.
함수 표현식
1. 자바스크립트의 함수는 값처럼 변수에 할당할 수도 있고 프로퍼티 값이 될 수도 있으며 배열의 요소가 될 수도 있다. 이처럼 값의 성질을 갖는 객체를 일급 객체라 한다.
2. 자바스크립트의 함수는 일급 객체다. 함수가 일급 객체라는 것은 함수를 값처럼 자유롭게 사용할 수 있다는 의미다.
3. 함수는 일급 객체이므로 함수 리터럴로 생성한 함수 객체를 변수에 할당할 수 있다. 이러한 함수 정의 방식을 함수 표현식이라 한다.
```
 // 함수 표현식
 var add = function(x,y) {
 	return x+y;
 };
        
 console.log(add(2,5));
```
  - 함수 표현식의 함수 리터럴은 함수 이름을 생략하는 것이 일반적이다.
```
 // 기명 함수 표현식
 var add = function foo (x,y) {
 	return x + y;
 };
        
 // 함수 객체를 가리키는 식별자로 호출
 console.log(add(2,5));
        
 // 함수 이름으로 호출하면 ReferenceError가 발생한다.
 // 함수 이름은 함수 몸체 내부에서만 유효한 식별자다.
 console.log(foo(2,5)); // ReferenceError: foo is not defined
```
  - 함수를 호출할 때는 함수 이름이 아니라 함수 객체를 가리키는 식별자를 사용해야 한다.
함수 생성 시점과 함수 호이스팅
```
 // 함수 참조
 console.dir(add); // f add(x,y)
 console.dir(sub); // undefined
    
 // 함수 호출
 console.log(add(2,5));
 console.log(sub(2,5)); // TypeError: sub is not a function
    
 // 함수 선언문
 function add(x,y) {
 	return x + y;
 }
    
 // 함수 표현식
 var sub = function (x,y) {
 	return x - y;
 };
```
1. 함수 선언문으로 정의한 함수와 함수 표현식으로 정의한 함수의 생성 시점은 다르다.
  1. 함수 선언문으로 정의한 함수는 함수 선언문 이전에 호출할 수 있다.
  2. 함수 표현식으로 정의한 함수는 함수 표현식 이전에 호출할 수 없다.
2. 함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 함수 호이스팅(function hoisting)이라 한다.
  1. 함수 호이스팅과 변수 호이스팅은 미묘한 차이가 있다.
    1. var 키워드로 선언된 변수는 undefined로 초기화된다.
    2. 함수 선언문을 통해 암묵적으로 생성된 식별자는 함수 객체로 초기화된다.
  2. 함수 표현식은 변수 선언문과 변수 할당문을 한 번에 기술한 축약 표현과 동일하게 동작한다.
    1. 변수 할당문의 값은 할당문이 실행되는 시점, 즉 런타임에 평가되므로 함수 표현식의 함수 리터럴도 할당문이 실행되는 시점에 평가되어 함수 객체가 된다.
    2. 함수 표현식으로 함수를 정의하면 함수 호이스팅이 발생하는 것이 아니라 변수 호이스팅이 발생한다.
Function 생성자 함수
```
 var add = new Function('x','y','return x+y');
    
 console.log(add(2,5));
```
1. Function 생성자 함수로 함수를 생성하는 방시은 일반적이지 않으며 바람직하지도 않다.
  1. 클로저를 생성하지 않는 등, 함수 선언문이나 함수 표현식으로 생성한 함수와 다르게 동작한다.
화살표 함수
1. ES6에서 도입된 화살표 함수는 function 키워드 대신 화살표 ⇒ 를 사용해 좀 더 간략한 방법으로 함수를 선언할 수 있다. 화살표 함수는 항상 익명 함수로 정의한다.
```
 // 화살표 함수
 const add = (x,y) => x + y;
 console.log(add(2,5));
```
2. 화살표 함수는 기존의 함수보다 표현만 간략한 것이 아니라 내부 동작 또한 간략화되어 있다.
  1. 생성자 함수로 사용할 수 없다.
  2. 기존 함수와 this 바인딩 방식이 다르다.
  3. prototype 프로퍼티가 없으며 arguments 객체를 생성하지 않는다.

12.5 함수 호출

매개변수와 인수
1. 함수를 실행하기 위해 필요한 값을 함수 외부에서 함수 내부로 전달할 필요가 있는 경우, 매개변수(parameter)(인자)를 통해 인수(argument)를 전달한다.
  1. 인수는 값으로 평가될 수 있는 표현식이어야 한다.
    1. 인수는 함수를 호출할 때 지정하며, 개수와 타입에 제한이 없다.
    2. 초과된 인수는 그냥 버려지지 않는다. 모든 인수는 암묵적으로 arguments 객체의 프로퍼티로 보관된다.
  2. 매개변수는 함수를 정의할 때 선언하며, 함수 몸체 내부에서 변수와 동일하게 취급한다.
    1. 매개변수는 함수 몸체 내부에서만 참조할 수 있고 함수 몸체 외부에서는 참조할 수 없다. 즉, 매개변수의 스코프(유효 범위)는 함수 내부다.

인수 확인

 function add(x,y) {
 	return x+y;
 }
    
 console.log(add(2)); // NaN
 console.log(add('a','b')); // 'ab'

위 코드는 자바스크립트 문법상 어떠한 문제도 없으므로 자바스크립트 엔진은 아무런 이의 제기없이 위 코드를 실행할 것이다.
1. 자바스크립트 함수는 매개변수와 인수의 개수가 일치하는지 확인하지 않는다.
2. 자바스크립트는 동적 타입 언어다. 따라서 자바스크립트 함수는 매개변수의 타입을 사전에 지정할 수 없다.

자바스크립트의 경우 함수를 정의할 때 적절한 인수가 전달되었는지 확인할 필요가 있다.

인수의 개수는 확인하지 않음

 function add(x,y) {
 	if(typeof x !== 'number' || typeof y !== 'number') {
 			// 매겨변수를 통해 전달된 인수의 타입이 부적절한 경우 에러를 발생시킨다.
 			throw new TypeError('인수는 모두 숫자 값이어야 합니다.');
 	}
            
 	return x+y;
 }
            
 console.log(add(2)); // TypeError: 인수는 모두 숫자 값이어야 합니다.
 console.log(add('a','b')); // TypeError: 인수는 모두 숫자 값이어야 합니다.

ES6에서 도입된 매개변수 기본값을 사용

 function add(a,b,c) {
 	a = a || 0;
 	b = b || 0;
 	c = c || 0;
 	return a+b+c;
 }
            
 console.log(add(1,2,3)); // 6
 console.log(add(1,2)); // 3
 console.log(add(1)); // 1
 console.log(add()); // 0

 function add(a=0,b=0,c=0) {
 	return a+b+c;
 }
            
 console.log(add(1,2,3)); // 6
 console.log(add(1,2)); // 3
 console.log(add(1)); // 1
 console.log(add()); // 0

매개변수의 최대 개수
1. ECMAScript 사양에서는 매개변수의 최대 개수에 대해 명시적으로 제한하고 있지 않다.
2. 매개변수는 순서에 의미가 있다.
3. 이상적인 함수는 한 가지 일만 해야 하며 가급적 적게 만들어야 한다.
  1. 매개변수는 최대 3개 이상을 넘지 않는 것을 권장한다.
  2. 만약 그 이상의 매개변수가 필요하다면 하나의 매개변수를 선언하고 객체를 인수로 전달하는 것이 유리하다.
반환문
1. 함수는 return 키워드와 표현식(반환값)으로 이뤄진 반환문을 사용해 실행 결과를 함수 외부로 반환(return)할 수 있다.

12.6 참조에 의한 전달과 외부 상태의 변경

원시 값은 값에 의한 전달, 객체는 참조에 의한 전달 방식으로 동작한다.
매개변수도 함수 몸체 내부에서 변수와 동일하게 취급되므로 매개변수 또한 타입에 따라 값에 의한 전달, 참조에 의한 전달 방식을 그대로 따른다.
```
  // 매개변수 primitive는 원시 값을 전달받고, 매개변수 obj는 객체를 전달받는다.
  function changeVal(primitive, obj) {
  	primitive += 100;
  	obj.name = 'Kim';
  }
    
  // 외부 상태
  var num = 100;
  var person = { name: 'Lee' };
    
  console.log(num); // 100
  console.log(person); // {name: "Lee"}
    
  // 원시 값은 값 자체가 복사되어 전달되고 객체는 참조 값이 복사되어 전달된다.
  changeVal(num, person);
    
  // 원시 값은 원본이 훼손되지 않는다.
  console.log(num); // 100
    
  // 객체는 원본이 훼손된다.
  console.log(person); // {name: "Kim"}
```
- 원시 타입 인수는 값 자체가 복사되어 매개변수에 전달되기 때문에 함수 몸체에서 그 값을 변경(재할당을 통한 교체)해도 원본은 훼손되지 않는다. 다시 말해, 외부 상태, 즉 함수 외부에서 함수 몸체 내부로 전달한 원시 값의 원본을 변경하는 어떠한 부수 효과도 발생하지 않는다.
- 객체 타입 인수는 참조 값이 복사되어 매개변수에 전달되기 때문에 함수 몸체에서 참조 값을 통해 객체를 변경할 경우 원본이 훼손된다. 다시 말해, 외부 상태, 즉 함수 외부에서 함수 몸체 내부로 전달한 참조값에 의해 원본 객체가 변경되는 부수 효과가 발생한다.
  - 함수가 외부 상태를 변경하면 상태 변화를 추적하기 어려워진다. 이는 코드의 복잡성을 증가시키고 가독성을 해치는 원인이 된다.
  - 이러한 현상은 객체가 변경할 수 있는 값이며, 참조에 의한 전달 방식으로 동작하기 때문에 발생하는 부작용이다.
  - 이러한 문제의 해결 방법 중 하나는 객체를 불변 객체로 만들어 사용하는 것이다.
    - 객체의 복사본을 새롭게 생성하는 비용은 들지만 객체를 마치 원시 값처럼 변경 불가능한 값으로 동작하게 만드는 것이다.
    - 이를 통해 객체의 상태 변경을 원천봉쇄하고 객체의 상태 변경이 필요한 경우에는 객체의 방어적 복사를 통해 원본 객체를 완전히 복제, 즉 깊은 복사를 통해 새로운 객체를 생성하고 재할당을 통해 교체한다. 이를 통해 외부 상태가 변경되는 부수 효과를 없앨 수 있다.
  - 외부 상태를 변경하지 않고 외부 상태에 의존하지도 않는 함수를 순수 함수라 한다.
    - 순수 함수를 통해 부수 효과를 최대한 억제하여 오류를 피하고 프로그램의 안정성을 높이려는 프로그래밍 패러다임을 함수형 프로그래밍이라 한다.
    - → 12.7.5절 “순수 함수와 비순수 함수” 참고

12.7 다양한 함수의 형태

즉시 실행 함수
1. 함수 정의와 동시에 즉시 호출되는 함수를 즉시 실행 함수라고 한다. 즉시 실행 함수는 단 한 번만 호출되며 다시 호출할 수 없다.
```
 // 익명 즉시 실행 함수
 (function () {
 	var a = 3;
 	var b = 5;
 	return a * b;
 }());
```
  - 즉시 실행 함수는 함수 이름이 없는 익명 함수를 사용하는 것이 일반적이다.
```
 // 기명 즉시 실행 함수
 (function foo() {
 	var a = 3;
 	var b = 5;
 	return a * b;
 }());
```
  - 함수 이름이 있는 기명 즉시 실행 함수도 사용할 수 있다. 하지만 그룹 연산자 ( … ) 내의 기명 함수는 함수 선언문이 아니라 함수 리터럴로 평가되며 함수 이름은 함수 몸체에서만 참조할 수 있는 식별자이므로 즉시 실행 함수를 다시 호출할 수는 없다.
2. 그룹 연산자로 함수를 묶은 이유는 먼저 함수 리터럴을 평가해서 함수 객체를 생성하기 위해서다. 따라서 먼저 함수 리터럴을 평가해서 함수 객체를 생성할 수 있다면 다음과 같이 그룹 연산자 이외의 연산자를 사용해도 좋다.
```
 (function () {
 	// ...
 }());
        
 (function () {
 	// ...
 })();
        
 !function () {
 	// ...
 }();
        
 +function () {
 	// ...
 }();
```
3. 즉시 실행 함수도 일반 함수처럼 값을 반환할 수 있고 인수를 전달할 수도 있다.
```
 var res = (function () {
 	var a = 3;
 	var b = 5;
 	return a * b;
 }());
        
 console.log(res); // 15
        
 res = (function (a,b) {
 	return a * b;
 }(3, 5));
        
 console.log(res); // 15
```

재귀 함수

함수가 자기 자신을 호출하는 것을 재귀 호출이라 한다. 재귀 함수는 자기 자신을 호출하는 행위, 즉 재귀 호출을 수행하는 함수를 말한다.
재귀 함수는 자신을 무한 재귀 호출한다. 따라서 재귀 함수 내에는 재귀 호출을 멈출 수 있는 탈출 조건을 반드시 만들어야 한다.

 // 함수 표현식
 var factorial = function foo(n) {
 	// 탈출 조건: n이 1 이하일 때 재귀 호출을 멈춘다.
 	if(n<=1) return 1;
 	// 함수를 가리키는 식별자로 자기 자신을 재귀 호출
 	return n * factorial(n - 1);
    	
 	// 함수 이름으로 자기 자신을 재귀 호출할 수도 있다.
 	// console.log(factorial === foo); // true
 	// return n* foo(n-1);
 };
    
 console.log(factorial(5)); // 5! = 5 * 4 * 3 * 2 * 1 = 120

중첩 함수
1. 함수 내부에 정의된 함수를 중첩 함수 또는 내부 함수라 한다. 그리고 중첩 함수를 포함하는 함수는 외부 함수라 부른다.
2. 중첩함수는 외부 함수 내부에서만 호출할 수 있다. 일반적으로 중첩함수는 자신을 포함하는 외부 함수를 돕는 헬퍼 함수의 역할을 한다.
```
 function outer() {
 	var x = 1;
    	
 	// 중첩 함수
 	function inner() {
 		var y = 2;
 		// 외부 함수의 변수를 참조할 수 있다.
 		console.log(x+y); // 3
 	}
    
 	inner();
 }
    
 outer();
```
콜백 함수
```
 // 외부에서 전달받은 f를 n만큼 반복 호출한다.
 function repeat(n, f) {
 	for(var i=0;i<n;i++) {
 		f(i); // i를 전달하면서 f를 호출
 	}
 }
    
 var logAll = function (i) {
 	console.log(i);
 };
    
 // 반복 호출할 함수를 인수로 전달한다.
 repeat(5, logAll); // 0 1 2 3 4
    
 var logOdds = function (i) {
 	if(i%2) console.log(i);
 };
    
 // 반복 호출할 함수를 인수로 전달한다.
 repeat(5, logOdds); // 1 3
```
1. 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수라고 하며, 매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수를 고차 함수라고 한다.
  1. 고차 함수는 콜백 함수를 자신의 일부분으로 합성한다.
  2. 고차 함수는 매개변수를 통해 전달받은 콜백 함수의 호출 시점을 결정해서 호출한다. 다시 말해, 콜백 함수는 고차 함수에 의해 호출되며 이때 고차 함수는 필요에 따라 콜백 함수에 인수를 전달할 수 있다.
  3. 콜백 함수가 고차 함수 내부에만 호출된다면 콜백 함수를 익명 함수 리터럴로 정의하면서 곧바로 고차 함수에 전달하는 것이 일반적이다.
    // 익명 함수 리터럴을 콜백 함수로 고차 함수에 전달한다. // 익명 함수 리터럴은 repeat 함수를 호출할 때마다 평가되어 함수 객체를 생성하다. repeat(5, function (i) { if( i % 2 ) console.log(i); }); // 1 3
    1. 이때 콜백 함수로서 전달된 함수 리터럴은 고차 함수가 호출될 때마다 평가되어 함수 객체를 생성한다.
    2. 따라서 콜백 함수를 다른 곳에서도 호출할 필요가 있거나, 콜백 함수를 전달받는 함수가 자주 호출된다면 함수 외부에서 콜백 함수를 정의한 후 고차 함수에 전달하는 편이 효율적이다.
순수 함수와 비순수 함수
1. 어떤 외부 상태에 의존하지도 않고 변경하지도 않는, 즉 부수 효과가 없는 함수를 순수 함수라 한다.
```
 var count = 0; // 현재 카운트를 나타내는 상태
        
 // 순수 함수 increase는 동일한 인수가 전달되면 언제나 동일한 값을 반환한다.
 function increase(n) {
 	return ++n;
 }
        
 // 순수 함수가 반환한 결과값을 변수에 재할당해서 상태를 변경
 count = increase(count);
 console.log(count); // 1
        
 count = increase(count);
 console.log(count); // 2
```
  1. 동일한 인수가 전달되면 언제나 동일한 값을 반환하는 함수이다.
    1. 어떤 외부 상태에도 의존하지 않고 오직 매개변수를 통해 함수 내부로 전달된 인수에게만 의존해 값을 생성해 반환한다.
    2. 외부 상태에는 의존하지 않고 함수 내부 상태에만 의존한다 해도 그 내부 상태가 호출될 때마다 변화하는 값이라면 순수 함수가 아니다.
  2. 인수 불변성을 유지한다.
  3. 함수의 외부 상태를 변경하지 않는다.
2. 외부 상태에 의존하거나 외부 상태를 변경하는, 즉 부수 효과가 있는 함수를 비순수 함수라고 한다.
```
 var count = 0; // 현재 카운트를 나타내는 상태: increase 함수에 의해 변화한다.
        
 // 비순수 함수
 function increase() {
 	return ++count; // 외부 상태에 의존하며 외부 상태를 변경한다.
 }
        
 // 비순수 함수는 외부 상태(count)를 변경하므로 상태 변화를 추적하기 어려워진다.
 increase();
 console.log(count); // 1
        
 increase();
 console.log(count); // 2
```
  1. 함수의 외부 상태에 의존하는 함수는 외부 상태에 따라 반환값이 달라진다.
    1. 외부 상태에는 전역 변수, 서버 데이터, 파일, Console, DOM 등이 있다.
    2. 함수가 외부 상태를 변경하면 상태 변화를 추적하기 어려워진다.
3. 함수형 프로그래밍은 순수 함수와 보조 함수의 조합을 통해 외부 상태를 변경하는 부수 효과를 최소하해서 불변성을 지향하는 프로그래밍 패러다임이다.
  1. 결국 순수 함수를 통해 부수 효과를 최대한 억제해 오류를 피하고 프로그램의 안정성을 높이려는 노력의 일환이라 할 수 있다.
  2. 자바스크립트는 멀티 패러다임 언어이므로 객체지향 프로그래밍뿐만 아니라 함수형 프로그래밍을 적극적으로 활용하고 있다.

[JS] javaScript Study 11

2023-05-01T00:00:00+09:00

11장 원시 값과 객체의 비교

11.1 원시값

변경 불가능한 값
1. 원시 타입의 값, 즉 원시 값은 변경 불가능한 값이다.
2. 변경 불가능하다는 것은 변수가 아니라 값에 대한 진술이다.
  1. 변수 값을 변경하기 위해 원시 값을 재할당하면 새로운 메모리 공간을 확보하고 재할당한 값을 저장한 후, 변수가 참조하던 메모리 공간의 주소를 변경한다. 값의 이러한 특성을 ****불변성****이라고 한다.
  2. 불변성을 갖는 원시 값을 할당한 변수는 재할당 이외에 변수 값을 변경할 수 있는 방법이 없다.
문자열과 불변성
1. 문자열은 유사 배열 객체이면서 이터러블이므로 배열과 유사하게 각 문자에 접근할 수 있다.
  1. 유사 배열 객체란 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고 length 프로퍼티를 갖는 객체를 말한다.
  2. 문자열은 마치 배열처럼 인덱스를 통해 각 문자에 접근할 수 있으며, length 프로퍼티를 갖기 때문에 유사 배열 객체이고 for 문으로 순회할 수도 있다.
값에 의한 전달
1. 변수에 원시 값을 갖는 변수를 할당하면 할당받는 변수에는 할당되는 변수의 원시 값이 복사되어 전달된다. 이를 값에 의한 전달이라 한다.
  1. 이 때 두 변수는 동일한 값을 갖는다. 하지만 두 변수에 저장된 값은 서로 다른 메모리 공간에 저장된 별개의 값이다.
2. 이처럼 “값 의한 전달”도 사실은 값을 전달하는 것이 아니라 메모리 주소를 전달한다. 단, 전달된 메모리 주소를 통해 메모리 공간에 접근하면 값을 참조할 수 있다.
3. 결국은 두 변수의 원시 값은 서로 다른 메모리 공간에 저장된 별개의 값이 되어 어느 한쪽에서 재할당을 통해 값을 변경하더라도 서로 간섭할 수 없다.

11.2 객체

자바스크립트 객체의 관리 방식
- 프로퍼티 키를 인덱스로 사용하는 해시 테이블(hash table)이라고 생각할 수 있다.
  - 대부분의 자바스크립트 엔진은 해시 테이블과 유사하지만 높은 성능을 위해 일반적인 해시 테이블보다 나은 방법으로 객체를 구현한다.
- 클래스 없이 객체를 생성할 수 있으며 객체가 생성된 이후라도 동적으로 프로퍼티와 메서드를 추가할 수 있다.
  - 이는 사용하기 매우 편리하지만 성능 면에서는 이론적으로 클래스 기반 객체지향 프로그래밍 언어의 객체보다 생성과 프로퍼티 접근에 비용이 더 많이 드는 비효율적인 방식이다.
    - 따라서 V8 자바스크립트 엔진에서는 프로퍼티에 접근하기 위해 동적 탐색 대신 히든 클래스라는 방식을 사용해 C++ 객체의 프로퍼티에 접근하는 정도의 성능을 보장한다.

변경 가능한 값
1. 객체(참조) 타입의 값, 즉 객체는 변경 가능한 값이다.
  1. 원시 값을 할당한 변수는 원시 값 자체를 값으로 갖는다.
  2. 객체를 할당한 변수가 기억하는 메모리 주소를 통해 메모리 공간에 접근하면 참조 값에 접근할 수 있다. 참조 값은 생성된 객체가 저장된 메모리 공간의 주소, 그 자체다.
2. 원시 값은 변경 불가능한 값이므로 원시 값을 갖는 변수의 값을 변경하려면 재할당 외에는 방법이 없다.
3. 객체는 변경 가능한 값이다. 따라서 객체를 할당한 변수는 재할당 없이 객체를 직접 변경할 수 있다. 즉, 재할당 없이 프로퍼티를 동적으로 추가할 수도 있고 프로퍼티 값을 갱신할 수도 있으며 프로퍼티 자체를 삭제할 수도 있다.
  1. 원시 값과는 다르게 여러 개의 식별자가 하나의 객체를 공유할 수 있다
- 얕은 복사는 객체에 중첩되어 있는 객체의 경우 참조 값을 복사한다.
- 깊은 복사는 객체에 중첩되어 있는 객체까지 모두 복사해서 원시 값처럼 완전한 복사본을 만든다.
참조에 의한 전달
1. 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다. 이를 참조에 의한 전달이라 한다.
2. “값에 의한 전달”과 “참조에 의한 전달”은 식별자가 기억하는 메모리 공간에 저장되어 있는 값을 복사해서 전달한다는 면에서 동일하다.
  1. 다만 식별자가 기억하는 메모리 공간, 즉 변수에 저장되어 있는 값이 원시 값이나 참조 값이냐의 차이만 있을 뿐이다.
  2. 따라서 자바스크립트에는 “참조에 의한 전달”은 존재하지 않고 “값에 의한 전달”만이 존재한다고 말할 수 있다.

[JS] javaScript Study 10

2023-04-27T00:00:00+09:00

10장 객체 리터럴

10.1 객체란?

자바스크립트는 객체(object) 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 거의 “모든 것”이 객체다.
원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체이다.
원시 타입 값, 즉 원시 값은 변경 불가능한 값이지만 객체 타입의 값, 즉 객체는 변경 가능한 값이다.
객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키(key)와 값(value)으로 구성된다.
- 프로퍼티 : 객체의 상태를 나타내는 값(data)
- 메서드 : 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작(behavior)
  - 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드(method)라 부른다.

10.2 객체 리터럴에 의한 생성

자바스크립트는 프로토타입 기반 객체지향 언어로서 클래스 기반 객체지향 언어와는 달리 다양한 객체 생성방법을 지원한다.

객체 리터럴

  var person = {
  	name: 'Lee',
  	sayHello: function() {
  		console.log(`Hello! My name is ${this.name}.`);
  	}
  };
        
  console.log(typeof person); // object
  console.log(person); // {name: "Lee:, sayHello: f}

Object 생성자 함수
생성자 함수
Object.create 메서드
클래스(ES6)

10.3 프로퍼티

객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다.
- 프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 심벌 값
- 프로퍼티 값: 자바스크립트에서 사용할 수 있는 모든 값
```
  var person = {
  	// 프로퍼티 키는 name, 프로퍼티 값은 'Lee'
  	name: 'Lee',
  	// 프로퍼티 키는 age, 프로퍼티 값은 20
  	age: 20
  };
```
식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용해야 한다.

문자열 또는 문자열로 평가할 수 있는 표현식을 사용해 프로퍼티 키를 동적으로 생성할 수도 있다.

이 경우에는 프로퍼티 키로 사용할 표현식을 대괄호([…])로 묶어야 한다.

  var obj = {};
  var key = 'hello';
        
  // ES5: 프로퍼티 키 동적 생성
  obj[key] = 'world';
  // ES6: 계산된 프로퍼티 이름
  // var obj = { [key]: 'world' };
        
  console.log(obj); // {hello: "world"}

프로퍼티 키에 문자열이나 심벌 값 외의 값을 사용하면 암묵적 타입 변환을 통해 문자열이 된다.
```
  var foo = {
  	0: 1,
  	1: 2,
  	2: 3
  };
    
  console.log(foo); // {0: 1, 1: 2, 2: 3}
```

10.4 메서드

메서드는 객체에 묶여있는 함수를 의미한다.

  var circle = {
  	radius: 5, // <- 프로퍼티
    
  	// 원의 지름
  	getDiameter: function() { // <- 메서드
  		return 2 * this.radius; // this는 circle을 가리킨다.
  	}
  };
    
  console.log(circle.getDiameter()); // 10

10.5 프로퍼티 접근

마침표 프로퍼티 접근 연산자(.)를 사용하는 마침표 표기법
대괄호 프로퍼티 접근 연산자([…])를 사용하는 대괄호 표기법
- 대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 한다.
- 객체에 존재하지 않는 프로퍼티에 접근하면 반환한다.

var person = {
	name: 'Lee'
};

// 마침표 표기법에 의한 프로퍼티 접근
console.log(person.name); // Lee

// 대괄호 표기법에 의한 프로퍼티 접근
console.log(person['name']); // Lee

var person = {
	'last-name': 'Lee',
	1: 10
};

person.'last-name'; // -> SyntaxError: Unexpected string
person.last-name; // -> 브라우저 환경: NaN
									// -> Node.js 환경: ReferenceError: name is not defined
person[last-name]; // -> ReferenceError: last is not defined
person['last-name']; // -> Lee

// 프로퍼티 키가 숫자로 이뤄진 문자열의 경우 따옴표를 생략할 수 있다.
person.1; // -> SyntaxError: Unexpected number
person.'1'; // -> SyntaxError: Unexpected string
person[1]; // -> 10 : person[1] -> person['1']
person['1']; // -> 10

10.6 프로퍼티 값 갱신

이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신된다.

var person = {
	name: 'Lee'
};

// person 객체에 name 프로퍼티가 존재하므로 name 프로퍼티의 값이 갱신된다.
person.name = 'Kim';
console.log(person.name); // {name: "Kim"}

10.7 프로퍼티 동적 생성

존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고 프로퍼티 값이 할당된다.

var person = {
	name: 'Lee'
};

// person 객체에는 age 프로퍼티가 존재하지 않는다.
// 따라서 person 객체에 age 프로퍼티가 동적으로 생성되고 값이 할당된다.
person.age = 20;
console.log(person); // {name: "Lee", age: 20}

10.8 프로퍼티 삭제

delete 연산자는 객체의 프로퍼티를 삭제한다.

이때 delete 연산자의 피연산자는 프로퍼티 값에 접근할 수 있는 표현식이어야 한다.
만약 존재하지 않는 프로퍼티를 삭제하면 아무런 에러 없이 무시된다.

  var person = {
  	name: 'Lee'
  };
    
  // 프로퍼티 동적 생성
  person.age = 20;
    
  // person 객체에 age 프로퍼티가 존재한다.
  // 따라서 delete 연산자로 age 프로퍼티를 삭제할 수 있다.
  delete person.age;
    
  // person 객체에 address 프로퍼티가 존재하지 않는다.
  // 따라서 delete 연산자로 address 프로퍼티를 삭제할 수 없다. 이때 에러가 발생하지 않는다.
  delete person.address;
    
  console.log(person); // {name: "Lee"}

# 10.9 ES6에서 추가된 객체 리터럴의 확장 기능

프로퍼티 축약 표현

프로퍼티 값은 변수에 할당된 값, 즉 식별자 표현식일 수도 있다.

 //ES5
 var x = 1, y = 2;
            
 var obj = {
 	x: x,
 	y: y
 };
            
 console.log(obj); // {x: 1, y: 2}

ES6에서는 프로퍼티 값으로 변수를 사용하는 경우 변수 이름과 프로퍼티 키가 동일한 이름일 때 프로퍼티 키를 생략할 수 있다. 이때 프로퍼티 키는 변수 이름으로 자동 생성된다.
```
 //ES6
 let x = 1, y = 2;
            
 //프로퍼티 축약 표현
 const obj = { x, y };
            
 console.log(obj); // {x: 1, y: 2}
```

계산된 프로퍼티 이름

문자열 또는 문자열로 타입 변환할 수 있는 값으로 평가되는 표현식을 사용해 프로퍼티 키를 동적으로 생성할 수도 있다. 이를 계산된 프로퍼티 이름이라 한다.

단, 프로퍼티 키로 사용할 표현식을 대괄호([…])로 묶어야 한다.

ES5에서는 객체 리터럴 외부에서 대괄호([…]) 표기법을 사용해야 한다.

 //ES5
 var prefix = 'prop';
 var i = 0;
                
 var obj = {};
                
 //계산된 프로퍼티 이름으로 프로퍼티 키 동적 생성
 obj[prefix + '-' + ++i] = i;
 obj[prefix + '-' + ++i] = i;
 obj[prefix + '-' + ++i] = i;
                
 console.log(obj); // {prop-1: 1, prop-2: 2, prop-3: 3}

ES6에서는 객체 리터럴 내부에서도 가능하다.

 //ES6
 const prefix = 'prop';
 var i = 0;
                
 // 객체 리터럴 내부에서 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성
 const obj = {
 	[`${prefix}-${++i}`]: i,
 	[`${prefix}-${++i}`]: i,
 	[`${prefix}-${++i}`]: i
 };
                
 console.log(obj); // {prop-1: 1, prop-2: 2, prop-3: 3}

메서드 축약 표현

ES5에서 매서드를 정의하려면 프로퍼티 값으로 함수를 할당한다.

 //ES5
 var obj = {
 	name: 'Lee',
 	sayHi: function() {
 		console.log('Hi! ' + this.name);
 	}
 };
            
 obj.sayHi(); // Hi! Lee

ES6에서 메서드를 정의할 때 function 키워드를 생략한 축약 표현을 사용할 수 있다.
1. ES6에서 메서드 축약 표현으로 정의한 메서드는 프로퍼티에 할당한 함수와 다르게 동작한다.
```
 //ES6
 const obj = {
 	name: 'Lee',
 	sayHi() {
 		console.log('Hi! ' + this.name);
 	}
 };
            
 obj.sayHi(); // Hi! Lee
```