함수 선언문 또는 함수 표현식으로 정의한 함수는 일반적인 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있다.
// 함수는 객체다
function foo() {}
// 함수는 객체이므로 프로퍼티를 소요할 수 있다.
foo.prop = 10;
// 함수는 객체이므로 메서드를 소유할 수 있다.
foo.method = function() {
console.log(this.prop);
};
foo.method(); // 10
함수는 객체이지만 일반 객체와는 다르다. 일반 객체는 호출할 수 없지만 함수는 호출할 수 있다.
함수가 일반 함수로서 호출되면 함수 객체의 내무 메서드 [[Call]]이 호출되고 new 연산자와 함께 생성자 함수로서 호출되면 내부 메서드 [[Construct]]가 호출된다.
function foo () {}
// 일반적인 함수로서 호출: [[Call]]이 호출된다.
foo();
// 생성자 함수로서 호출: [[Construct]]가 호출된다.
new foo();
내부 메서드 [[Call]]을 갖는 함수 객체를 callable이라 하며, 내부 메서드 [[Construct]]를 갖는 함수 객체를 constructor, 갖지 않는 함수를 non-construct라고 부른다. callable은 호출할 수 있는 객체, 즉 함수를 말하며, constructor 는 생성자 함수로서 호출할 수 있는 함수, non-constructor는 객체를 생성자 함수로서 호출할 수 없는 함수를 의미한다.
constructor 와 non-constructor의 구분
자바스크립트 엔진은 어떻게 constructor와 non-constructor를 구분할까?
constructor : 함수 선언문, 함수 표현식, 클래스(클래스도 함수다)
non-constructor : 메서드(ES6 메서드 축약 표현), 화살표 함수
// 일반 함수 정의 : 함수 선언문, 함수 표현식
function foo() {}
const bar = function() {};
// 프로퍼티 x의 값으로 할당된 것은 일반 함수로 정의된 함수다. 이는 메서드로 인정하지 않는다.
const baz = {
x : fun
};
// 일반 함수로 정의된 함수만이 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 연산자와 함께 함수를 호출하면 해당 함수는 생성자 함수로 동작한다. new 연산자와 함께 함수를 호출하면 해당 함수는 생정자 함수로 동작한다. 다시 말해, 함수 객체의 내부 메서드 [[Call]]이 호출되는 것이 아니라 [[Constructor]] 가 호출된다. 단 new 연산자와 함께 호출하는 함수는 non-constructor가 아닌 constructor이어야 한다.
// 생성자 함수로서 정의하지 않은 일반 함수
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을 사용하면 new 연산자와 함께 생성자 함수로서 호출되었는지 확인할 수 있다. new 연산자와 함께 생성자 함수로서 호출되면 함수 내부의 new.target은 함수 자신을 가리킨다. new 연산자 없이 일반 함수로서 호출된 함수 내부의 new.target은 undefined 다.
// 생성자 함수
function circle(radius) {
// 이 함수가 new 연산자와 함께 호출되지 않았다면 new.target은 undefined다.
if(!new.target) {
// new 연산자와 함께 생성자 함수를 재귀 호출하여 생성된 인스턴스를 반환한다.
return new circle(radius);
}
this.radius = radiusl
this.getDiameter = function() {
return 2 * this.radius;
};
}
// new 연산자 없이 생성자 함수를 호출하여도 new.target을 통해 생성자 함수로서 호출된다.
const circle = Circle(5);
console.log(circle.getDiameter());
new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다. 빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성할 수 있다.
생성자 함수(constructor)란 new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수를 말한다. 생성자 함수에 의해 생성된 객체를 인스턴스(instance)라 한다.
// 빈 객체의 생성
const person = new Object();
// 프로퍼티 추가
person.name = 'Lee';
person.sayHello = function() {
console.log('Hi' + this.name);
};
console.log(person); // {name: 'Lee', sayHello: f}
person.sayHello(); // Hi Lee
생성자 함수
객체 리터럴에 의한 객체 생성 방식은 직관적이고 간편하다. 하지만 객체 리터럴에 의한 객체 생성 방식은 단 하나의 객체만 생성한다. 따라서 동일한 프로퍼티를 갖는 객체를 여러 개 생성해야 하는 경우 매번 같은 프로퍼티를 기술해야 하기 때문에 비효율적이다.
this는 객체 자신의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수다. this가 가리키는 값, 즉 this바인딩은 함수 호출 방식에 따라 동적으로 결정된다.
함수 호출 방식
this가 가리키는 값(this 바인딩)
일반 함수로서 호출
전역 객체
메서드로서 호출
메서드를 호출한 객체(마침표 앞의 객체)
생성자 함수로서 호출
생성자 함수가(미래에) 생성할 인스턴스
생성자 함수는 이름 그대로 객체(인스턴스)를 생성하는 함수다. 하지만 자바와 같은 클래스 기반 객체지향 언어의 생성자와는 다르게 그 형식이 정해져 있는 것이 아니라 일반 함수와 동일한 방법으로 생성자 함수를 정의하고 new 연산자와 함께 호출하면 해당 함수는 생성자 함수로 동작한다. 만약 new 연산자와 함께 생성자 함수를 호출하지 않으면 생성자 함수가 아니라 일반 함수로 동작한다.
생성자 함수의 인스턴스 생성 과정
1. 인스턴스 생성과 this 바인딩
암묵적으로 빈 객체가 생성된다. 이 빈 객체가 생성자 함수가 생성한 인스턴스다. 그리고 암묵적으로 생성된 빈 객체, 즉 인스턴스는 this에 바인딩된다. 생성자 함수 내부의 this가 생성자 함수가 생성할 인스턴스를 가리키는 이유가 바로 이것이다. 이 처리는 런타임 이전에 실행된다.
위 그림과 같이 Array List 는 연속적인 공간에 순차적으로 데이터를 저장한다. Array List 의 장점은 Indexing이 가능 하다는 것이다. 단점은 추가/ 삭제가 어렵다는 것이다. 사이즈가 고정되어 있다.
2. Linked List
Linked List
위 그림과 같이 Linked List 는 비연속적인 공간에 순서대로 데이터를 저장한다. Linked List 의 장점은 추가/ 삭제가 쉽다는 것이다. 단점은 위치 탐색을 할때 오래 걸린다는 것이다. 같은 데이터가 들어있으면 Linked List 의 메모리가 좀 더 많다.
접근자 프로퍼티 : 자체적으로는 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 호출되는 접근자 함수로 구성된 프로퍼티다
데이터 프로퍼티
데이터 프로퍼티는 다음과 같은 프로퍼티 어트리뷰트를 갖는다. 프로퍼타 어트리뷰트는 자바스크립트 엔진이 프로퍼티를 생성할 때 기본값으로 자동 생성된다.
const person = {
name : 'Lee'
};
// 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크럽터 객체를 취득한다.
console.log(Object.getOwnPropertyDescriptor(person, 'name'));
// { value : "Lee", writable : true, enumerable : true, configurable : ture }
Object.getOwnPropertyDescriptor 메서드가 반환한 프로퍼티 디스트립터 객체를 살펴보면 value 프로퍼티의 값은 'Lee'이다.
이것은 프로퍼티 어트리뷰트 [[Value]]의 값이 'Lee'인 것을 의미한다. 그리고 writable, enumerble, configurable 프로퍼티의 값은 모두 true 이다.
접근자 프로퍼티
접근자 함수는 getter/setter 함수라고도 부른다.
const person = {
// 데이터 프로퍼티
firstHName : 'Ungmo',
lastName : 'Lee',
//fullName은 접근자 함수로 구성된 접근자 프로퍼티다.
// getter 함수
get fullName() {
return `${this.firstName} ${this.lastName}`;
},
set fullName(name) {
[this.firstName, this.lastName] = name.split(' ');
}
};
console.log(person.firstName + ' ' + person.lastName); // Ungmo Lee
person.fullName = 'Hee Lee';
console.log(person); // {firstName: "Hee", lastName: "Lee"}
프로퍼티 정의
프로퍼티 정의란 Object.defineProperty 메서드를 사용하여 프로퍼티의 어트리뷰트를 정의하는 것이다.
const person = {};
// 데이터 프로퍼티 정의
Object.defineProperty(person, 'firstName', {
value : 'Ungmo',
writable : true,
enumerable : true,
configurable : true
});
Object.defineProperty(perosn, 'lastName', {
value : 'Lee'
});
let descriptor = Object.getOwnPropertyDescriptor(pserson, 'firstName');
console.log('firstName', descriptor);
// firstName {value: 'Ungmo', writable: true, enumerable: true, configurable: true}
// 디스트립터 프로퍼티를 누락시키면 undefined, false가 기본값이다.
descriptor = Object.getOwnPropertyDescriptor(person, 'lastName');
console.log('lastName', 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;
객체 변경 방지
객체는 변경 가능한 값이므로 재할당 없이 직접 변경할 수 있다. 즉, 프로퍼티를 추가하거나 삭제할 수 있고, 프로퍼티의 값을 갱신할 수 있으며, Object.defineProperty 또는 Object.defineProperties 메서드를 사용하여 프로퍼티 어트리뷰트를 재정의할 수도 있다.
객체 확장 금지
Object.preventExtensions 메서드는 객체의 확장을 금지한다. 객체 확장 금지란 프로퍼티 추가 금지를 의미한다.
즉, 확장이 금지된 객체는 프로퍼티 추가가 금지된다. 확장이 가능한 객체인지 여부는 Object.isExtensible 메서드로 확인할 수 있다.
const person = {name: 'Lee'};
// person 객체는 확장이 금지된 객체가 아니다.
console.log(Object.isExtensible(person)); // true
// person 객체의 확장을 금지하여 프로퍼티 추가를 금지한다.
Object.preventExtensions(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 객체를 밀봉된 객체가 아니다.
console.log(Object.isSealed(person)); // false
// person 객체를 밀봉하여 프로퍼티 추가,삭제,재정의를 금지한다.
Object.seal(person);
// 밀봉된 객체는 configurable이 false 다
console.log(Object.getOwnPropertyDescriptors(person));
person.age = 20; // 프로퍼티 추가 금지 무시된다.
console.log(perosn); {name:'lee'}
delete person.name; // 프로퍼티 삭제도 불가능 무시된다.
// 프로퍼티 재정의가 금지된다.
Object.defineProperty(person, 'name', {configurable: true});
객체 동결
Object.freeze 메서드는 객체를 동결시킨다. 동결된 객체는 읽기만 가능하다. 동결된 객체인지 여부는 Object.isFrozen 메서드로 확인할 수 있다.
