TypeScript-함수

함수는 읽기, 유지 관리 및 재사용 가능한 코드의 구성 요소입니다. 함수는 특정 작업을 수행하는 일련의 명령문입니다. 함수는 프로그램을 논리적 코드 블록으로 구성합니다. 정의되면 코드에 액세스하기 위해 함수를 호출 할 수 있습니다. 이렇게하면 코드를 재사용 할 수 있습니다. 또한 함수를 사용하면 프로그램 코드를 쉽게 읽고 유지할 수 있습니다.

함수 선언은 함수의 이름, 반환 유형 및 매개 변수에 대해 컴파일러에 알려줍니다. 함수 정의는 함수의 실제 본문을 제공합니다.

Sr. 아니요 기능 및 설명
1. 함수 정의

함수 정의는 특정 작업이 수행되는 내용과 방법을 지정합니다.
2. 함수 호출

실행하려면 함수를 호출해야합니다.
삼. 반환 함수

함수는 컨트롤과 함께 값을 호출자에게 반환 할 수도 있습니다.
4. 매개 변수화 된 기능

매개 변수는 함수에 값을 전달하는 메커니즘입니다.

선택적 매개 변수

함수 실행을 위해 인수를 강제로 전달할 필요가없는 경우 선택적 매개 변수를 사용할 수 있습니다. 매개 변수는 이름에 물음표를 추가하여 선택 사항으로 표시 할 수 있습니다. 선택적 매개 변수는 함수의 마지막 인수로 설정해야합니다. 선택적 매개 변수로 함수를 선언하는 구문은 다음과 같습니다.

function function_name (param1[:type], param2[:type], param3[:type])

예 : 선택적 매개 변수

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","[email protected]");

  • 위의 예는 매개 변수화 된 함수를 선언합니다. 여기서 세 번째 매개 변수 인 mail_id는 선택적 매개 변수입니다.

  • 선택적 매개 변수가 함수 호출 중에 값을 전달하지 않으면 매개 변수의 값이 정의되지 않음으로 설정됩니다.

  • 이 함수는 인수에 값이 전달 된 경우에만 mail_id 값을 인쇄합니다.

컴파일시 다음 JavaScript 코드가 생성됩니다.

//Generated by typescript 1.8.10
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", "[email protected]");

위의 코드는 다음 출력을 생성합니다.

ID:123 
Name John 
ID: 111 
Name  mary 
Email Id [email protected]

나머지 매개 변수

나머지 매개 변수는 Java의 변수 인수와 유사합니다. 나머지 매개 변수는 함수에 전달할 수있는 값의 수를 제한하지 않습니다. 그러나 전달 된 값은 모두 동일한 유형이어야합니다. 즉, 나머지 매개 변수는 동일한 유형의 여러 인수에 대한 자리 표시 자 역할을합니다.

나머지 매개 변수를 선언하기 위해 매개 변수 이름 앞에 마침표 세 개가 붙습니다. nonrest 매개 변수는 rest 매개 변수 앞에 와야합니다.

예 : 나머지 매개 변수

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 루프는 함수에 전달 된 인수 목록을 반복하고 합계를 계산합니다.

컴파일시 다음 JavaScript 코드가 생성됩니다.

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 function_name(param1[:type],param2[:type] = default_value) { 
}

Note − 매개 변수는 선택 사항과 기본값으로 동시에 선언 할 수 없습니다.

예 : 기본 매개 변수

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)

컴파일시 다음 JavaScript 코드가 생성됩니다.

//Generated by typescript 1.8.10
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

  • 이 예제에서는 calculate_discount 함수를 선언합니다 . 이 함수에는 가격과 요율이라는 두 가지 매개 변수가 있습니다.

  • 매개 변수 비율 의 값은 기본적 으로 0.50 으로 설정됩니다.

  • 프로그램은 매개 변수 가격의 값만 전달하여 함수를 호출합니다. 여기서 rate 값 은 0.50 (기본값)입니다.

  • 동일한 함수가 호출되지만 두 개의 인수가 있습니다. rate 의 기본값 은 덮어 쓰여지고 명시 적으로 전달 된 값으로 설정됩니다.

익명 기능

식별자 (함수 이름)에 바인딩되지 않은 함수는 다음과 같이 호출됩니다. anonymous functions. 이러한 함수는 런타임에 동적으로 선언됩니다. 익명 함수는 표준 함수처럼 입력을 받고 출력을 반환 할 수 있습니다. 익명 함수는 일반적으로 초기 생성 후에는 액세스 할 수 없습니다.

변수에 익명 함수를 할당 할 수 있습니다. 이러한 식을 함수식이라고합니다.

통사론

var res = function( [arguments] ) { ... }

예 ─ 간단한 익명 함수

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

컴파일 할 때 JavaScript에서 동일한 코드를 생성합니다.

다음과 같은 출력이 생성됩니다.

hello world

예 ─ 매개 변수가있는 익명 함수

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

익명 함수는 전달 된 값의 곱을 반환합니다.

컴파일시 다음 JavaScript 코드가 생성됩니다.

//Generated by typescript 1.8.10
var res = function (a, b) {
   return a * b;
};
console.log(res(12, 2));

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

24

함수 표현과 함수 선언 ─ 그것들은 동의어입니까?

함수 표현식과 함수 선언은 동의어가 아닙니다. 함수 표현식과 달리 함수 선언은 함수 이름으로 바인딩됩니다.

이 둘의 근본적인 차이점은 함수 선언이 실행 전에 구문 분석된다는 것입니다. 반면에, 함수 표현식은 스크립트 엔진이 실행 중에 만나는 경우에만 구문 분석됩니다.

JavaScript 구문 분석기가 기본 코드 흐름에서 함수를 볼 때 함수 선언을 가정합니다. 함수가 명령문의 일부로 제공되면 함수 표현식입니다.

함수 생성자

TypeScript는 Function ()이라는 내장 JavaScript 생성자를 사용하여 함수 정의도 지원합니다.

통사론

var res = new Function( [arguments] ) { ... }.

예

var myFunction = new Function("a", "b", "return a * b"); 
var x = myFunction(4, 3); 
console.log(x);

new Function ()은 생성자에 대한 호출로, 차례로 함수 참조를 생성하고 반환합니다.

컴파일 할 때 JavaScript에서 동일한 코드를 생성합니다.

위 예제 코드의 출력은 다음과 같습니다.

12

재귀 및 TypeScript 함수

재귀는 결과에 도달 할 때까지 자신에 대한 함수 호출을 반복하여 작업을 반복하는 기술입니다. 반복은 루프 내에서 다른 매개 변수를 사용하여 동일한 함수를 반복적으로 호출해야 할 때 가장 잘 적용됩니다.

예 – 재귀

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

컴파일 할 때 JavaScript에서 동일한 코드를 생성합니다.

출력은 다음과 같습니다.

720

예 : 익명 재귀 함수

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

컴파일 할 때 JavaScript에서 동일한 코드를 생성합니다.

출력은 다음과 같습니다.

Hello!!

Lambda 함수

Lambda는 프로그래밍에서 익명 함수를 나타냅니다. Lambda 함수는 익명 함수를 나타내는 간결한 메커니즘입니다. 이러한 함수는Arrow functions.

Lambda 함수-해부학

Lambda 함수에는 세 부분이 있습니다.

  • Parameters − 함수는 선택적으로 매개 변수를 가질 수 있습니다.

  • The fat arrow notation/lambda notation (=>) − go to 연산자라고도합니다.

  • Statements − 함수의 명령어 세트를 나타냅니다.

Tip − 관례 상, 간결하고 정확한 함수 선언을 위해 단일 문자 매개 변수를 사용하는 것이 좋습니다.

람다 식

한 줄의 코드를 가리키는 익명 함수 식입니다. 구문은 다음과 같습니다.

( [param1, parma2,…param n] )=>statement;

예 : Lambda 표현식

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

프로그램은 람다 식 함수를 선언합니다. 이 함수는 10과 전달 된 인수의 합계를 반환합니다.

컴파일시 다음 JavaScript 코드가 생성됩니다.

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

다음은 위 코드의 출력입니다.

110

Lambda 선언문

Lambda 문은 코드 블록을 가리키는 익명 함수 선언입니다. 이 구문은 함수 본문이 여러 줄에 걸쳐있을 때 사용됩니다. 구문은 다음과 같습니다.

( [param1, parma2,…param n] )=> {
 
   //code block
}

예 : Lambda 문

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

함수의 참조가 반환되고 변수에 저장됩니다. foo.

컴파일시 다음 JavaScript 코드가 생성됩니다.

//Generated by typescript 1.8.10
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")

컴파일시 다음 JavaScript 코드가 생성됩니다.

//Generated by typescript 1.8.10
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)

컴파일시 다음 JavaScript 코드가 생성됩니다.

//Generated by typescript 1.8.10
var display = function (x) {
   console.log("The function got " + x);
};
display(12);

출력은 다음과 같습니다.

The function got 12

단일 명령문의 경우 선택적 중괄호, 매개 변수가없는 경우 빈 괄호

다음 예는 이러한 두 가지 구문 변형을 보여줍니다.

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

컴파일시 다음 JavaScript 코드가 생성됩니다.

//Generated by typescript 1.8.10
var disp = function () {
   console.log("Function invoked");
};
disp();

출력은 다음과 같습니다.

Function invoked

함수 과부하

함수에는 제공된 입력에 따라 다르게 작동하는 기능이 있습니다. 즉, 프로그램은 구현이 다른 동일한 이름의 여러 메소드를 가질 수 있습니다. 이 메커니즘을 함수 오버로딩이라고합니다. TypeScript는 함수 오버로딩을 지원합니다.

TypeScript에서 함수를 오버로드하려면 아래 단계를 따라야합니다.

Step 1− 이름은 같지만 함수 서명이 다른 여러 함수를 선언합니다. 함수 서명에는 다음이 포함됩니다.

  • The data type of the parameter

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

  • The number of parameters

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

  • The sequence of parameters

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

Note − 함수 서명에는 함수의 반환 유형이 포함되지 않습니다.

Step 2− 선언 다음에는 함수 정의가 와야합니다. 매개 변수 유형은 다음으로 설정되어야합니다.any매개 변수 유형이 과부하 동안 다른 경우. 또한case b 위에서 설명한대로 함수 정의 중에 하나 이상의 매개 변수를 선택 사항으로 표시하는 것을 고려할 수 있습니다.

Step 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. 또한 두 번째 매개 변수는 여기서 선택 사항입니다.

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

컴파일시 다음 JavaScript 코드가 생성됩니다.

//Generated by typescript 1.8.10
function disp(x, y) {
   console.log(x);
   console.log(y);
}
disp("abc");
disp(1, "xyz");

위의 코드는 다음 출력을 생성합니다.

abc 
1 
xyz
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved