반복자(Iterator) 반복자(iterator)와 제너레이터(generator)는 상생관계입니다. 제너레이터로 값의 스트림을 생성할 수 있고, 반복자로 생성된 값을 소비할 수 있기 때문입니다. 가령 createFibonacciGenerator 함수를 호출하면 Symbol.iterator 프로퍼티와 next 메서드를 모두 정의한 값을 얻게 됩니다. 즉, 이터러블과 반복자 두 가지가 결합된 제너레이터가 반환됩니다. Symbol.iterator와 next를 구현하는 객체(또는 클래스)를 만들어 반복자나 이터러블을 직접 정의할 수 있습니다. 아래는 1에서 10까지의 숫자를 반복하는 반복자를 정의하는 예시입니다. let numbers = { *[Symbol.iterator]() { for (let n = 1; n
제너레이터 함수(generator function; 줄여서 제너레이터) 제너레이터 함수는 여러 개의 값을 생성하는 편리한 기능을 제공합니다. 제너레이터 함수를 이용하면 값을 생산하는 속도도 정교하게 조절할 수 있습니다. 제너레이터 함수는 소비자가 요청해야만 다음 값을 계산하기 때문에 무한의 목록 생성기 같은 까다로운 기능을 제공할 수 있습니다. 제너레이터 함수는 아래처럼 동작합니다. function* createFibonacciGenerator() { // ① let a = 0 let b = 1 while (true) { // ② yield a; // ③ [a, b] = [b, a + b] // ④ } } let fibonacciGenerator = createFibonacciGenerator(); fi..
TypeScript 실행 타입스크립트 설치 이전에 node가 설치되어 있어야 합니다. node 설치 방법은 아래 글을 참고해 주세요:) https://cozy-linda.tistory.com/entry/TypeScript-%EC%84%A4%EC%B9%98-%EB%B0%8F-%EC%82%AC%EC%9A%A9 TypeScript 설치 JavaScript 실행 환경 설치 TypeScript를 사용하려면, JavaScript 실행 환경이 있어야 하며, node.js와 browser가 필요합니다. Node.js Node.js는 Chrome's V8JavaScript Engine을 사용하여, JavaScript를 해석하고, OS 레벨에서 cozy-linda.com 1. 디렉터리 생성 cmd 창을 열고 아래의 명령어..
this의 타입 this의 값은 함수를 어떻게 호출했는지에 따라 달라지는데 이는 JAvaScript 코드를 이해하기 어렵게 만드는 고질적인 문제 중 하나입니다. (따라서 많은 개발팀에선 클래스 메서드를 제외한 다른 모든 곳에서 this 사용을 금한다고 합니다.) this가 자주 문제를 일으키는 원인은 할당 방법에 있습니다. 메서드를 호출할 때 this는 점 왼쪽의 값을 갖는다는 것이 일반적인 원칙입니다. let x = { a() { return this } } x.a() // a()의 바디 안에서 this는 객체 x 하지만 호출이 일어나기 전 어느 시점에서 a를 다시 할당하면 결과가 달라집니다. let a = x.a a() // 이제 a의 바디 안에서 this는 정의되지 않은 상태 아래처럼 날짜의 타입을..
call, apply, bind 함수를 괄호 ()로 호출하는 방법도 있지만, JavaScript에선 두 가지 방법을 추가로 제공합니다. function add(a: number, b: number): number { return a + b } add(10, 20) // 30으로 평가 add.apply(null, [10, 20]) // 30으로 평가 add.call(null, 10, 20) // 30으로 평가 add.bind(null, 10, 20)() // 30으로 평가 apply는 함수 안에서 값을 this로 한정하며 두 번째 인수를 펼쳐서 함수에 매개변수로 전달합니다. call도 같은 기능을 수행하지만, 인수를 펼쳐서 전달하지 않고, 순서대로 전달한다는 점이 다릅니다. 비슷한 방식으로 bind도 th..
나머지 매개변수 인수를 여러 개 받는 함수라면 그 목록을 배열 형태로 건넬 수 있습니다. function sum(numbers: number[]): number { return numbers.reduce((total, n) => total + n, 0) } sum([2, 4, 6)] // 12로 평가 때로는 인수의 개수가 고정된 고정 인자 API가 아니라 인수의 개수가 달라질 수 있는 가변 인자 API가 필요할 때도 있습니다. 전통적으로 JavaScript는 마법 같은 arguments 객체를 통해 해당 기능을 제공했습니다. JavaScript 런타임이 함수에 자동으로 arguments를 정의해 개발자가 함수로 전달한 인수 목록을 할당한다는 점은 마법 같은 일입니다. arguments는 일종의 순수한 배..
선택적 매개변수와 기본 매개변수 객체와 튜플 타입에서처럼 함수에서도 ?를 이용해 선택적 매개변수를 지정할 수 있습니다. 함수의 매개변수를 선언할 때 필수 매개변수를 먼저 지정하고 선택적 매개변수를 뒤에 추가합니다. function log(message: string, userName?: string){ let time = new Date().toLocaleTimeString() console.log(time, message, userName || '뭐... 읎는데...') } log('페이지 로딩됨') // "17:07:22 PM 페이지 로딩됨 뭐... 읎는데..." 출력 log('유저 들어옴', 'cozyLinda') // "17:09:10 PM 유저 들어옴 cozyLind" 출력 JavaScript에..
함수 선언과 호출 JavaScript에서 함수는 first-class 객체입니다. 즉, 객체를 다루듯이 함수를 변수에 할당하거나, 함수를 다른 함수로 전달하거나, 함수에서 함수를 반환하거나, 객체와 프로토타입에 할당하거나, 함수에 프로퍼티를 기록하거나, 함수에 기록된 프로퍼티를 읽는 등의 작업을 할 수 있습니다. JavaScript에서 함수로 할 수 있는 일이 정말 많은 덕분에 TypeScript도 이 모든 것을 자신의 타입 시스템에 녹여낼 수 있었습니다. 다음은 TypeScript 예제입니다. function add(a: number, b: number){ return a + b } 보통 함수 매개변수의 타입은 명시적으로 정의합니다. TypeScript는 항상 함수의 본문에서 사용된 타입을 추론하지만 ..
열거형(enum) 열거형(enum)은 해당 타입으로 사용할 수 있는 값을 열거하는 기법입니다. 열거형은 키를 값에 할당하고 순서가 없는 자료구조입니다. 따라서 TypeScript는 키에 접근할 때 주어진 키가 실제 존재하는지 확인할 수 있습니다. 문자열에서 문자열로 매핑하거나 문자열에서 숫자로 매핑하는 열거형, 이렇게 두 가지가 있습니다. 아래의 예시는 열거형의 예입니다. enum Language { English, Spanish, Korean } 열거형의 이름은 단수 명사로 쓰고, 첫 문자는 대문자로 하는 것이 관례입니다. 키도 앞 글자를 대문자로 표시합니다. TypeScript는 자동적으로 열거형의 각 멤버에 적절한 숫자를 추론해 할당하지만, 값을 명시적으로 설정할 수도 있습니다. TypeScript..
