โŒจ๏ธ conceptualization/Typescript

ํ•จ์ˆ˜์˜ ํƒ€์ž…๋ช…์‹œ

awesomeyelim 2022. 9. 11. 18:37
728x90

๐Ÿ“Œ typescript์—์„œ ํ•จ์ˆ˜๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์ž

1. ํ•จ์ˆ˜์˜ ๋ฐ˜ํ™˜(return) ํƒ€์ž…์„ ์ง€์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•
2. ์„ ํƒ์  ๋งค๊ฐœ๋ณ€์ˆ˜(parameter)๋ฅผ ์ „๋‹ฌํ•˜๋Š” ๋ฐฉ๋ฒ•
3. ๋งค๊ฐœ๋ณ€์ˆ˜์˜ ๋””ํดํŠธ ๊ฐ’์„ ์ฃผ๋Š” ๋ฐฉ๋ฒ•

 

 

1. ํ•จ์ˆ˜์˜ ๋ฐ˜ํ™˜(return) ํƒ€์ž…์„ ์ง€์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•

syntax

function ํ•จ์ˆ˜์ด๋ฆ„(๋งค๊ฐœ๋ณ€์ˆ˜1, ๋งค๊ฐœ๋ณ€์ˆ˜2) : ํ•จ์ˆ˜์˜ ๋ฐ˜ํ™˜ํƒ€์ž… {

}

 

 

 

โ—๏ธ void ํƒ€์ž…

function test(): void {}

๐Ÿ‘‰๐Ÿป ์•„๋ฌด๊ฒƒ๋„ ๋ฐ˜ํ™˜ ํ•˜์ง€ ์•Š๋Š” ํ•จ์ˆ˜์˜ ๋ฐ˜ํ™˜ ๊ฐ’์œผ๋กœ๋งŒ ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ๋Š” ํƒ€์ž…

 

 

 

string ํƒ€์ž…

function test(): string {
  return "a";
}

๐Ÿ‘‰๐Ÿป string ๊ฐ’์œผ๋กœ return

 

 

 

string[] ํƒ€์ž…

function test(): string[] {
  return ["a", "b"];
}

๐Ÿ‘‰๐Ÿป string ๋ฐฐ์—ด ๊ฐ’์œผ๋กœ return

๐Ÿ”‘ number์™€ boolean๋“ฑ ๋‚˜๋จธ์ง€ ํƒ€์ž…์—๋„ ๋™์ผํ•˜๊ฒŒ ์ ์šฉ๋œ๋‹ค.

 

 

2. ์„ ํƒ์  ๋งค๊ฐœ๋ณ€์ˆ˜(parameter)๋ฅผ ์ „๋‹ฌํ•˜๋Š” ๋ฐฉ๋ฒ•

  • ๋‹ค์Œ๊ณผ ๊ฐ™์€ ํ•จ์ˆ˜๊ฐ€ ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•ด๋ณด์ž
function test(a: string, b: string): void {
  console.log(a, b);
}

test("hi", "yelim");

๐Ÿ“Œ ๋งŒ์•ฝ ์—ฌ๊ธฐ์„œ ์ธ์ž(argment)๊ฐ’์„ ํ•˜๋‚˜๋งŒ ์ „๋‹ฌํ•œ๋‹ค๊ณ  ํ•˜๋ฉด error๊ฐ€ ๋ฐœ์ƒํ•  ๊ฒƒ์ด๋‹ค.

 

 

 

 

โ“ ์™œ ๊ทธ๋Ÿฐ๊ฒƒ์ผ๊นŒ ?

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋Š” ํ•จ์ˆ˜์— ์ •์˜๋œ ๋ชจ๋“  ๋งค๊ฐœ๋ณ€์ˆ˜๊ฐ€ ํ•จ์ˆ˜์— ํ•„์š”ํ•˜๋‹ค๊ณ  ๊ฐ€์ •ํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.
-> ํ•จ์ˆ˜ ํ˜ธ์ถœ์‹œ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์ปดํŒŒ์ผ๋Ÿฌ๋Š” parameter ์™€ argument๋ฅผ ๋น„๊ต ๊ฒ€์‚ฌํ•˜๊ฒŒ ๋œ๋‹ค.

 

 

๐Ÿง  ์–ด๋–ป๊ฒŒ ํ•ด๊ฒฐํ• ์ˆ˜ ์žˆ์„๊นŒ?

์ด์ „์— ํƒ€์ž…๋ช…์‹œ์™€ ๊ฐ™์ด ์žˆ์–ด๋„ ๋˜๊ณ  ์—†์–ด๋„ ๋˜๋Š” ๊ฐ’ !
์„ ํƒ์  ๋งค๊ฐœ๋ณ€์ˆ˜(optional parameter)๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ•ด๊ฒฐํ•ด๋ณด์ž
function test(a: string, b?: string): void {
  console.log(a, b);
}

test("hi");

 

 

โ—๏ธ ์—ฌ๊ธฐ์„œ ์ฃผ์˜์‚ฌํ•ญ

๋งŒ์•ฝ ์ „๋‹ฌ๋˜๋Š” ๋งค๊ฐœ๋ณ€์ˆ˜๊ฐ€ ์—ฌ๋Ÿฌ๊ฐœ์ด๊ณ ,
๋ช‡๊ฐ€์ง€๋งŒ ์„ ํƒ์  ๋งค๊ฐœ๋ณ€์ˆ˜์ธ ๊ฒฝ์šฐ ??

 

๐Ÿ‘‰๐Ÿป ์„ ํƒ์  ๋งค๊ฐœ๋ณ€์ˆ˜๋“ค์€ ๋ฐ˜๋“œ์‹œ ! ํ•„์ˆ˜ ๋งค๊ฐœ๋ณ€์ˆ˜ ๋’ค์— ์œ„์น˜ํ•ด์•ผํ•œ๋‹ค !

function test(a: string, b?: string, c?: string, d?: string, e?: string): void {
  console.log(a, b, c, d, e);
}

test("hi");

 

  • ์ปดํŒŒ์ผ ์‹œ์ผœ์„œ console๋กœ ์‚ดํŽด๋ณด๊ฒŒ ๋˜๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ํ• ๋‹น๋˜์ง€ ์•Š์€ argument๊ฐ’์€ parameter๋กœ ์ „๋‹ฌ๋˜์ง€ ์•Š์•„ undefined๋กœ ํ‘œ์‹œ๋œ๋‹ค.
hi undefined

 

 

 

๐Ÿ‘‰๐Ÿป ์ด๋Ÿด๋•Œ ํ• ๋‹น๋œ ๊ธฐ๋ณธ๊ฐ’์„ ์‚ฌ์šฉํ• ์ˆ˜ ์žˆ๋‹ค ? ๋ฐ”๋กœ

3. ๊ธฐ๋ณธ ๋งค๊ฐœ ๋ณ€์ˆ˜(Default Parameter)

function test(a: string, b = 'yelim'): void { 
  console.log(a, b);
}

test("hi");

๐Ÿ“Œ ๊ทธ๋ƒฅ parmeter ๋’ค์— ๊ฐ’์„ ์„ค์ •ํ•ด์ฃผ๋ฉด ๋œ๋‹ค.
๐Ÿ“Œ ๋งค๊ฐœ๋ณ€์ˆ˜๋’ค์— ๊ฐ’์„ ์„ค์ •ํ•ด ์ฃผ๋ฉด๋œ๋‹ค.(์„ ํƒ์ ํ‘œ๊ธฐ(?), ํƒ€์ž… ์ƒ๋žต๊ฐ€๋Šฅ -> ํƒ€์ž…์ถ”๋ก ์œผ๋กœ ์ปค๋ฒ„๊ฐ€๋Šฅ)

๐Ÿ‘‰๐Ÿป ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ฝ”๋“œ์—์„œ ๋ฌด์—‡์ด ์ถœ๋ ฅ๋ ์ง€ ์ƒ๊ฐํ•ด๋ณด์ž !

function test(a = 'hello', b = 'yelim'): void { 
  console.log(a, b);
}

test(); 
test('hi');
test('hi','there');




// 1. ๐Ÿ“Œ hello yelim
// 2. ๐Ÿ“Œ hi yelim
// 3. ๐Ÿ“Œ hi there

 

 

 

(์ฐธ๊ณ ์˜์ƒ) ๋•…์ฝฉ์ฝ”๋”ฉ : https://www.youtube.com/watch?v=SVtqhpboxGw&t=2s

๋Œ“๊ธ€์ˆ˜0