함수에서 undefined 타입 처리, 콜백 함수, 중첩 함수에 대해 다룰 것이다.
먼저 undefined는 모든 타입의 최하위 타입이다. 다음은 undefined를 고려하지 않은 함수이다.
1
2
3
4
5
6
|
function getSomething(value:string):string{
return value
}
let something = getSomething(undefined)
console.log(something) //undefined
|
이렇게 함수를 선언하게 되면 value가 undefined로 변하게 되어 'Cannot read property 'value' of undefined'라는 오류가 발생하게 된다. 오류를 발생하게 하지 않으려면 undefined에 대해 고려를 해주어야 한다. 다음은 undefined를 고려한 함수이다.
1
2
3
4
5
6
7
8
|
function getSomething(value:string):string{
return value != undefined ? value : 'Unknown Value'
}
let something = getSomething(undefined)
console.log(something) //Unknown Value
let sayHello = getSomething('Hello')
console.log(sayHello) //Hello
|
위의 코드는 삼항 연산자를 통해서 value가 undefined일때는 Unknown Value가 전달되고 undefined가 아닐 때는 value값이 전달되게 해 준 것이다.
다음은 콜백함수이다. 콜백 함수는 함수 표현식을 매개변수로 넘겨주는 것을 의미한다. 간단하게 함수를 매개변수로서 사용을 해주는 것이다.
다음은 콜백 함수의 예시이다.
1
2
3
4
5
6
7
8
9
|
const init = (callback: () => void):void => {
console.log('콜백 함수 실행 전')
//<Button title='실행' onPress={() => (init(()=> console.log('콜백함수 실행 중')))} />
callback()
console.log('콜백 함수 실행 후')
}
//콜백 함수 실행 전
//콜백함수 실행 중
//콜백 함수 실행 후
|
init의 매개변수로 callback함수를 넘겨주었다. 3행은 기본 화면의 버튼에 onPress 부분에 init 함수에 console.log 이하 부분을 매개변수로 넘겨준 것이다. 그러고 나서 앱을 실행시켜준 후에 버튼을 누르면 7,8,9행이 실행되게 된다. 함수를 매개변수로서 넘겨줄 수 있는 것이다.
다음은 중첨 함수이다.
1
2
3
4
5
6
7
8
9
10
11
12
13
|
const getNumber = (value1: number, answer: (value2:number) => void): void => {
let add = (num1:number, num2:number) => num1 + num2
function devide(num1:number, num2:number){
return num1/num2
}
let result = devide(add(3,4), value1)
answer(result)
}
getNumber(20, (result:number) => console.log(`결과는 ${result}`))
//결과는 0.35
|
다음은 getNumber 함수 안에 add와 devide 함수를 구현한 것이다. 이처럼 타입 스크립트에서는 함수 안에 또 다른 기능의 함수를 추가하여 중첩 함수를 구현할 수 있다.
이렇게 오늘은 심화 함수에 대해서 알아보았다. undefined에 대한 예외 처리와 콜백 함수는 실제 프로그래밍을 할 때에도 많이 필요할 것 같다.
'Project > 근육고양이' 카테고리의 다른 글
[근육고양이] TypeScript 함수 (0) | 2020.04.27 |
---|---|
[근육고양이] TypeScript 클래스 (0) | 2020.04.26 |
[근육고양이] TypeScript 객체와 인터페이스 (0) | 2020.04.25 |
[근육고양이] TypeScript 변수와 타입 (0) | 2020.04.24 |
[근육고양이] 기획 (0) | 2020.04.23 |