Do it! 타입스크립트 프로그래밍 - 함수와 메서드

04 함수와 메서드

04-1 함수 선언문

• 자바스크립트 함수 선언문에서 매개변수와 함수 반환 값(return type)에 타입 주석을 붙이는 형태
• 매개변수와 반환 값에 대한 타입 주석을 생략할 수 있으나 생략되어 있으면 함수의 구현 의도를 알기 어려움
• void 타입
  • 값을 반환하지 않는 함수의 반환 타입
  • void 타입은 함수 반환 타입으로만 사용
• 함수 시그니처(function signature) : 함수의 타입
• type 키워드 : 기존에 존재하는 타입을 단순히 이름만 바꿔서 사용할 수 있음 - 타입 별칭(type alias)
• undefined 타입을 고려하여 코드 작성
  

  01: interface INameable {
  02:   name: string
  03: }
  04: function getName(o: INameable) {
  05:   return o != undefined ? o.name : 'unknown name'
  06: }
  07: 
  08: let n = getName(undefined)
  09: console.log(n)                        // unknown name
  10: console.log(getName({name: 'Jack'}))  // Jack

• 선택적 매개변수(optional parameter) : 함수의 매개변수에도 이름 뒤에 물음표를 붙여 사용

04-2 함수 표현식

• 함수 표현식(function expression)
  • 함수 선언문에서 함수 이름을 제외한 function(a, b) { return a + b }와 같은 코드
  • 함수형 언어의 핵심 기능
• 일등 함수(first-class function)
  • 함수와 변수를 구분(혹은 차별) 하지 않는다는 의미
    • 심벌 f가 변수인지 함수인지 사실상 구분할 수 없음 (변수와 함수를 차별하지 않는다는 의미)

    01: let f = function(a, b) { return a + b }
    02: f = function(a, b) { return a - b }

  • 함수형 프로그래밍 언어(functional programming language) : 일등 함수 기능을 제공하는 프로그래밍 언어
• 표현식(expression)
  • 리터럴(literal), 연산자(operator), 변수, 함수 호출(function call) 등이 복합적으로 구성된 코드 형태
  • 표현식은 항상 컴파일러에 의해 계산법(evaluation)이 적용되어 어떤 값이 됨
    • 조급한 계산법(eager evaluation)과 느긋한(또는 지연) 계산법(lazy evaluation)
• 함수 호출 연산자
  • 함수 호출 : 함수 표현식의 몸통 부분을 실행
  • 어떤 변수가 함수 표현식을 담고 있다면, 변수 이름 뒤에 함수 호출 연산자(function call operator) ( )를 붙여 호출
• 익명 함수
  • 함수 표현식은 대부분 언어에서 언급되는 익명(혹은 무명) 함수(anonymous function)의 다른 표현
• 함수 표현식을 담는 변수는 let보다는 const 키워드로 선언하는 것이 바람직

04-3 화살표 함수와 표현식 문

• ESNext 자바스크립트와 타입스크립트는 function 키워드가 아닌 => 기호로 만드는 화살표 함수도 제공
• 화살표 함수의 몸통은 function 때와는 다르게 중괄호를 사용할 수도 있고 생략할 수도 있음
  • 중괄호 사용 여부에 따라 타입스크립트 문법이 동작하는 방식이 달라짐
    • 실행문(execution statement) 방식
    • 표현식 문(expression statement) 방식
• ESNext와 타입스크립트는 실행문과 표현식 문을 동시에 지원하는 다중 패러다임 언어(multi-paradigm language)
• return 키워드
  • 함수 몸통을 복합 실행문으로 구현한 다음 함수는 true나 false를 반환하지 않음
    

    01: function isGreater(a: number, b: number): boolean {
    02:   a > b  // 결과를 반환하지 않음
    03: }

  • 실행문 기반 언어는 이 문제를 해결하려고 return 키워드를 도입
    • return 키워드는 반드시 함수 몸통에서만 사용할 수 있다는 제약이 있음

    01: function isGreater(a: number, b: number): boolean {
    02:   return a > b  // true나 false라는 결과를 반환
    03: }

• 표현식 문 스타일의 화살표 함수 구현
  • function 스타일 함수 isGreater를 화살표 함수로 구현
    

    01: const isGreater = (a: number, b: number): boolean => {
    02:   return a > b
    03: }

  • ESNext와 타입스크립트는 다음처럼 구현할 수 있음
    • 함수 몸통을 표현식으로 구현
    • 표현식은 값을 반환하는 실행문이므로 return 키워드 또한 생략

  01: const isGreater = (a: number, b: number): boolean => a > b

• 표현식과 표현식 문의 차이
  • 표현식(expression) : 실행문의 일부일 뿐 그 자체가 실행문인 것은 아님 (02행)
  • 표현식 문(expression statement) : 그 자체가 실행문(statement) (03행)
    

    01: let a = 1, b = 0
    02: if(a > b) console.log('a is greater than b')
    03: const isGreater = (a: number, b: number): boolean => a > b

 

 

04-4 일등 함수 살펴보기

• 콜백 함수(callback function) : 매개변수 형태로 동작하는 함수
• 중첩(nested) 함수 : 함수 안에 또 다른 함수를 중첩해서 구현
  

  01: const calc = (value: number, cb: (number) => void): void => {
  02:   let add = (a, b) => a + b
  03:   function multiply(a, b) { return a * b }
  04:
  05:   let result = multiply(add(1, 2), value)
  06:   cb(result)
  07: }
  08: calc(30, (result: number) => console.log(`result is ${result}`))

• 고차 함수(high-order function) : 또 다른 함수를 반환하는 함수
  

  01: const add = (a: number): (number) => number => (b: number): number => a + b
  02: const result = add(1)(2)
  03: console.log(result)

04-5 함수 구현 기법

• 디폴트 매개변수(default parameter) : 매개변수의 기본값
• 색인 가능 타입(indexable type) : {[key]: value} 형태의 타입
  

  01: export type KeyValueType = {
  02:   [key: string]: string
  03: }
  04: export const makeObject = (key: string, value: string): KeyValueType => ({[key]: value})
  05:
  06: console.log(makeObject('name', 'Jack'))
  07: console.log(makeObject('firstName', 'Jane'))

04-6 클래스 메서드

• function 키워드로 만든 함수에 this 키워드를 사용할 수 있으나 화살표 함수에는 this 키워드를 사용할 수 없음
• 이름 앞에 static 수정자(modifier)를 붙여 정적 메서드를 만들 수 있음
• 메서드 체인(method chain) : 객체의 메서드를 이어서 계속 호출하는 방식

출처 : Do it! 타입스크립트 프로그래밍

Do it! 타입스크립트 프로그래밍