[Typescript/3Day] 함수 (1)

2021/02/19 - [Typescript] - [Typescript/1Day] 실습준비

2021/02/22 - [Typescript] - [Typescript/2Day] Types

---

javascript에서 함수는 일급(first-class) 객체이다. 

 

1. 함수선언방법

// 이름을 붙인 함수
function getName(name: string) {
	return 'hello ' + name
}

// 함수표현식
let getName2 = function (name: string) {
	return 'hello' + name
}

// 화살표 함수 표현식
let getName3 = (name: string) => {
	return 'hello' + name
}

// 단축형 화살표 함수 표현식
let getName4 = (name: string) => 'heelo' + name

// 함수생성자 (특수한 경우가 아니면 사용하지 않는다)
let getName5 = new Function('name', 'return "hello " + name')

매개변수(parameter) : 함수 선언의 일부이며 함수를 실행하는데 필요한 데터 조각  // 정형매게변수(formal parameter) 인수(argument)는 함수를 호출할떄 전달해야 하는 데이터 조각 // 실질매게변수(actual parameter)

2. 선택적 매개변수와 기본 매개변수

// 선택적 매개변수 
// userId는 생략가능
function log(message: string, userId?: string) { ...

// 기본 매게변수 
// 생략시 기본메시지 출력
fucntion log(message: string, userId = 'Not signed in') { ...

// type으로 명시 가능
type Context = {appId?: string, userId?: string}
fucntion log(message: string, context: Context = {}) { ...

// 나머지 매게변수 -----------------------
function log(message: string, ...numbers: number[]) { ...

// 아래와 같이 호출 가능
log('log message', 1,2,3,4)  
log('log message')

3. 함수호출의 다른방법 call, apply, bind

function add(a: number, b: number) {
	return a + b
}

add(10, 20)
add.apply(null, [10,20])
add.call(null, 10, 20)
add.bind(null, 10, 20)()

- apply는 함수 안에서 값을 this로 한정(bind)하며 (여기에서는 this를 null로 한정) 두번쨰 인수를 펼쳐 함수에 매게변수로 전달한다.

- call도 값은 기능을 수행하지만 인수를 펼쳐 전달하지 않고 순서대로 전달한다는 점만 다르다. 

- bind도 this 인수를 함수의 인수 목록으로 한정한다. 다른점은 bind는 함수를 호출하지 않고 새로운 함수를 반환하는데 개발자는 ()나 .call을 이용해 반환된 함수를 호출하거나 .apply로 아직 한정하지 않은 매게변수를 추가로 전달할수 있다. 

 

* TSC플래그 : strictBindCallApply

- 코드에서 .call, .apply, .bind를 안전하게 사용하려면 tsconfig.json에서 strictBindCallApply를 활성화해야 한다 (strict 모드를 이미 활성화했다면 이옵션은 자동으로 활성화 됨)

 

more*****

 

4. this의 타입

// javascript
function fancyDate() {
	return this.getDate()
}

console.log(fancyDate.call(new Date()))
console.log(fancyDate(new Date()) // runtime에서 에러


// typescript 
function fancyDate(this: Date) {
	return this.getDate()
}

console.log(fancyDate.call(new Date()))
console.log(fancyDate(new Date))  // compile 단계에서 에러

* TSC플래그: noImplicitThis :
this 타입을 명시적으로 설정하도록 강제할수 있다. 클래서와 객체의 함수에서 this를 지정하라고 강제하지는 않는다. 

 

5. 제너레이터 함수(generator function)

function 뒤에 *표를 붙여 선언한는것과 yield 키워드로 값을 방출하는것이 핵심이다. 

function* createFibonacci() {
    let a = 0
    let b = 1
    while (true) {
        yield a;
        [a, b] = [b, a + b]
    }
}
let fibonacci = createFibonacci()
console.log(fibonacci.next()) // {value: 0, done: false}
console.log(fibonacci.next()) // {value: 1, done: false}
console.log(fibonacci.next()) // {value: 1, done: false}
console.log(fibonacci.next()) // {value: 2, done: false}

// 반환타입 명
function* createNumber(): IterableIterator<number> {
    let n = 0;
    while (1) {
        yield n++
    }
}
let numbers = createNumber()
console.log(numbers.next()) // {value: 0, done: false}
console.log(numbers.next()) // {value: 1, done: false}
console.log(numbers.next()) // {value: 2, done: false}