ECMAScript | TypeScript 26

ECMAScript 5.1로 만든 조합(Combination) 함수

스칼라로 풀어보았던 문제 중 27번 문제의 알고리즘과 동일하게 작성해 보았다. flatMap 대신 배열의 concat 메소드를 이용해야 하는 점이 특이했다. 하지만 head나 tail을 직접 처리해야 한다는 점은 굉장히 까다로웠다. /** * 입력받은 배열의 조합을 만드는 함수 * @param n xCn 의 n 값 * @param values 조합으로 만들 값들 */ function combination(n, values) { return (function comb(n, values) { if(!values || values.length === 0) return []; else if(n === 1 || values.length === 1) return values.map(x => [].concat(x))..

ESCMAScript, Proxy와 Proxy Handler

프록시 패턴은 실제 데이터에 접근할 수 있는 일종의 인터페이스(상속구조의 인터페이스가 아니다)를 만드는 디자인 패턴이다. 자바의 ORM인 JPA에서의 예를 들자면, FetchType.LAZY로 설정되어 있을 때, 어떤 엔티티 객체와 이어진 엔티티 프로퍼티는 '진짜' 객체가 아닌 임시 객체로 실제로 사용될 때 데이터베이스에서 값을 조회해 '진짜' 객체가 만들어진다. ES6의 프록시는 JPA의 프록시와는 약간 다른 특성을 가진다. ES6의 프록시는 실제 객체와 핸들러 객체를 이용해 프로퍼티가 추가, 삭제, 변경 혹은 실행 될 때 특정 함수를 실행하는 객체를 만드는 클래스다. class Person { constructor(name) { this.name = name; } } const jack = new P..

ECMAScript, 딕셔너리와 Map

많은 언어에서 쓰이는 콜렉션 중에는 Map이라는 콜렉션이 있다. Map은 Key-Value 콜렉션으로 특정 키에 대한 값을 가지는 형태다. NoSql이나 In-memory DB에서도 사용되는 아주 유용한 형태다. 아래 코드들은 모두 TypeScript에서 작성했다. 1. Dictionary ObjectES6 전까지의 자바스크립트에는 Map의 구현체가 없었다. 대신 객체 프로퍼티를 자유롭게 추가/삭제할 수 있다는 장점을 이용해 특정 프로퍼티에 값을 할당한 형태인 '딕셔너리(Dictionary)' 객체를 만들어 사용해 왔다.const dictObj = {}; dictObj['first'] = 1; dictObj['second'] = 'second'; dictObj[10] = '100'; // key인 10은..

ECMAScript, Function.prototype의 bind 함수(this 지정, 커링)

Function에 구현되어 있는 bind 함수는 두 가지 용도로 사용할 수 있다. 1) 함수의 수신자 객체 지정 (이펙티브 자바스크립트 아이템 25)this는 자바스크립트에서의 기묘한 개념 중 하나다. 흔히 접하는 언어들과 달리 자바스크립트의 Scope는 코드 블록( {}로 구분되는 )이 아닌 '객체' 단위다. 때문에 아래와 같은 이상한 현상이 발생한다.let buffer = { entries: [], add: function(s) { this.entries.push(s); } }; buffer.add(100); // 100 추가 console.log(buffer.entries); // [100] (function () { this.entries = []; let x = buffer.add; x(300)..

Typescript의 Decorator - 2. Property Decorator, 간단한 Dependency Injection

클래스의 프로퍼티에도 데코레이터를 사용할 수 있다. 먼저 예제에 사용할 간단한 클래스를 정의한다.class Car { private name: string; private price: number; private type: string; constructor(name: string, price: number) { this.name = name; this.price = price; } public toString() { return `${this.name}, ${this.type}, ${this.price}`; } } 또, 객체를 주입할 때 사용할 간단한 컨테이너를 정의하고 객체를 넣어둔다.class Container { private static map: {[key: string]: any} = {}; ..

Typescript의 Decorator - 1. Class Decorator

타입스크립트의 데코레이터는 자바에서의 어노테이션과 유사하게 메타데이터를 지정할 수 있다. 하지만 인터페이스로써 메타데이터만을 저장하는 자바와 달리 ES6의 데코레이터는 메소드나 프로퍼티를 직접 변경할 수 있다. 더 정확히 말하자면, TypeScript의 데코레이터는 파이썬의 데코레이터와 마찬가지로, 함수를 파라미터로 받는 함수를 쉽게 선언하는 일종의 Sugar Syntax다.또, 어노테이션이 붙은 모든 클래스나 메소드, 프로퍼티를 찾을 수 있는 자바 리플렉션과 달리 TypeScript의 'reflect-metadata'에는 그런 기능이 없는 것으로 보인다. Angular의 app.module.ts 파일에 컴포넌트 클래스명을 직접 입력해야 하는 이유가 이것 때문이 아닐까 하는 추측을 해본다(추측만). 몇 ..