๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

Frontend Dev/๐Ÿฅ ์ฝ”๋“œ์Šคํ…Œ์ด์ธ  FE ๋ถ€ํŠธ์บ ํ”„

Section1 Unit5 JavaScript ๊ธฐ์ดˆ - ํ•จ์ˆ˜

๋ฐ˜์‘ํ˜•


Section1 Unit5 [JavaScript] ๊ธฐ์ดˆ - ํ•จ์ˆ˜

 

๐Ÿ“Œ Chapter6. ํ•จ์ˆ˜

 ํ•จ์ˆ˜ ์ฑ•ํ„ฐ์—์„œ๋Š” ํ•จ์ˆ˜์˜ ์ •์˜์™€ ํ˜ธ์ถœํ•˜๋Š” ๋ฐฉ๋ฒ•, ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ๊ณผ ํ•จ์ˆ˜ ํ‘œํ˜„์‹, ๋งค๊ฐœ๋ณ€์ˆ˜์™€ ์ „๋‹ฌ์ธ์ž, ๊ทธ๋ฆฌ๊ณ  return ๋ฌธ์— ๋Œ€ํ•ด์„œ ํ•™์Šตํ–ˆ๋‹ค. 

 ํ•จ์ˆ˜๊ฐ€ ๋ฌด์—‡์ธ์ง€์™€ ํ•จ์ˆ˜๋ฅผ ์ •์˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์ธ ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ๊ณผ ํ•จ์ˆ˜ ํ‘œํ˜„์‹, ๊ทธ๋ฆฌ๊ณ  ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•œ ๊ณณ์— ๋ฐ˜ํ™˜์‹œ์ผœ ์‹คํ–‰๋œ ๊ฒฐ๊ณผ๋ฅผ ์ „๋‹ฌ์‹œํ‚ค๋Š” ๋ฐ˜ํ™˜๋ฌธ์€ ๋”ฐ๋กœ ์ •๋ฆฌ๋ฅผ ํ•ด๋ณด์•˜๋‹ค. 

 

JavaScript์—์„œ ํ•จ์ˆ˜(function)๋ž€ ๋ฌด์—‡์ผ๊นŒ?

๐Ÿ‘พ ํ•จ์ˆ˜(function)๋ž€? ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ํ•จ์ˆ˜๋Š” ํ•˜๋‚˜์˜ ๊ธฐ๋Šฅ์„ ์ˆ˜ํ–‰ํ•˜๋Š” ์ฝ”๋“œ ๋ธ”๋ก์ด๋ฉฐ, ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๋ฐ ์ค‘์š”ํ•œ ์—ญํ• ์„ ํ•œ๋‹ค. ํ•จ์ˆ˜๋Š” ์ธ์ž๋ฅผ ๋ฐ›์•„๋“ค์ด๊ณ  ์‹คํ–‰ํ•  ์ฝ”๋“œ ๋ธ”๋ก ๋‚ด์—

fay-story.com

 

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฐ˜ํ™˜(return)๋ฌธ ์‚ฌ์šฉํ•˜๊ธฐ

๐Ÿ‘พ ๋ฐ˜ํ™˜(ruturn)๋ฌธ์ด๋ž€? ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ๋Š” ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ–ˆ์„ ๋•Œ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•œ ๊ณณ์— ํŠน์ • ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•˜๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ, ์ด ํŠน์ • ๊ฐ’์„ ๋ฐ˜ํ™˜ ๊ฐ’(return value)์ด๋ผ๊ณ  ํ•œ๋‹ค. ๋ฐ˜ํ™˜๊ฐ’์„ ํ†ตํ•ด ํ•จ์ˆ˜์—์„œ ์‹ค

fay-story.com

 

 ์ด์ „์—๋Š” ๊ณต๋ถ€๋ฅผ ํ•˜๋ฉด์„œ ํ•จ์ˆ˜๋ฅผ ์ •์˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ ๋งŽ์ด ํ—ท๊ฐˆ๋ ธ์—ˆ๋Š”๋ฐ (์ž๋ฃŒ๋Š” ๋„ˆ๋ฌด ๋งŽ์€๋ฐ ์šฉ์–ด๊ฐ€ ๋‹ค ๋‹ค๋ฅด๋‹ˆ ์–ด๋–ป๊ฒŒ ๋ถ„๋ฅ˜๋ฅผ ํ•ด์•ผํ• ์ง€ ์ •ํ™•ํžˆ ๋ชจ๋ฅด๊ณ  ์žˆ์—ˆ๋‹ค.) ์ด๋ฒˆ์— ํ•จ์ˆ˜ ์ •์˜ ๋ฐฉ์‹์„ ๋‹ค์‹œ ์ •๋ฆฌํ•˜๋ฉด์„œ ํ™•์‹คํ•˜๊ฒŒ ๊ฐœ๋…์„ ์•Œ ์ˆ˜ ์žˆ์–ด์„œ ๋„ˆ๋ฌด ์˜๋ฏธ์žˆ๋Š” ์‹œ๊ฐ„์ด์—ˆ๋‹ค. 

 ์ด์ „์—๋Š” ํ•จ์ˆ˜ ํ‘œํ˜„์‹๊ณผ ์ต๋ช…ํ•จ์ˆ˜์˜ ๊ฐœ๋…์„ ํ˜ผ๋™ํ•ด์„œ "ํ•จ์ˆ˜ ํ‘œํ˜„์‹ === ์ต๋ช…ํ•จ์ˆ˜" ๋ผ๊ณ  ์ƒ๊ฐํ–ˆ์—ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋‘˜์€ ๊ฐ™์€ ๊ฐœ๋…์ด ์•„๋‹ˆ๋‹ค. ํ•จ์ˆ˜ ํ‘œํ˜„์‹์€ ํ•จ์ˆ˜๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ๋ณ€์ˆ˜์— ํ• ๋‹นํ•˜๋Š” ๋ฐฉ๋ฒ• ์ค‘ ํ•˜๋‚˜์ด๊ณ , ์ด ๋•Œ ํ•จ์ˆ˜ ์ด๋ฆ„์„ ์ƒ๋žต ํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ ์ด๋ฅผ ์ต๋ช… ํ•จ์ˆ˜๋ผ๊ณ  ํ•˜๋Š” ๊ฒƒ์ด๋‹ค. ํ•จ์ˆ˜ ํ‘œํ˜„์‹๊ณผ ์ต๋ช… ํ•จ์ˆ˜๋Š” ์„œ๋กœ ๋‹ค๋ฅธ ๊ฐœ๋…์ด๋ฉฐ, ํ•จ์ˆ˜ ํ‘œํ˜„์‹์—์„œ๋Š” ์ด๋ฆ„์ด ์žˆ๋Š” ํ•จ์ˆ˜์™€ ์ต๋ช… ํ•จ์ˆ˜ ๋ชจ๋‘๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

 ์‚ฌ์‹ค ์ •ํ™•ํ•œ ์šฉ์–ด๊ฐ€ ๋ฌด์—‡์ธ์ง€ ์ค‘์š”ํ•˜๋‹ค๊ธฐ ๋ณด๋‹ค๋Š” ์•ž์œผ๋กœ ๊ณต๋ถ€๋ฅผ ํ•˜๋ฉด์„œ ์ ‘ํ•˜๊ฒŒ ๋  ์šฉ์–ด๋“ค์„ ํ˜ผ๋™ํ•˜์ง€ ์•Š๊ธฐ ์œ„ํ•ด์„œ ์ •ํ™•ํ•œ ๊ฐœ๋…์„ ์•Œ๊ณ  ๋„˜์–ด๊ฐ€๋Š”๊ฒŒ ์ค‘์š”ํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๋‹ค.

 ์ข€ ๋” ๋””ํ…Œ์ผํ•œ ๋ถ€๋ถ„์€ ์•„๋ž˜ ๊ธ€์„ ์ฐธ๊ณ ํ•˜๋ฉด ๋  ๊ฒƒ ๊ฐ™๋‹ค ๐Ÿ˜Š

 

ํ•จ์ˆ˜ ์ •์˜ ๋ฐฉ์‹ : ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ(function declaration)๊ณผ ํ•จ์ˆ˜ ํ‘œํ˜„์‹(function expression)

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ํ•จ์ˆ˜๋ฅผ ์ •์˜ํ•˜๋Š” ๋ฐฉ์‹์€ ํฌ๊ฒŒ ํ•จ์ˆ˜์„ ์–ธ๋ฌธ(function declaration)๊ณผ ํ•จ์ˆ˜ ํ‘œํ˜„์‹(function expression)์œผ๋กœ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ๋‹ค. โœ๏ธ ์ „์ฒด ๊ธ€์„ ๊ณต๋ถ€ํ•˜๊ธฐ์— ์•ž์„œ ์š”์•ฝํ•˜์ž๋ฉด, ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ(function

fay-story.com

 

 ๋‚ด๊ฐ€ ํ•จ์ˆ˜ ํ‘œํ˜„์‹๊ณผ ์ต๋ช…ํ•จ์ˆ˜์˜ ์šฉ์–ด๊ฐ€ ํ—ท๊ฐˆ๋ ธ๋˜ ๊ฒƒ์ฒ˜๋Ÿผ, ์ฝ”๋“œ์Šคํ…Œ์ด์ธ  ํ”„๋ก ํŠธ์—”๋“œ ๋ถ€ํŠธ์บ ํ”„ ๊ณผ์ •์—์„œ๋Š” parameter๋Š” ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ, argument๋Š” ์ „๋‹ฌ์ธ์ž๋กœ ์šฉ์–ด๋„ ํ†ต์ผํ•˜๊ธฐ๋กœ ํ–ˆ๋‹ค. (์ „๋‹ฌ์ธ์ž๋„ ์ธ์ˆ˜, ์ธ์ž ๋“ฑ์œผ๋กœ ํ˜ผ์šฉํ•ด์„œ ์‚ฌ์šฉ๋˜๋Š” ๊ฒƒ ๊ฐ™์•˜๋‹ค.)

 ๋งค๊ฐœ๋ณ€์ˆ˜์™€ ์ „๋‹ฌ์ธ์ž๋„ ๋‹ค์Œ์— ๋ธ”๋กœ๊ทธ์— ํ•œ ๋ฒˆ ์ •๋ฆฌํ•ด๋ด์•ผ๊ฒ ๋‹ค.

 


๐ŸŒ™  ์˜ค๋Š˜์˜ ํšŒ๊ณ 

 ์˜ค๋Š˜์˜ TIL์—๋Š” ํ•จ์ˆ˜๋ฅผ ์ •๋ฆฌํ•˜๊ธด ํ–ˆ์ง€๋งŒ ํ•จ์ˆ˜๋ฅผ ๊ณต๋ถ€ํ•˜๊ธฐ ๋ณด๋‹ค๋Š” ๋ฐ˜๋ณต๋ฌธ ์—ฐ์Šต๋ฌธ์ œ ํ‘ผ๋‹ค๊ณ  ํ•˜๋ฃจ๋ฅผ ๋ณด๋ƒˆ๋‹ค. ๊ฒฐ๊ตญ advanced ๋ฌธ์ œ๋Š” ํ’€์ง€๋„ ๋ชปํ•˜๊ณ  ํŽ˜์–ด๋ž‘ ํ•จ๊ป˜ ํ’€์ด๋ฅผ ํ–ˆ๋‹ค. ๋ ˆํผ๋Ÿฐ์Šค ์ฝ”๋“œ๋ฅผ ๋ณด๋ฉด ์ดํ•ด๊ฐ€ ๋˜๋Š”๋ฐ, ํ˜ผ์ž ํ’€๋ ค๊ณ  ํ•˜๋‹ˆ๊นŒ ๋„ˆ๋ฌด ์–ด๋ ต๊ฒŒ ๋Š๊ปด์ง€๊ณ  ์–ด๋–ป๊ฒŒ ํ’€์–ด์•ผ ํ• ์ง€ ์ƒ๊ฐ์ด ๋‚˜์ง€ ์•Š์•˜๋‹ค. ๊ทธ๋ ‡๊ฒŒ ๋ฌธ์ œ๋“ค๋งŒ ๋ณด๊ณ  ์žˆ์œผ๋‹ˆ ์˜ค๋Š˜์€ ์กฐ๊ธˆ ์ง€์ณค๋˜ ๊ฒƒ ๊ฐ™๋‹ค ๐Ÿ˜ข ๋ผ์ด๋ธŒ์„ธ์…˜์—์„œ ์—ฐ์Šต๋ฌธ์ œ ํ’€์ด๋„ ํ–ˆ๋Š”๋ฐ ๋กœ์ง์„ ๋จธ๋ฆฟ์†์—์„œ ์งœ๊ธฐ ํž˜๋“ค๋ฉด ๋ฌด์กฐ๊ฑด ์ ์–ด๋ณด๋Š” ์Šต๊ด€์„ ๋“ค์—ฌ์•ผ๊ฒ ๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค. ๊ฑฐ์˜ 7์‹œ๊นŒ์ง€ ๋ฌธ์ œ ํ’€์ด๋ฅผ ํ–ˆ๋Š”๋ฐ, ์—ญ์‹œ ๋จธ๋ฆฌ๋ฅผ ๋งŽ์ด ์“ฐ๋‹ˆ๊นŒ ํ”ผ๋กœ๋„๊ฐ€ ๊ธ‰์ƒ์Šนํ•˜๋Š” ๊ธฐ๋ถ„์ด๋‹ค. ๋‚ด์ผ๊นŒ์ง€ ํ™”์ดํŒ…..!

๋ฐ˜์‘ํ˜•