[타입스크립트] 04장 함수와 메서드

04-1 함수 선언문

자바스크립트에서 함수는 function 키워드로 만든 함수와 => 기호로 만든 화살표 함수 2가지가 있다.

 

타입스크립트 함수 선언문은 매개변수와 함수 반환값(return)에 타입 주석을 붙이는 형태이다.

함수 선언문에서도 매개변수와 반환값에 타입 주석을 생략할 수 있지만, 타입이 생략되어 있으면 함수의 구현 의도를 알기 어렵기 때문에 바람직하지 않다.

 

function addNumber(~~)의 괄호 안의 값을 parameter, 매개변수 라고 하고,

콘솔의 addNumber(~~)의 괄호 안의 값을 argument, 인수, 인자 라고 한다.

 

• function 키워드로 만든 함수

function addNumber(num1: number, num2: number): number {
  return num1 + num2
}

console.log(addNumber(1, 2)) // 3

 

• => 기호로 만든 화살표 함수

const addString = (str1: string, str2: string): string => str1 + str2

console.log(addString('가나다', '라마바')) // 가나다라마바

 

void 타입

void 타입은 값을 반환하지 않는 함수이다.

function printMe(name: string, age: number): void {
  console.log(`name: ${name}, age: ${age}`)
}

printMe('HeeJae', 29) // name: HeeJae, age: 29

 

type 키워드로 타입 별칭 만들기

타입 별칭(type alias)의 type 키워드는 기존에 존재하는 타입을 단순히 이름만 바꿔서 사용할 수 있게 해 준다.

함수를 선언할 때, 타입 별칭을 사용하면 매개변수의 개수, 타입, 반환 타입이 다른 함수를 선언하는 것을 미리 방지할 수 있다.

type stringNumberFunc = (arg1: string, arg2: number) => void

let f: stringNumberFunc = function(a: string, b: number): void {
  console.log(a, b)
}

f('Heejae', 29) // { name: 'Heejae', age: 29 }
f('Heejae') // Expected 2 arguments, but got 1.
f() // Expected 2 arguments, but got 0.

 

type vs interface

타입 별칭과 인터페이스의 가장 큰 차이점은 확장 가능, 불가능의 여부이다.

인터페이스는 확장이 가능하지만, 타입별칭은 확장이 불가능하기 때문에 타입 별칭보다는 인터페이스를 사용하는 것을 추천한다.

 

undefined 관련 주의 사항

타입스크립트에서 undefined은 타입이면서 값이기 때문에 값을 변경할 수가 없다.

초기화를 안 했거나 값이 없을 경우, undefined으로 나오는데 오류를 방지하기 위해서 매개변수 값이 undefined인지 판별하는 코드를 작성해야 한다.

 

필수 속성은 값이 있어야 하기 때문에 undefined를 할당하면 오류가 발생하고,

선택속 성은 값이 없어도 되기 때문에 undefined를 판별하는 코드가 있으면 오류가 발생하지 않는다.

 

FIXME: getName(undefined!)에서 !가 없으면 오류, Argument of type 'undefined' is not assignable to parameter of type 'INameable'.

// 필수속성 undefined
interface INameable {
  name: string
}

function getName(userName: INameable) {
  return userName !== undefined ? userName.name : 'unknown name'
}

console.log(getName(undefined!)) // unknown name
console.log(getName({name: 'Heejae'})) // Heejae

// 선택속성 undefined
interface IAgeable {
  age?: number
}

function getAge(userAge: IAgeable) {
  return userAge !== undefined && userAge.age ? userAge.age : 'unknow age'
}

console.log(getAge(undefined!)) // unknow age
console.log(getAge({age: 29})) // 29

 

선택적 매개변수

인터페이스의 선택 속성처럼 함수의 매개변수에도 물음표(?)를 붙여 선택적 매개변수를 만들 수 있다.

function userList(name: string, age?: number) {
  console.log(`name: ${name}, age: ${age}`)
}

userList('Heejae', 29) // name: Heejae, age: 29
userList('Heejae') // name: Heejae, age: undefined

 

---

04-2 함수 표현식

타입스크립트와 자바스크립트는 객체지향 언어와 함수형 언어의 특징을 모두 가지고 있다.

 

함수 표현식을 선언할 때는 let보다는 const 키워드로 선언하는 것이 바람직하다.

let 변수는 값이 변할 수 있고, const 변수는 값이 절대로 변하지 않기 때문이다. 

 

• 변수 선언문 형태의 함수

const add = new Function('a', 'b', 'return a + b')

console.log(add(1, 2)) // 3

 

• 함수 표현식 형태의 함수

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

console.log(add(1, 2)) // 3

 

표현식: 리터럴, 연산자, 변수, 함수 등 복합적으로 구성된 코드 형태

함수 표현식(=익명함수): 함수 이름을 제외한 함수 코드

함수 호출: 함수 표현식의 몸통 부분을 실행

 

일등 함수

일등 함수란, 변수와 함수를 구분하지 않는다는 의미이다.

위의 코드를 보면 add 라는 변수에 함수를 할당했기 때문에 add가 변수인지 함수인지 사실상 구분할 수 없다.

 

---

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

C언어는 모든 문장이 반드시 세미콜론 ;으로 끝나야 하고, C언어 구문을 참조해 만든 ES5 자바스크립트 또한 모든 문장 끝에 세미콜론이 있어야 한다. 반면에 ESNext 자바스크립트와 타입스크립트에서는 세미콜론을 생략할 수 있다.

 

• 실행문 지향 언어

실생문은 CPU에서 실행되는 코드를 의미한다. 

실행문은 CPU에서 실행만 될 뿐 결과는 알려주지 않기 때문에 return 키워드를 사용해서 실행된 결과를 알려줘야 한다.

 

ex) C언어, ES5, ESNext, 타입스크립트

const add = (a: number, b: number): number => {return a + b}

console.log(add(1, 2)) // 3

 

• 표현식 지향 언어

표현식은 CPU에서 실행된 결과를 return 키워드를 사용하지 않아도 알려준다.

 

ex) 스칼라, ESNext, 타입스크립트

const add = (a: number, b: number): number => a + b

console.log(add(1, 2)) // 3

 

실행문과 표현식을 동시에 지원하는 언어 = 다중 패러다임 언어= ESNext, 타입스크립트

 

복합 실행문과 return

복합 실행문은 중괄호{}를 사용해서 작성하고, 컴파일러는 여러 줄의 실행문을 한 줄의 실행문으로 인식한다.

실행문에서 return을 작성하지 않으면 'void 함수 반환 값이 사용되었습니다' 라는 오류가 발생한다.

return 키워드는 반드시 함수의 몸통에서만 사용할 수 있다.

 

복합 실행문의 유효범위는 local scope(지역 범위)이다.

function f() {
  let x = 1
  return x
}

function g() {
  let x = 2
  return x
}

console.log(f()) // 1
console.log(g()) // 2

 

---

04-4 일등 함수 살펴보기

콜백 함수

콜백 함수는 매개변수 형태로 동작하는 함수이다.

콜백 함수는 프레임워크의 API 구현에 매우 유용하다.

export const init = (callback: () => void): void => {
  console.log('first message')
  callback()
  console.log('second message')
}

init(() => console.log('function message'))

// first message
// function message
// second message

 

중첩 함수

함수형 언어에서 함수는 함수 표현식 안에 또 다른 함수를 작성할 수 있다.

const calc = (num1: number, num2: (result: number) => void): void => {
  let add = (a: number, b: number) => a + b

  function multiply(a: number, b: number) {return a * b}
  let result = multiply(add(1, 2), num1)

  num2(result)
}

calc(30, (result: number) => console.log(`result is ${result}`)) // result is 90

 

고차 함수와 클로저, 그리고 부분 함수

고차 함수는 또 다른 함수를 반환하는 함수이다. 함수형 언어에서 함수 표현식 또한 값이기 때문에 다른 함수를 반환할 수 있다.

고차 함수는 함수 안에 또 다른 함수가 있기 때문에 변수의 스코프가 중요한데, 함수를 return 하고, return 하는 함수가 클로서를 형성한다.

const add = (a: number): (b: number) => number => (b: number): number => a + b
const result = add(10)(20)

console.log(result) // 30

 

---

04-5 함수 구현 기법

매개변수 기본값 지정하기

선택적 매개변수는 항상 그 값이 undefined로 고정된다. 만약 함수 호출 시, 인수를 전달하지 않더라도 매개변수에 어떤 값을 설정하고 싶다면 기본값을 지정할 수 있고, 이를 디폴트 매개변수라고 한다.

export type Person = {name: string, age: number}

export const makePerson = (name: string, age: number = 10): Person => {
    // 단축 구문(shorthand)
    const person = {name, age}
    return person
}

console.log(makePerson('Jack')) // { name: 'Jack', age: 10 }
console.log(makePerson('Jack', 33)) // { name: 'Jack', age: 33 }

 

객체를 반환하는 화살표 함수 만들기

화살표 함수에서 객체를 반환할 때, 아래처럼 중괄호로 구현한다면 객체가 아닌 복합 실행문으로 해석하여 오류가 발생한다.

export type Person = {name: string, age: number}

// Left side of comma operator is unused and has no side effects.
export const makePerson = (name: string, age: number = 10): Person => {name, age}

소괄호로 감싸주어 객체임을 알려준다.

export type Person = {name: string, age: number}

export const makePerson = (name: string, age: number = 10): Person => ({name, age})

console.log(makePerson('Jack')) // { name: 'Jack', age: 10 }
console.log(makePerson('Jack', 33)) // { name: 'Jack', age: 33 }

 

매개변수에 비구조화 할당문 사용하기

비구조화: 구조화된 데이터의 일부만 사용하는 것

객체뿐만 아니라 함수의 매개변수도 비구조화 할당문을 적용할 수 있다.

export type Person = {name: string, age: number}

export const makePerson = ({name, age}: Person): void => {
    console.log(`My name is ${name}. My age is ${age}.`)
}

console.log(makePerson({name: 'Jack', age: 10})) // My name is Jack. My age is 10.

 

색인 키와 값으로 객체 만들기

색인 가능 타입(indexable type)은 {[key]: value} 형태를 의미하고, key와 value의 타입을 명시한다.

객체의 속성 이름을 변수로 만들 때 사용한다. (키 값을 변경할 수 있다.)

export type KeyValeuType = {
    [key: string]: string
}

const makeObject  = (key: string, value: string): KeyValeuType => (
    {[key]: value}
)

console.log(makeObject('key', 'value')) // { key: 'value' }
console.log(makeObject('NAME', 'Jack')) // { NAME: 'Jack' }

 

---

04-6 클래스 메서드

function 함수와 this 키워드

function 키워드로 만든 함수는 this를 사용할 수 있지만,

화살표 함수는 this를 사용할 수 없다.

 

클래스 메서드 구문

타입스크립트에서 메서드는 function으로 만든 함수 표현식을 담고 있는 속성이다.

생성자를 통해 전달된 값이 value에 설정되고, method가 호출돼서 값이 출력된다.

export class B {
    constructor(public value: number = 1) {}
    method(): void {
        console.log(`value: ${this.value}`)
    }
}

let a: B = new B()
a.method() // value: 1

let b: B = new B(2)
b.method() // value: 2

 

정적 메서드

메서드 이름 앞에 static을 붙여 정적 메서드를 만들 수 있다.

export class C {
    static whoAreYou(): string {
        return 'I am class C'
    }
}

export class D {
    static whoAreYou(): string {
        return 'I am class D'
    }
}

console.log(C.whoAreYou()) // I am class C
console.log(D.whoAreYou()) // I am class D

 

메서드 체인

메서드 체인(method chain)은 객체의 메서드를 이어서 계속 호출하는 방식의 코드를 의미하고, 타입스크립트로 메서드 체인을 구현하려면 메서드가 항상 this를 반환해야 한다.

export class Caculator {
    constructor(public value: number = 0) {}

    add(value: number) {
        this.value += value
        return this
    }

    multiply(value: number) {
        this.value *= value
        return this
    }
}

let calc = new Caculator
let result = calc.add(1).add(2).multiply(3).multiply(4).value

console.log(result) // (((0 + 1 + 2) * 3) * 4) = 36

 

 

 

참고자료

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