## 1. 타입스크립트란?
 1. 정의
 - 타입스크립트를 컴파일하면 자바스크립트가 된다(자바스크립트의 확장판).
 - 어떤 OS, Browser, Host의 상관없이 작동한다.

 2. 이점
 - 생산성 : 타입을 통해 static checking and code refactoring이 간편해져 생산성을 높게 만들어준다.
 - 코드에 대한 높은 이해 : 타입을 통해 소프트웨어 구성 요소 간(지역변수, 매개변수, 리턴타입)의 인터페이스를 정의하고 기존 자바스크립트 라이브러리의 동작에 대한 높은 이해.
 - 호환성 : 자바스크립트의 최신 문법을 사용해도 컴파일 되면 ECMAScript 3 (or newer)로 변환되기 때문에 안심하고 써도 된다.

## 2. 기본타입
 1. Boolean
 2. Number
 - floating point value(자바스크립트의 number 특징과 동일)
 3. String
 - ', ", ` 의 value는 string type
 - 템플릿 문자열(``)의 expression은 값이 나오고 string으로 정의된다.
 4. Array
 - 타입을 정의하는 두가지 방법이 있으며, 동일하다.
 ```js
 let list: number[] = [1, 2, 3];

 let list: Array<number> = [1, 2, 3];
 ```
 5. Tuple
 - 고정된 배열이며, 각 요소의 타입을 정의해놓은것
 ```js

 // 방법1
 let arr : [string, number]

 // 방법2
 let arr: {
 0: string,
 1: number
 }


 arr = ['hello foo', 1];
 arr = ['typeIsOk', 'ThisIndexTypeisNumber So error occurrence'] // 2번째 요소의 타입이 맞지 않아 에러 발생
 ```
 6. Enum
 - 키들의 집합이며, 순서가 있지만(default : 0 시작) 변경가능
 - 키들의 value는 문자열이나, 숫자만 사용가능
 ```js
 enum Color {Red, Green, Blue}
 enum Color {Red = 1, Green, Blue}
 enum Color {Red = 1, Green = 2, Blue = 4}
 ``` 
 7. Any : 자바스크립트처럼 작동한다. 타입이 유동적으로 변경된다.
 8. Void : 함수의 결과값을 정의하는데 return 값이 없다고 명시해주는 것
 9. Null and Undefined
 10. Never : 함수끝에 도달 할 수 없다(에러 및 무한 루프시)
 ```js
 // 에러를 발생하기 때문에 함수안의 코드를 다 실행 못 시킬시
 function error(message: string): never {
 throw new Error(message);
 }

 // 에러가 리턴 될때
 function fail() {
 return error("Something failed");
 }

 // 무한루프시
 function infiniteLoop(): never {
 while (true) {
 }
 }
 ```
 11. Object
 12. Type assertions
 ```js
 let someValue: any = "this is a string";
 let strLength1: number = (<string>someValue).length;
 let strLength2: number = (someValue as string).length;
 ```
 
## 3. Interface
 1. 정의
 - 인터페이스에 정의된 속성, 타입의 조건만 만족한다면 객체의 속성 갯수가 더 많아도 상관 없다는 의미. 또한, 인터페이스에 선언된 속성 순서를 지키지 않아도 됩니다

 2. 예졔
 ```js
 interface LabeledValue {
 label: string;
 }

 function printLabel(labeledObj: LabeledValue) {
 console.log(labeledObj.label);
 }

 let myObj = {size: 10, label: "Size 10 Object"};
 printLabel(myObj); // myObj의 size는 정의하지 않았지만, 에러가 발생하지 않는다.
 ```
 3. interface Optional Properties
 ```js
 interface OptionValue {
 // 속성을 선택적으로 적용
 color?: string;
 width?: number;

 // 상수 / const 처럼 적용
 readonly x: number;
 readonly y: number;
 
 //정의하지 않은 속성들을 추가로 사용하고 싶을때
 [propName: string]: any;

 //함수를 정의할때는 매개변수와 반환값을 정의
 (source: string, subString: string): boolean;
 }
 ```
 4. implements 와 extends
 - class에 interface implements
 ```js
 interface ClockConstructor {
 new (hour: number, minute: number);
 }

 class Clock implements ClockConstructor {
 currentTime: Date;
 constructor(h: number, m: number) { }
 }

 ```

 - interface에 interface를 extends로 확장 가능(다중 interface 확장 가능)
 ```js
 interface Shape {
 color: string;
 }

 interface PenStroke {
 penWidth: number;
 }

 interface Square extends Shape, PenStroke {
 sideLength: number;
 }
 ```

TypeScript 기본타입과 interface

## 자바스크립트 인터페이스(Interface) 정의 
 1. 자바스크립트 언어상의 고유명사
 2. 사양의 맞는 값과 연결된 속성키의 셋트
 3. 어떤 오브젝트라도 인터페이스를 충족시킬 수 있다.
 4. 하나의 오브젝트는 여러개의 인터페이스를 충족킬 수 있다.
 * test라는 키를 가지고 값으로는 문자열 인자를 받아 boolean 값을 리턴하는 함수
 ```js
 // 객체 형태
 const testInterface = {
 test : function(str) {
 return true;
 }
 }
 
 // 클래스 형태 
 const testInterface = class{
 test(str){
 return true;
 } 
 } 
 ``` 

## 자바스크립트는 덕타이핑으로 구현한 인터페이스?
 1. 자바스크립트의 인터페이스 덕타이핑을 구현한 프로토콜 같은 것
 2. testInterface라는 오브젝트를 만들었지만, test라는 함수가 있는지 보장할 수 없다.
 런파임 / 컴파일 타임에서 체그할 수 없고도, 상속을 통해서 있는지 오류로 확인한다.
 객체를 상관하지 않고, test라는 인터페이스 조건을 만족하면 test인터페이스 구현제로 본다. 이를 `덕타이핑`이라고 의미한다
 3. 가장 중요한 것은 test라는 메소드와 test를 통해서 나오는 값! 다른것은 신경쓰지 않는다.

## Iterator Interface란?
 1. 특징
 - next라는 키를 갖고
 - 값으로 인자를 받지 않고 iteratorResultObject를 반환하는 함수가 온다
 - iteratorResultObject는 value와 done이라는 키를 갖고 잇다
 - 이중에 done은 계속 반복할 수 있는지 없는지에 따라 불린값을 반환한다.
 ```js
 const Iterator = 
 {
 data:[1,2,3,4],
 next: function(){
 return {
 done :this.data.length == 0,
 value:this.data.pop()
 }
 } 
 } 
 ``` 
 2. done : 반복 여부, value : 값

## Iterable Interface란?
 1. 특징
 - Symbol.iterator라는 키를 갖고
 - 값으로 인자를 받지 않고 Iterator Object를 반환하는 함수가 온다
 ```js
 const Iterable = 
 {
 [Symbol.iterator]: function(){
 return {
 next: function(){
 return {value:1, done:false}
 }
 }
 } 
 } 
 ``` 
 
 2. Symbol과 ES6의 오브젝트 키에서의 함수
 - Symbol은 primitive 타입이며(메모리에서 값이 복사), 유니크한 값
 - ES6에서는 오브젝트 내에서 함수를 구현하면 함수의 이름으로 키를 하고 바디를 value로 한다
 3. ES6의 for-in
 - ES6에 숫자 -> 문자열 -> 심볼 순으로 나오면 그 속에서도 순서대로 정렬이 된다.

## ES6 Interface 정리 
 1. ES6 이후 부터는 내부에 인터페이스 개념이 도입되서 덕타이핑을 할 수 있는 인터페이스 표준이 있다.
 2. 만약에 언어에서 인터페이스를 요구하면 인터페이스의 스펙대로 우리가 만든게 `Iterable, Iterator` 인터페이
 3. 문자열, 배열에서 이미 구현되어 있다. ES6 이전과는 `코어가 다르기 때문에 다르게 동작한다`.
 
## 값 vs 문 / 호출지연(연산 / 제어문 / 호출)
 0. 값 vs 문
 - 값은 메모리상에 저장할수 있나 다른 곳에 할당 할수 거 있음.
 - 문은 컴파일러(자바스크립트 엔진)에게 힌트를 주어 실행하게 하고 사라진다
 - 문 한번 실행 후 메모리에서 사라지고 다시 재연이 불가 복원 불가
 - 휘발성의 특징을 가지고 있다.
 1. 연산지연
 ```js
 // 연산자에 따라 지연
 const foo = a || b;
 const bar = a && b;
 ```
 2. 제어문 지연
 - 원래 컴퓨터는 메모리에 올라온 명령어를 다 실행하여야 하는데 
 - if/switch 제어문 같은 경우에 실행도중에!!!! 
 - 지연/점프 시킬수(continue/ breake / else) 다. 
 3. 호출지연
 - 코드를 함수바디 안에 가두면 호출되기 전까지 코드는 실행되지 않고 지연된다.
 - 함수를 값으로 만든다. 이렇게 원할때 코드를 실행하고 다시 호출할수 있게 만드는 것을 호출지연
 예) 값으로 만들거나. 객체의 속성으로 만들어서 호출
 4. 결론
 - 지연이란, 모든 코드를 실행하는 것이 아니라, 부분적으로 읽어 실행하는 것을 말한다.

## While 문으로 살펴보는 Iterator
```js
 let arr = [1, 2, 3, 4];
 while(arr.length > 0){ // 반복 판단 여부
 console.log(arr.pop()); // 반복시 처리할 것
 }

 const iter= {
 [Symbol.iterator](){return this},
 arr : [1,2,3,4],
 next(){
 return {
 done : this.arr.length === 0, //반복 판단 여부
 value : this.arr.pop() // 반복시 처리할 
 }
 }
 }
```
 1. 정의
 - 반복 자체를 하지는 않지만, 외부에서 반복을 하려고 할때
 - 반복에 필요한 조건과 실행을 미리 준비해 둔 객체
 
 `!!! 반복 행위와 반복을 위한 준비를 분리!!!`
 
 - 미리 반복에 대한 준비를 해두고, 필요할 때 필요한만큼 반복
 - 반복을 재현 할수 잇음
 2. 결론
 - 서술적이던 문을 값(함수)으로 대상화한다. 
 - 문에서는 외부에서 조건을 판단했다면, 값(함수)에서는 내부에서 판단한다.
 - 이러한 분리를 통하여 문을 함수로 호출하여 계속해서 호출 할 수있다.
 - 단점이라면, 문은 엔진이 자동으로 호출하지만, 함수는 실행기를 만들어주고 호출을 해줘야한다.
 
## 객체와 캡슐화
 1. 정의 
 - 어떠한 행동에 따라 외부에서 조건을 찾는것이 아니라 내부에서 물어보는것을 객체라고 한다
 2. 캡슐화
 - 외부에서는 내부의 행동(로직)이 보여주지 않고 돈이 있으면 인출하고 없으면 못 인출한다는 것 그 중간과정이 캡슐화(은닉)
 - ATM에서 돈을 인출하는 행동이 캡슐화된 것 
 - 내가 보여주고 싶은 결과만 보여준다 그 안은 신경쓰지마 `내부의 사용과 외부의 격리`
 3. 배열과 문자열은 내장객체는 iterator interface의 캡슐화 
 
## ES6의 Loop
 1. 정의
 - 지연실행을 기반으로 iterator 객체를 소비하는 형태
 - 여기서 구조란 배열,객체가 아니고 Iterable이다(배열 안에는 이터레이터 객체가 있다)
 ```js
 const loop = (iter, f) => {
 //Iterable이라면 Iterator 얻음
 if(typeof iter[Symbol.iterator] === 'function'){
 iter = iter[Symbol.iterator]();
 }
 
 //IteratorObject가 아니라면 건너뜀
 if(typeof iter.next != 'function') return;
 // 쉴드 패턴
 
 while(true){
 const v = iter.next();
 if(v.done) return; // 종료처리
 f(v.value);
 }
 }
 
 const iter = {
 [Symbol.iterator](){return this},
 arr : [1,2,3,4],
 next(){
 return {
 done : this.arr.length === 0,
 value : this.arr.pop()
 }
 }
 }
 
 loop(iter, console.log);
 // 4 3 2 1
 
 
 
 // 문자열과 배열은 자체적으로 iterable 인터페이스를 가지고 있다.
 console.log(typeof ""[Symbol.iterator]) //function
 console.log(typeof [][Symbol.iterator]) //fuction
 ```
 2. Array destructuring
 ```js
 const [a, ...b] = iter[Symbol.iterator]();
 console.log(a, b) // 4, [3,2,1]
 ```
 3. Spread
 ```js
 const a = [...iter];console.log(a);
 console.log(a) // [4,3,2,1]
 ```
 4. Rest parameter
 - arguments객체를 쓰는 것보다 rest연산자를 사용하는것이 가독성이 좋다(다른 언어와 비)
 - 함수 선언식에서 사용되면 rest operator를 사용!
 - 생성자에 배열을 보내고 싶다!!! 그러면 rest operator를 사용한다(call, apply로는 불가능)
 ```js
 const Cls = function (...arg){
 this.base = arg;
 }
 const arr = [1,2,3,4,5,6]
 new Cls(...arr)
 
 const test = (...arg) => console.log(arg);
 test(...iter);
 ```
 5. for of
 - 정의 
 - of 앞에 벨류값 / of 뒤는 이터레이터 또는 이터레이블 객체
 done이 될때까지 계속해서 돌아간다 / 루프에 대한 통제권을 객체가 가지고 잇다 
 ```js
 for(const v of iter){
 console.log(v);
 } 
 ```
 
## Generator
 1. 정의
 - 호출하면 Iterator 객체가 나온다(Iteratable은 Iterator 반환)
 - yield 통하여 value를 반환한다.
 - Coroutine(코루)틴 : 여러번 진입하고(진입 위치가 달라진다 여러번 반환한다) 들어올때 중간부터 들어올수 잇다
 ```js
 const N2 = class{
 constructor(max){
 this.max = max;
 }
 
 [Symbol.iterator](){
 let cursor = 0,
 max = this.max;
 return {
 done:false,
 next(){
 if(cursor > max){
 this.done = true;
 }else{
 this.value = cursor * cursor;
 cursor++;
 }
 return this;
 }
 };
 }
 };
 const generator = function*(max){
 let cursor = 0;
 while(cursor < max){
 yield cursor * cursor;cursor++;
 }
 };
 
 console.log([...generator(5)]);//[0, 1, 4, 9, 16]
 for(const v of generator(5)){
 console.log(v);
 }
 ```

코드스피치 강의 ES6+ 3회차 정리

<h2>HashTable</h2>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Hash_table_3_1_1_0_1_0_0_SP.svg/1920px-Hash_table_3_1_1_0_1_0_0_SP.svg.png" alt="주소변환">
<ol>
<li>
Hashing Function(Hashing)
<ul>
<li>서로 다른 입력 데이터를 일정한 크기로 출력하는 방법</li>
<li>매핑 전 원래 데이터의 값을 키(key), 매핑 후 데이터의 값을 해시값(hash value), 매핑하는 과정 자체를 해싱(hashing)라고 합니다.</li>
<li>요청하는 키(key)로 해시값(hash value)을 찾는 함수</li>
<li>해시함수가 서로 다른 두 개의 키에 대해 동일한 해시값을 내는 해시충돌(collision)이 발생하게 됩니다</li>
</ul>
</li>
<li>
HashTable
<ul>
<li>해시함수를 사용하여 키를 해시값으로 매핑하고, 이 해시값을 색인(index) 혹은 주소 삼아 데이터의 값(value)을 키와 함께 저장하는 자료구조</li>
</ul>
</li>
<li>
정리
<ul>
<li>데이터를 담을 테이블을 미리 크게 확보해 놓은 후 입력받은 데이터를 해시하여 테이블 내의 주소를 계산하고</li>
<li>이 주소에 데이터를 담는 것, 이것이 해시 테이블의 기본 개념이다.</li>
<li>자료구조에서 특정 값을 가장 신속하게 찾는 방법</li>
<li>테이블의 크기로 나누는 해싱함수로 인해 소수로 하는 것이 좋다.</li>
</ul>
</li>
</ol>
<h2>Hashing 종류</h2>
<ol>
<li>Division Method
<ul>
<li>입력값을 테이블의 크기로 나눈다
<div class="remark-highlight"><pre class="language-js"><code class="language-js">const division = function(key, tableSize) { 
 return key % tableSize
 }
</code></pre></div>
</li>
</ul>
</li>
<li>Digits Folding
<ul>
<li>입력값을 자릿수마다 더해서 테이블의 크기로 나눈다.</li>
</ul>
<div class="remark-highlight"><pre class="language-js"><code class="language-js">const division = function(key, tableSize) { 
 let hashkey = 0
 for(let i = 0; i &#x3C; key.length; i++) {
 hashkey += key[i]
 }
 return key % tableSize
 }
</code></pre></div>
</li>
<li>loseloseHashcode
<div class="remark-highlight"><pre class="language-js"><code class="language-js">const loseloseHashcode = function(key) {
 let hash = 0;
 for(let i = 0; i &#x3C; key.length; i++){
 hash += key.charCodeAt(i)
 }
 return hash % 37 
 }
</code></pre></div>
</li>
<li>djb2hash
<div class="remark-highlight"><pre class="language-js"><code class="language-js">const digitsFolding = function(key) {
 let hash = 5381 // 임의의 소수, 가장많이 사용되는 소
 for(let i = 0; i &#x3C; key.length; i++) {
 hash = hash * 33 + key[i].charCodeAt(i)
 }
 return hash % 1013; // 1013 = HashTable의 가질수 있는 크기 보다 더 큰 수의 소수
 
 }
</code></pre></div>
</li>
</ol>
<h2>Hash collision 해결방법</h2>
<ol>
<li>체이닝
<ul>
<li>테이블의 인덱스별로 연결 리스트를 생성해 그 안에 원소를 저장하는 방법, 가장 단순한 방법</li>
<li>단점 : hash테이블외에 추가적인 메모리 소요 필요</li>
<li>각 hash키를 링크드리스트로 연결하여 사용한다.</li>
</ul>
</li>
<li>선형탐색법
<ul>
<li>새 원소 추가시 인덱스가 이미 점유된 상태라면 인덱스 + 1씩 증가하여 빈곳에 추가하는 방</li>
</ul>
</li>
</ol>

Jun 개발노트

Hash Table

HashTable

Hashing 종류

Hash collision 해결방법