함수 (Function)

TS 도 JS 처럼 익명함수와 이름 있는 함수를 만들 수 있다.

// JS 에서 함수 만드는 법

function 이름있는함수(x, y) {
  return x + y
}

let 익명함수 = function(x, y) { return x + y };

• 변수 캡쳐 : 함수 외부의 변수를 참조 하는 것.

let z = 100;

function addToZ(x, y) {
    return x + y + z;
}

함수 타입

함수의 타이핑

function add(x: number, y: number): number {
    return x + y;
}

let myAdd = function(x: number, y: number): number { return x + y };

• 각 파라미터와 리턴타입을 정할 수 있다.
  • 반환 타입은 생략 가능
    let myAdd: (x: number, y: number) => number = function(x:number, y: number): number { return x + y };
  • 아름을 정해주는 것은 가독성을 위해서이다. (매개변수 타입이 올바르게 나열되어 있다면 이름 붙여도 유효한 타입이 된다.)
    let myAdd: (baseValue: number, increment: number) => number = function (x: number, y: number): number { return x + y }
  • 리턴타입은 => 을 써서 명시할 수 있다.
  • 함수가 리턴을 하지 않는다면 void를 써서 표시한다.
  • 캡쳐된 변수는 타입에 반영 X

타입의 추론

let myAdd = function(x: number, y: number): number { return x + y; };
// 전체 함수 타입을 가짐
let myAdd: (baseValue: number, increment: number) => number = function(x, y) { return x+ y; };
// 매개변수 x, y 는 number 타입을 가진다.

• contextual typing : 방정식의 한쪽에만 타입이 있어도 타입을 알아낼 수 있는 TS 컴파일러의 타입 추론 형태
  • 타입을 유지하기 위한 노력을 줄일 수 있다.

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

• 함수에 주어진 인자의 수는 함수가 갖고있는 매개변수의 수와 일치해야한다.

function buildName (firstName: string, lastName: string) {
    return firstName + ' ' + lastName;
}

let result1 = buildName('bob'); // 오류, 매개변수가 적다.
let result2 = buildName('bob', 'jin', 'min'); // 오류 매개변수가 많다.
let result3 = buildName('bob', 'jin');

• 선택적 매개변수를 원한다면 매개변수 끝에 ? 를 붙인다.
• 어떤 선택적 매개변수던 반드시 매개변수 정의가 필요하다.
  • lasName 대신 firstNmae을 선택적으로 하고 싶으면 순서를 변경하자.

function buildName (firstName: string, lastName?: string) {
    return firstName + ' ' + lastName;
}

let result1 = buildName('bob'); // 지금은 바르게 동작한다.
let result2 = buildName('bob', 'jin', 'min'); // 오류 매개변수가 많다.
let result3 = buildName('bob', 'jin');

• 기본-초기화 매개변수 : 유저가 값을 제공하지 않거나 undefined로 했을 때 할당된 매개변수의 값을 정해 놓는 것. 선택적으로 처리 됨, 함수 호출 할 때 생략 가능. 순서는 상관 없음. 순서가 앞에 올 땐 undefined를 명시적으로 전달 해줘야함.

function buildName(firstName: string, lastName = 'Smith') {
    return firstName + ' ' + lastName;
}
let result1 = buildName('bob') // 'bob Smith'
let result2 = buildName('bob', undefined); // 'bob Smith'
let result3 = buildName('bob', 'admis', 'jin'); // 오류 너무 많은 매개변수 
let result4 = buildName('bob', 'jin'); // 'bob jin'

function buildName2(firstName = 'Will', lastName : string) {
    return firstName + ' ' + lastName;
}
let result5 = buildName2(undefined, 'jin') // 'Will Jin'
let result6 = buildName2('jin') // 오류 너무 적은 매개변수

function buildName (firstName: string, lastName?: string)와 function buildNmae(firstName: string, lastName = 'Smith')는function buildNmae(firstName: string, lastName = 'Smith')라는 공통된 타입을 공유한다.

나머지 매개변수

• 다수의 매개변수를 그룹 지어 작업 할 때, 함수가 최종적으로 얼마나 많은 매개변수를 취할지 모를 때.
• 선택적 매개변수의 수를 무한으로 취급한다.

function buildName(firstName: string, ...restOfName: string[]) {
    return firstName + ' ' + restOfName.join(' ');
}
let employeeName = buildName('Joseph', 'Jin', 'Sam', 'Min', 'Micle')
console.log(employeeName); //Joseph Jin Sam Min Micle

This

• 일반적인 함수 표현식에서의 this와 화살표 함수에서의 this는 다르다.
  ES5에서는 보통 this를 호출한 객체로 바인딩 하지만 ES6 화살표 함수에서는 this가 상위 컨텍스트에서 캡쳐된다. 쉽게 말해서 한 단계 위에서 this를 썼다고 생각하면 된다.

  바인딩 : 바인딩은 어떤 코드에서 함수를 호출할 때 그 해당 함수가 위치한 메모리 주소로 연결해주는 것을 의미

let cat = {
	sound: "meow",
  	soundPlay: function () {
		setTimeout(() => {
			console.log(this.sound);
https://github.com/typescript-kr/typescript-kr.github.io		}, 1000);
    }
}

cat.soundPlay();
// 1초 후에 ... "meow"

• 독립형 함수에서 this를 사용할 수 없음.

function f(this: void) {
// this 사용 불가능
}

오버로드

• 타입스크립트의 '함수 오버로드' 는 이름은 같지만 매개변수 타입과 리턴타입이 다른 여러 함수를 가질 수 있다는 것을 말한다.
  함수 오버로드를 통해 다양한 구조의 함수를 생성하고 관리할 수 있다.
• 오버로드 목록은 컴파일러가 함수 호출들을 해결할 때 사용하는 것이다.
  • 사용자가 전달하는 것에 따라 리턴값이 달라지는 함수가 있다. 사용자가 deck 객체 값을 전달 하면 함수가 카드를 선택한다. 사용자가 카드를 선택하면 선택한 카드를 보여준다. 어떻게 구현하는가?
    • 오버로드 목록으로 동일한 함수에 다중 함수 타입을 제공하면 가능하다.

let suits = ["hearts", "spades", "clubs", "diamonds"];

function pickCard(x: { suit: string; card: number; }[]): number;
function pickCard(x: number): { suit: string; card: number; };
function pickCard(x): any { // 오버로드 목록에 해당 안 됨.
    if (typeof x == 'object') {
        let pickedCard = Math.floor(Math.random() * x.length);
        return pickedCard;
    } else if (typeof x == 'number') {
        let pickedSuit = Math.floor(x / 13);
        return { suit: suits[pickedSuit], card: x % 13 }
    }
}

let myDeck = [{ suit: 'diamonds', card: 2 }, { suit: 'spades', card: 10 }, { suit: 'hearts', card: 4 }];
let pickedCard1 = myDeck[pickCard(myDeck)];
console.log('card ' + pickedCard1.card + ' of ' + pickedCard1.suit);

let pickedCard2 = pickCard(15);
console.log('card ' + pickedCard2.card + ' of ' + pickedCard2.suit);