본문 바로가기
JS/TypeScript

타입스크립트 함수

원펀만 2018. 12. 15. 21:04

함수는 읽기 쉽고, 유지 보수가 가능하고 재사용이 가능한 코드의 빌딩 블록이다. 함수는 특정 임무를 수행하기 위한 문장들의 집합이다. 함수는 프로그램을 논리적인 코드 블록으로 구성한다. 한번 정의되면, 함수는 코드에 접근하기 위해 호출될 수 있다. 이건 코드를 재사용할 수 있게 해준다. 게다가 함수는 프로그램의 코드의 읽기와 유지를 쉽게 해준다.


함수 선언은 컴파일러에게 함수의 이름, 반환형, 인자를 말한다. 함수 정의는 그 함수의 실제 본문을 제공한다.

Sr.NoFuntions & Description
1.Defining a Function

A function definition specifies what and how a specific task would be done.

2.Calling a Function

A function must be called so as to execute it.

3.Returning Functions

Functions may also return value along with control, back to the caller.

4.Parameterized Function

Parameters are a mechanism to pass values to functions.

선택적 인자

선택적 인자는 인수가 함수의 실행을 위해 강제적으로 필요하지 않을 때 사용될 수 있다. 인자는 이름에 물음표를 추가함으로써 선택적으로 표시될 수 있다. 선택적 인자는 함수의 마지막 인수로 설정되어야 한다. 

function disp_details(id:number,name:string,mail_id?:string) { 
   console.log("ID:", id); 
   console.log("Name",name); 
   
   if(mail_id!=undefined)  
   console.log("Email Id",mail_id); 
}
disp_details(123,"John");
disp_details(111,"mary","mary@xyz.com");

위 예제는 매개변수가 있는 함수를 선언하는 것이다. 세번째 인자, mail_id는 선택적인 인자다.

함수가 호출되는 동안 선택적 인자에 값이 전달되지 않으면, 인자의 값은 undefined로 설정된다.

함수는 오직 인수에 값이 전달될 때 함수는 mail_id의 값을 출력한다.


컴파일된 자바스크립트 코드

function disp_details(id, name, mail_id) {
   console.log("ID:", id);
   console.log("Name", name);
	
   if (mail_id != undefined)
      console.log("Email Id", mail_id);
}
disp_details(123, "John");
disp_details(111, "mary", "mary@xyz.com");


위 코드는 다음 출력을 만들어 낸다.

ID:123 
Name John 
ID: 111 
Name  mary 
Email Id mary@xyz.com


나머지 인자

나머지 인자는 자바의 변수 인수들과 비슷하다. 나머지 인자는 함수에 전달할 수 있는 값의 수를 제한하지 않는다. 그러나 전달되는 값들은 모두 같은 타입이어야 한다. 같은 타입의 여러 인수를 위한 자리 표시자의 역할을 한다.


나머지 인자를 선언하기 위해, 인자 이름은 앞에 ...이 붙는다. 모든 나머지 인자가 아닌 것은 나머지 인자가 오기 전에 와야 한다.

function addNumbers(...nums:number[]) {  
   var i;   
   var sum:number = 0; 
   
   for(i = 0;i<nums.length;i++) { 
      sum = sum + nums[i]; 
   } 
   console.log("sum of the numbers",sum) 
} 
addNumbers(1,2,3) 
addNumbers(10,10,10,10,10)

addNumbers() 함수의 선언은 나머지 인자인 nums를 허락한다. 나머지 인자의 자료형은 반드시 배열로 설정되어야 한다. 게다가, 함수에는 최대 하나의 나머지 매개 변수가 있을 수 있다. 

함수는 각각 3, 6개의 값이 전달되면서 두 번 호출된다.

for 루프는 함수에 전달된 인수 리스트를 반복하며, 그들의 합계를 계산한다.


컴파일 하면 다음과 같은 자바스크립트 코드가 생성된다.

function addNumbers() {
   var nums = [];
   for (var _i = 0; _i < arguments.length; _i++) {
      nums[_i - 0] = arguments[_i];
   }
	var i;
   var sum = 0;
	
   for (i = 0; i < nums.length; i++) {
      sum = sum + nums[i];
   }
   console.log("sum of the numbers", sum);
}
addNumbers(1, 2, 3);
addNumbers(10, 10, 10, 10, 10);

위 코드의 출력은 다음과 같다.

sum of numbers 6 
sum of numbers 50


기본 인자

함수 인자는 기본 값이 할당될 수 있다. 그러나 이러한 인자도 명시적으로 값이 전달될 수 있다.

function calculate_discount(price:number,rate:number = 0.50) { 
   var discount = price * rate; 
   console.log("Discount Amount: ",discount); 
} 
calculate_discount(1000) 
calculate_discount(1000,0.30)

컴파일된 후의 자바스크립트 코드

function calculate_discount(price, rate) {
   if (rate === void 0) { rate = 0.50; }
   var discount = price * rate;
   console.log("Discount Amount: ", discount);
}
calculate_discount(1000);
calculate_discount(1000, 0.30);

출력

Discount amount : 500 
Discount amount : 300


함수를 선언하는 위 예에서 함수는 price와 rate라는 두 인자를 가진다.

rate 인자 값은 기본적으로 0.50으로 설정된다.

프로그램이 함수를 호출하고, price 인자의 값만 전달된다. 여기서 rate의 기본 값은 0.50이다.

같은 함수를 호출하지만 인수는 2개다. rate의 기본 값은 덮어 씌워지고 명시적으로 전달된 값으로 설정된다.


익명 함수

식별자(함수 이름)으로 바인딩되지 않은 함수는 익명 함수라고 불린다. 이러한 함수들은 실행 시간에 동적으로 선언된다. 익명 함수는 입력과 출력 반환을 허용한다. 익명 함수는 이것의 초기 생성 이후에는 접근이 불가능하다.


변수는 익명 함수에 할당될 수 있다. 이러한 표현식을 함수 표현식이라고 한다.

var msg = function() { 
   return "hello world";  
} 
console.log(msg())
hello world


인자가 있는 익명 함수

var res = function(a:number,b:number) { 
   return a*b;  
}; 
console.log(res(12,2))

익명 함수는 전달된 값의 결과를 반환한다.


컴파일된 자바스크립트 코드

var res = function (a, b) {
   return a * b;
};
console.log(res(12, 2));
24


함수 표현식과 함수 선언은 동의어인가?

아니다. 함수 표현식과는 다르게 함수 선언은 함수 이름으로 바인딩된다.


둘 사이의 기본적인 차이는 함수 선언은 실행 전에 파싱된다는 것이다. 반면에 함수 표현식은 실행 중에 스크립트 엔진이 함수 표현식을 마주했을 경우에만 해석된다.


자바스크립트 파서가 메인 코드 흐름상에서 함수를 만났을 때, 함수 선언이라고 가정한다. 함수가 문장의 한 부분이면 함수 표현식이다.


재귀와 타입스크립트 함수

재귀는 결과에 도달할 때까지 자기자신의 함수 호출이 반복되면서 명령을 반복하는 기술이다. 재귀는 루프 내에서 다른 인자들로 같은 함수를 반복적으로 호출할 때 가장 좋다.

function factorial(number) {
   if (number <= 0) {         // termination case
      return 1; 
   } else {     
      return (number * factorial(number - 1));     // function invokes itself
   } 
}; 
console.log(factorial(6));      // outputs 720 
720


익명 재귀 함수 예

(function () { 
   var x = "Hello!!";   
   console.log(x)     
})()      // the function invokes itself using a pair of parentheses ()
Hello!!


람다 함수

람다는 프로그래밍에서 익명 함수를 참조한다. 람다 함수는 익명 함수를 나타내기 위한 간결한 메커니즘이다. 이런 함수들은 arrow function이라고 불린다.


람다 함수에는 3부분이 있다.

인자 : 함수는 선택적으로 인자를 가진다.

화살표 표기/람다 표기 : 이동 연산자라고도 불린다.

문장 : 함수의 명령 집합을 나타낸다.


컨벤션에 따르면 단일 문자 인자 사용이 간결하고 정밀한 함수 선언을 위해 장려된다.


람다 표현식

var foo = (x:number)=>10 + x 
console.log(foo(100))      //outputs 110

컴파일된 자바스크립트 코드

var foo = function (x) { return 10 + x; };
console.log(foo(100));      //outputs 110

위 코드의 출력

110

람다 선언문

람다 선언문은 코드 블록을 가리키는 익명의 함수 선언문이다. 이 문법은 함수 바디가 여러 줄로 확장될 때 쓰인다. 

var foo = (x:number)=> {    
   x = 10 + x 
   console.log(x)  
} 
foo(100)

함수의 참조는 반환되고 변수 foo에 저장된다.


컴파일된 자바스크립트 코드

var foo = function (x) {
   x = 10 + x;
   console.log(x);
};
foo(100);
110

구분 변형

인자 타입 추측

인자의 자료형을 명시하는 건 의무가 아니다. 이런 경우에 인자의 자료형은 any다. 

var func = (x)=> { 
   if(typeof x=="number") { 
      console.log(x+" is numeric") 
   } else if(typeof x=="string") { 
      console.log(x+" is a string") 
   }  
} 
func(12) 
func("Tom")

컴파일된 자바스크립트 코드

var func = function (x) {
   if (typeof x == "number") {
      console.log(x + " is numeric");
   } else if (typeof x == "string") {
      console.log(x + " is a string");
   }
};
func(12);
func("Tom");
12 is numeric 
Tom is a string


단일 인자를 위한 선택적인 괄호

var display = x=> { 
   console.log("The function got "+x) 
} 
display(12)
var display = function (x) {
   console.log("The function got " + x);
};
display(12);
The function got 12

단일 문장을 위한 선택적 괄호, 없는 인자를 위한 빈 괄호

var disp =()=> { 
   console.log("Function invoked"); 
} 
disp();
var disp = function () {
   console.log("Function invoked");
};
disp();
Function invoked

함수 오버로딩

함수는 제공되는 입력을 기반으로 다르게 작동할 수 있다. 다른 말로, 프로그램은 같은 이름의 다른 구현을 하는 여러 메서드를 가질 수 있다. 이러한 메커니즘을 함수 오버로딩이라고 한다.


타입스크립트에서 함수 오버로딩을 하기 위해 다음 단계를 따라야 한다.

1. 같은 이름의 여러 함수를 선언하되, 함수 시그니처가 달라야 한다. 함수 시그니처는 다음을 포함한다.


인자의 자료형

function disp(string):void; 
function disp(number):void;

인자의 수

function disp(n1:number):void; 
function disp(x:number,y:number):void;

인자의 순서

function disp(n1:number,s1:string):void; 
function disp(s:string,n:number):void;


함수 시그니처는 함수의 반환형을 포함하지 않는다.


2. 선언 다음에 함수 정의가 와야 한다. 오버로드 중에 인자 타입이 다르다면 인자 타입은 any로 설정되어야 한다.


3. 함수를 호출한다.


function disp(s1:string):void; 
function disp(n1:number,s1:string):void; 

function disp(x:any,y?:any):void { 
   console.log(x); 
   console.log(y); 
} 
disp("abc") 
disp(1,"xyz");

첫 두 줄은 함수 오버로드 선언을 묘사한다. 함수는 두 가지 오버로드가 있다.

단일 문자열 인자를 허용하는 함수, 숫자와 문자열 타입을 각각 허용하는 함수

세번째 줄. 인자의 자료형은 any로 설정된다. 게다가, 두번째 인자는 선택적이다.

오버로드된 함수는 마지막 두 문장에 의해 호출된다.


컴파일된 자바스크립트 코드

function disp(x, y) {
   console.log(x);
   console.log(y);
}
disp("abc");
disp(1, "xyz");


abc 
1 
xyz


https://www.tutorialspoint.com/typescript/typescript_functions.htm

저작자표시

'JS > TypeScript' 카테고리의 다른 글

타입스크립트 튜토리얼 String  (0) 2018.12.21
타입스크립트 튜토리얼 Number  (0) 2018.12.21
타입스크립트 튜토리얼 루프  (0) 2018.12.15
타입스크립트 튜토리얼 연산자  (0) 2018.12.15
타입스크립트 튜토리얼 변수  (0) 2018.12.13

'JS/TypeScript' Related Articles

티스토리툴바