본문 바로가기

Front-End: Web/TypeScript

[코딩애플] ts part 1-4. function parameter & return

반응형

함수에 타입 지정하는 법

함수

  1. 길고 복잡한 코드 한 단어로 축약 가능
  2. **숫자 집어넣으면 다른 숫자 나오는 블랙매직박스 역할(input & output)**

함수는 파라미터, return값 타입지정 가능

**변수만 만들면 :any 자동 할당된다**.

function 함수(x :number) :number {
    return x * 2;
}

함수('6'); // 에러 발생
함수(30); // 60
  • x파라미터 자리에 숫자타입만 입력가능
  • return 되는 값은 숫자타입으로 제한함

함수에서 void 타입 활용 가능

void

  • 텅 비었다는 의미. 리턴 없음.
  • 실수로 뭔가 return하는 걸 사전에 막을 수 있다.
function 함수(x :number) :void {
    return 1 + 1; // 에러 발생. return을 썼기 때문.
}

파라미터가 옵션일 경우엔, 파라미터변수? :타입

function 함수(x? :number) :void {
    ...
}
함수();

? 연산자는 들어올 수도 있다~ 라는 뜻이긴 한데,

**변수? :number는 변수 :number | undefined와 같다.**

변수? :number === 변수 :number | undefined

그래서

function 함수(x: number | undefined) :void {
    console.log(x);
}
함수(); // undefined

Quiz

Q. 이 함수는 왜 이럴까요

function 함수(x: number | string) :void {
    console.log(x + 3); // 에러 발생
}
함수(2);

➡️ 연산은 type이 분명한 것만 가능하기 때문이다. x는 지금 number | string 타입이라 불가능하다.

  • string + number (가능)
  • number + number (가능)
  • 이외엔 불가능

애매한 타입들은 미리 타입검사 필요(Narrowing)

function 함수(x: number | string) :void {
    if (x의 타입이 숫자면){ // Narrowing
        console.log(x + 3);
    }
}
함수(2);

숙제

(숙제1)

이름을 파라미터로 입력하면 콘솔창에 "안녕하세요 홍길동"을 출력해주고

아무것도 파라미터로 입력하지 않고 함수를 사용하면 "이름이 없습니다" 를 출력하는 함수를 만들어봅시다.

파라미터와 return 타입지정도 잘 해봅시다.

➡️

function sayHi(name? : string) :void {
    console.log(name ? '안녕하세요' + name : '이름이 없습니다'); 
}

애플코딩풀이

function sayHi(x? : string){
    if(x){
        console.log('안녕하세요' + x);
    } else {
        console.log('왜입력안함');
    }
}

(숙제2) 함수에 숫자 또는 문자를 집어넣으면 자릿수를 세어 출력해주는 함수를 만들어보십시오.

예를 들어 '245' 이런 문자를 입력하면 3이 return 되어야합니다.

숫자도 마찬가지로 9567 이런 숫자를 입력하면 4가 return 되어야합니다.

숫자 또는 문자 이외의 자료가 들어오면 안됩니다.

➡️

function count(txt : string | number) :number {
    return txt.toString().length;
}

(숙제3) 결혼 가능 확률을 알려주는 함수를 만들어봅시다.

  1. 함수의 파라미터로 월소득(만원단위), 집보유여부(true/false), 매력점수 ('상' or '중' or '하') 를 입력할 수 있어야합니다.
  2. 월소득은 만원 당 1점, 집보유시 500점 & 미보유시 0점, 매력점수는 '상'일 때만 100점으로 계산합니다.
  3. 총 점수가 600점 이상일 경우 "결혼가능"을 return 해줘야합니다. 그 외엔 아무것도 return하지 않습니다.

(예시)

**결혼가능하냐(700, false, '중')** 이렇게 사용할 경우 "결혼가능"을 return 해줍니다.

**결혼가능하냐(100, false, '상')** 이렇게 사용할 경우 아무것도 return되지 않습니다.

➡️

function percent(월소득: number, 집보유여부: boolean, 매력점수: string): string{
    let score :number = 월소득;
    score += 집보유여부 ? 500 : 0;
    score += 매력점수 === '상' ? 100 : 0;
    
    if(score >= 600){
        return '결혼 가능'
    }
}
반응형