함수에 타입 지정하는 법 & void 타입

걱정되니 함수의 기능부터 다시 짚어봅시다

 

함수:

function 내함수(x){
  return x * 2
}
내함수(2);  //이러면 4가 이 자리에 남음
내함수(4);  //이러면 8이 이 자리에 남음

 

 

소괄호 안에 들어가는 x같은 자료들을 파라미터라고 부르고

return 오른쪽에 있는 자료들을 리턴값 이런식으로 부릅니다. 

 

1. 파라미터를 작명해주면 함수를 사용할 때 ( ) 소괄호 안에 아무 자료나 집어넣을 수 있게되고

2. 리턴값은 함수가 사용되고나서 그 자리에 남는 값입니다. 

내함수(2) 이렇게 쓰고나면 진짜 그 자리에 return 우측에 있던 값이 뾰로롱 남습니다. 

 

 

 

 

 

 

 

함수에 타입지정하려면 2곳 가능

 

그래서 함수는 총 두 군데 타입지정이 가능합니다.

1. 함수로 들어오는 자료 (파라미터)

2. 함수에서 나가는 자료 (return)

 

 

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

1. 함수로 들어오는 파라미터 타입지정은 파라미터 옆에 적으면 됩니다.

2. 함수가 실행된 후 남는 값 (return 우측에 있는 값) 타입지정하고 싶으면 함수명() 우측에 적으면 됩니다.

 

함수에 멋있게 타입 실드를 장착했기 때문에

이제 파라미터와 리턴값이 이상해지면 자동으로 혼내줍니다. 

 

- 파라미터에 타입을 지정하면 필수 파라미터가 됩니다. 

 

 

 

 

 

 

 

 

함수는 void 타입이 있음

 

 

함수는 특이하게도 void라는 타입을 사용가능합니다.

'아무것도 없이 공허함'을 뜻하는 타입인데  

return할 자료가 없는 함수의 타입으로 사용가능합니다.

 

 

function 내함수(x :number) :void { 
  return x * 2 //여기서 에러남 
} 

그럼 이제 이 함수에서 뭔가를 return하려고할 때 에러를 냅니다.

함수에 return 방지장치를 주고 싶을 때 void 타입을 활용하시면 되겠습니다. 

 

 

 

 

 

 

 

파라미터가 옵션일 경우

 

함수에 파라미터자리를 만들어놨지만 가끔 파라미터 없이 쓸 때도 있습니다. 

그럴 경우 타입스크립트에선 미리 "이 파라미터는 옵션임" 이렇게 정의를 해주셔야 에러가 나지 않습니다.

 

function 내함수(x? :number) { 

}
내함수(); //가능
내함수(2); //가능

파라미터 우측에 그냥 물음표치면 됩니다. 그럼 앞으로 내함수()를 사용할 때 파라미터없이도 쓸 수 있습니다.

근데 물음표는 실은 x : number | undefined 이거랑 똑같은 의미입니다 (중요)

파라미터가 정의가 안되면 자동으로 undefined가 되니까 그걸 반영한거라고 볼 수도 있겠습니다. 

 

 

 

 

 

 

함수도 예외없이 Union type을 사용하면 

 

엄격근엄진지한 타입스크립트가 딴지를 걸 수 있습니다. 

 

Q. 예를 들어서 함수에 숫자 또는 문자를 집어넣으면 + 1 해주는 함수를 만들어봅시다. 

 

function 자릿수세기(x :number | string){ 
  return x + 1 
} 

그냥 쌩 자바스크립트에서는 문자나 숫자나 모두 +1 이 가능하지만 

타입스크립트에선 변수의 타입이 number | string 이런 union type인 경우 자료 조작을 금지시킵니다. 

아직 이 파라미터의 타입이 확실하지 않으니까 파라미터 조작을 일단 실드로 막고 금지하는 것입니다.

 

 

 

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

이런 코드도 타입스크립트가 엄격하게 금지합니다.

 

number 맞는데 왜저럴까요 빨리 혼자 말해보셈

x라는 파라미터는 옵션이고, 옵션인 파라미터는 number | undefined 이런 식으로 타입정의가 된다고 하지 않았습니까.

그래서 아직 x라는 파라미터가 뭔지 확실하지 않기 때문에 에러를 내줍니다.

[collapse]

 

 

그래서 엄격한 타입스크립트 성격에 맞춰주려면 여러분이 코드를 애초에 엄격하게 짜야합니다.

다음 강의를 들어보도록 합시다. 

 

 

 

 

 

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

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

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

 

어떻게 했나

 

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

 

별거 아니라 설명은 생략합니다 

return이 없어야한다면 return 타입도 void로 설정해보는게 어떨까요. 

 

[collapse]

 

 

 

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

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

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

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

 

글자 자릿수세는 방법은 찾아보셈

 

function 자릿수세기(x :number | string) :number {
  return x.toString().length
} 

 

구글에 물어보니 문자에 .length 붙이면 자릿수 세준다고 하네요. 

근데 숫자는 .length를 붙여줄 수 없으니까 

우선 문자로 변환했다고 합니다.

변환하는 함수도 역시 구글에 물어보니 .toString() 쓰면 된다고 하는군요.

물론 더 정확하게 하려면

만약에 x가 숫자일 경우 이렇게,

문자일 경우 이렇게 하라고 코드짜는게 좋습니다. 

[collapse]

 

 

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

1. 함수의 파라미터로 월소득(만원단위), 집보유여부(true/false), 매력점수 ('상' or '중' or '하') 를 입력할 수 있어야합니다. 

2. 월소득은 만원 당 1점, 집보유시 500점 & 미보유시 0점, 매력점수는 '상'일 때만 100점으로 계산합니다. 

3. 총 점수가 600점 이상일 경우 "결혼가능"을 return 해줘야합니다. 그 외엔 아무것도 return하지 않습니다.

 

(예시)

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

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

 

해보고 눌러봅시다

 

 

function 결혼가능하냐(money :number, house :boolean, charm :string) :string|void{
  let score :number = 0;
  score += money;
  if (house === true){
    score += 500
  }
  if (charm === '상'){
    score += 100
  }
  if (score >= 600){
    return '결혼가능'
  } 
}
console.log(결혼가능하냐(100,true,'상')) 

 

score라는 변수를 만들고

차례로 money에 따라 score를 + 시켰고

house여부에 따라 score를 + 시켰고.. 그랬다고 합니다. 

콘솔창에 출력해보니 집있고 매력있는 사람은 월 소득에 관계없이 항상 결혼이 가능하군요.

 

 

하지만 월 소득을 마이너스로 이상한 숫자를 입력하면 어쩌죠?

그런 것도 막으려면 코드를 어떻게 짜야할까요. 

마지막으로 string이 아니라 '상' '중' '하' 라는 글자만 입력할 수 있게 더욱 엄격한 타입지정도 가능한데

그건 Literal type 시간에 알아봅시다.