[TS] 함수와 메서드

📣  함수 선언문

📍 함수 선언문 

➰ 매개변수, 함수 반환값에 타입 주석을 붙이는 형태

➰ 변수 때와는 달리 함수의 매개변수 타입과 반환 타입을 생략하는 것은 좋지 않다!

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

➕ 매개변수와 인자, 인수

✔️ 매개변수(paramater)

➰ 함수 선언문에서 함수 이름 뒤 괄호 안에 선언하는 변수

 

✔️ 인수 or 인자(argument)

➰ 함수를 호출할 때 전달하는 값

 

📍 void 타입

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

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

 

📍 함수 시그니처

➰ 함수의 타입을 함수 시그니처라고 한다.

let printMe: (string, number) => void = function(name: string, age: number): void {}

➰ 위 코드에서 함수 시그니처는 (string, number) => void 이다.

➰ 매개변수가 없으면 단순히 ()로 표현한다.

 

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

➰ type 키워드는 기존에 존재하는 타입으르 단순히 이름만 바꿔서 사용할 수 있게 해준다.

type stringNumberFunc = (string, number) => void
let f: stringNumberFunc = function(a: string, b: number): void {}
// f는 stringNumberFunc 타입이고, 매개변수 a와 b를 받고 아무 값도 반환하지 않는다.

➰ 매개변수의 개수나 타입, 반환 타입이 다른 함수를 선언하는 잘못을 방지할 수 있다.

 

📍 undefined 관련 주의 사항

interface INameable {
    name: string
}
function getName(o: INameable) {return o.name}

let n = getName(undefined)
console.log(n)

➰ getName은 INameable 타입의 매개변수를 요구한다.

➰ undefined는 최하위 타입이므로 INameable을 상속하는 자식 타입으로 간주해서 구문 오류가 발생하지 않는다.

➰ 하지만 o.name이 undefined.name이 되어 오류가 발생한다.

➰ 이를 방지하기 위해서는 매개변수 값이 undefined인지 판별하는 코드를 작성해야 한다.

unterface IAgeable {
    age?: number
}
function getAge(o: IAgeable) {
    return o != undefined && o.age ? o.age : 0
    // age가 선택 속성이므로 없는 경우도 생각해준다.
}

 

📍 선택적 매개변수

➰ 함수의 매개변수에도 이름 뒤에 물음표를 붙이는 선택적 매개변수가 있다.

function fn(arg1: string, arg?: number): void {}

// 선택적 매개변수가 있는 함수의 시그니처
type OptionalArgFunc = (string, number?) => void

---

📣  함수 표현식

📍 함수는 객체다

let add2 = function(a, b) {return a + b}

➰ 위와 같은 함수 선언문에서 함수 이름을 제외한 'function(a, b) {return a + b}' 와 같은 코드를 함수 표현식 이라고 한다.

 

📍 일등 함수

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

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

➰ 변수 f에 함수 표현식을 저장할 수 있다.

➰ f가 변수인지 함수인지 사실상 구분할 수 없다.

 

📍 표현식

➰ 표현식 : 리터럴, 연산자, 변수, 함수 호출 등이 복합적으로 구성된 코드 형태를 의미

➰ 표현식은 항상 컴파일러에 의해 계산법이 적용되어 어떤 값이 된다.

1 + 2 // 표현식
3 // 컴파일러에 의한 값

 

📍 계산법

➰ 컴파일러가 1+2 라는 표현식을 만나면 '조급한 계산법'을 적용해 3이라는 값을 만든다.

➰ function(a, b) {return a + b} 라는 함수 표현식을 만나면 a와 b가 어떤 값인지 알 수 없어서 '느긋한 계산법'을 적용해 계산을 보류한다.

 

📍 함수 호출 연산자

➰ 어떤 변수가 함수 표현식을 담고 있다면, 변수 이름 뒤에 함수 호출 연산자 () 를 붙여서 호출할 수 있다.

➰ 함수 호출 : 함수 표현식의 몸통 부분을 실행한다는 뜻

let functionExpression = function(a, b) {return a + b}
let value = functionExpression(1, 2) // 3

➰ 함수 호출문을 만나면 미뤘던 함수 표현식에 조급한 계산법을 적용해 함수 표현식을 값으로 바꾼다.

 

📍 익명 함수

let value = (function(a, b) {return a + b;})(1, 2)

➰ 함수 호출 연산자는 연산자의 우선순위가 매우 높으므로 함수 표현식 부분을 소괄호로 묶어서 컴파일러가 정상적으로 함수 표현식의 시작과 끝 부분을 알 수 있게 해야한다.

➰ 일반 함수는 재사용성을 위해 사용하는 반면에, 익명함수는 변수에 바로 함수 호출 결과를 넣어줌으로써 익명함수의 사용성은 1회성으로 끝난다.

 

📍 const 키워드와 함수 표현식

➰ 함수 표현식은 let보다는 const 키워드로 선언하는 것이 좋다.

---

📣  화살표 함수와 표현식 문

📍 화살표 함수

// 중괄호를 사용하는 실행문 방식 몸통
const arrow1 = (a: number, b: number): number => {return a + b}

// 중괄호를 생략하는 표현식 문 방식 몸통
const arrow2 = (a: number, b: number): number => a + b

➰ 중괄호 사용 여부에 따라 실행문 방식과 표현식 문 방식으로 나뉜다.

 

📍 실행문과 표현식 문

➰ ESNext와 타입스크립트는 실행문과 표현식 문을 동시에 지원한다 -> 다중 패러다임 언어

➰ 실행문 : CPU에서 실행만 될 뿐 결과를 알려주지 않는다 (리턴문 필요)

➰ 표현식 문: CPU에서 실행된 결과를 굳이 return 키워드를 사용하지 않아도 알려준다 (리턴문 필요X)

// 대표적인 실행문
let x
x = 1

➰ 변수 x에 값 1을 설정하는 작업만으로 충분하다.

 

let x = 10
if(x > 0) x = 1

➰ x > 0 부분은 CPU가 평가한 후 true나 false 라는 값으로 결과를 알려주지 않으면 if문이 정상적으로 동작할 수 없다.

➰ 똑같이 CPU에서 실행되는 구문이더라고 return 키워드 없이 결과값을 반환하는 실행문이 필요하다 => 표현식 문

 

📍 복합 실행문

➰ 복합 실행문 : 중괄호{} 를 사용해서 여러 줄의 실행문을 한 개 처럼 인식하게 하는 것

if(조건식) {
    실행문1
    실행문2
}

 

📍 함수 몸통과 복합 실행문

function f() {
    let x = 1, y = 2
    let result = x + y + 10
}

➰ 함수는 반드시 몸통을 중괄호{} 로 감싸야 하는데, 이것이 바로 복합 실행문이다.

➰ 복합 실행문은 변수의 유효 범위도 지역 범위로 제한하므로, 각 함수의 몸통에서만 유효하다.

 

📍 return 키워드

➰ 실행문 기반 언어는 CPU에서 실행된 결과를 알려주지 않는 문제를 해결하기 위해 return 키워드를 도입했다.

➰ return 키워드는 함수 몸통에서만 사용할 수 있다는 제약이 있다!

function isGreater(a: number, b: number): boolean {
    return a > b	// true나 false를 반환한다.
}

 

📍 표현식 문 스타일의 화살표 함수 구현

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

➰ 함수 몸통이 표현식으로 구현되었고, return 키워드 또한 생략되었다.

➰ return 키워드를 사용하려면 항상 중괄호{} 로 복합 실행문을 만든 다음 그 안에 사용해야 한다.

 

📍 표현식과 표현식 문의 차이

➰ '표현식' 이란 용어는 두 가지 형태로 사용하는데, 이 둘을 구분하고자 '표현식(expression)'과 '표현식 문(expression statement)'으로 구분한 것이다.

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

➰ 2행의 a > b 코드는 표현식으로, 실행문의 일부일 뿐 그 자체가 실행문인 것은 아니다. (표현식)

➰ 3행의 a > b 코드는 그 자체가 실행문(statement)이다. (표현식 문)

 

📍 실행문을 만드는 세미콜론

➰ ESNext 자바스크리븥와 타입스크립트에서는 문장 끝에 세미콜론(;)을 생략할 수 있다.

➰ 하지만 관습적으로, 타입스크립트에서는 표현식 문에는 세미콜론을 붙이지 않는다.

---

📣  일등 함수 살펴보기

📍 콜백 함수

➰ 일등 함수 : 변수에 할당할 수 있고, 다른 함수의 인자로 전달할 수 있으며, 다른 함수의 결과 값으로 반환될 수 있는 함수

➰ 콜백 함수 : 매개 변수 형태로 동작하는 함수

// f는 callback 함수를 인자로 받는 함수, 몸통에서는 callback 함수를 실행한다.
const f = (callback: () => void): void => callback()

 

📍 중첩 함수

➰ 함수형 언어에서, 함수는 변수에 담긴 함수 표현식 이므로 함수 안에 또 다른 함수를 중첩해서 구현할 수 있다.

const calc = (value: number, cb: (number) => void): void => {
    let add = (a, b) => a + b
    functino multiply(a, b) {return a + b}
    ...
}

 

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

➰ 고차 함수 : 또 다른 함수를 반환하는 함수

const add1 = (a: number. b: number): number => a + b // 보통 함수
const add2 = (a: nubmer): (number) => number => (b: number): number => a + b // 고차 함수

 

export type NumberToNumberFunc = (number) => number
export const add = (a: number): NumberToNumberFunc => {
    const _add: NumberToNumberFunc = (b: number): number => {
        return a + b //클로저
    }
    return _add
}

➰ a는 add함수의 매개변수이고, b는 _add 함수의 매개변수라서 _add 함수의 관점에서 보면 a는 외부에 선언된 변수이다.

➰ 이와 같은 형태를 '클로저' 라고 한다.

 

import {NumberToNumberFunc, add) from './add'

let fn: NumberToNumberFunc = add(1)

let result = fn(2)
let result2 = add(1)(2)

➰ fn은 아직 값이 아닌 함수이며, 이를 '부분 애플리케이션' 또는 '부분 적용 함수' 라고 부른다.

➰ fn 같은 임시 변수를 사용하지 않는다면 함수 호출 연산자를 두 개 사용해야만 함수가 아닌 값을 얻을 수 있다.

---

📣  함수 구현 기법

📍 매개변수 기본값 지정하기

➰ 디폴트 매개변수 : 함수 호출 시 인자를 전달하지 않더라도 매개변수에 어떤 값을 설정하고 싶다면 매개변수의 기본값을 지정할 수 있다.

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

 

📍 객체 생성 시 값 부분을 생략할 수 있는 타입스크립트 구문

const makePerson = (name: string, age: number) => {
    const person = {name, age}	// {name: name, age: age}의 단축 표현
}

 

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

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

➰ 컴파일러가 {}를 복합 실행문이 아닌 객체로 해석하게 하려면 객체를 소괄호로 감싸주어야 한다.

 

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

➰ 객체의 속성 이름을 변수로 만들려고 할 때 사용한다.

const makeObject = (key, value) => ({[key]: value})
makeObject('name', 'Jack');
makeObject('firstName', 'Jane')

➰ {[key]: value} 형태를 '색인 가능 타입' 이라고 한다.

type KeyType = {
    [key: string]: string
}

---

📣  클래스 메서드

📍 function 함수와 this 키워드

➰ function 키워드로 만든 함수는 Function이란 클래스의 인스턴스, 즉 함수는 객체이다.

➰ 인스턴스는 this 키워드를 사용할 수 있으나, 화살표 함수에는 this를 사용할 수 없다.

 

📍 메서드란?

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

 

📍 클래스 메서드 구문

➰ 함수 표현식을 담는 속성은 function 키워드를 생략할 수 있게 하는 단축 구문을 제공한다.

export class B {
    constructor(public value: number = 1) {}
    method(): void {	// function 키워드를 생략함.
        console.log(`value: ${this.value}`)
    }
}

 

📍 정적 메서드

➰ 클래스의 속성은 static 수정자를 속성 앞에 붙여서 정적으로 만들 수 있다.

➰ 메서드도 속성이므로 정적 메서드로 만들 수 있다.

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

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

C.whoAreYou() // 클래스이름.정적메서드() 형태로 호출
D.whoAreYou()

 

📍 메서드 체인

➰ 메서드 체인 : 객체의 메서드를 이어서 계속 호출하는 방식의 코드

➰ 타입스크립트로 메서드 체인을 구현하려면 메서드가 항상 this를 반환하게 해야 한다.

export class calculator {
    constructor(public value: number = 0) {}
    add(value: number) {
        this.value += value
        return this
    }
    multiply(value: number) {
        this.value *= value
        return this
    }
}

import {Calculator) from './method-chain'

let calc = new Calculator
let result = calc.add(1).add(2).multiply(4).multiply(4).value
console.log(result) // (0 + 1 + 2) * 3 * 4 = 36