๐Ÿ“– ํ•จ์ˆ˜ ์„ ์–ธ์‹ vs ํ•จ์ˆ˜ ํ‘œํ˜„์‹

๊ธฐ๋ก์ผ๊ธฐ๐Ÿ“ซยท2020๋…„ 12์›” 11์ผ
2

Javascript ๊ฐœ๋…์ •๋ฆฌ

๋ชฉ๋ก ๋ณด๊ธฐ
4/15

ํ•จ์ˆ˜

์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํ•ต์‹ฌ ๊ฐœ๋…์ธ ํ•จ์ˆ˜, ๊ทธ ์ค‘์—์„œ๋„ ํ•จ์ˆ˜ ์„ ์–ธ์‹๊ณผ ํ•จ์ˆ˜ ํ‘œํ˜„์‹์˜ ์ฐจ์ด์— ๋Œ€ํ•ด ์‚ดํŽด๋ณด์ž.


๐Ÿ’ก ํ•จ์ˆ˜๋ž€?

ํ•จ์ˆ˜๋ž€ ๋ฌด์—‡์ผ๊นŒ? ์ตœ๊ทผ ์ฝ๊ณ ์žˆ๋Š” ๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive ์ฑ…์—์„œ๋Š” ํ•จ์ˆ˜๋ฅผ ์ด๋ ‡๊ฒŒ ์ •์˜ํ•œ๋‹ค.

์ผ๋ จ์˜ ๊ณผ์ •์„ statement๋กœ ๊ตฌํ˜„ํ•˜๊ณ  ์ฝ”๋“œ๋ธ”๋ก์œผ๋กœ ๊ฐ์‹ธ์„œ ํ•˜๋‚˜์˜ ์‹คํ–‰๋‹จ์œ„๋กœ ์ •์˜ํ•œ ๊ฒƒ์œผ๋กœ, ์žฌ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•˜๊ณ  ์‹คํ–‰์‹œ์ ์„ ๊ฐœ๋ฐœ์ž๊ฐ€ ๊ฒฐ์ •ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์žฅ์ ์ด ์žˆ๋‹ค.


ํ•จ์ˆ˜ ์ •์˜ ๋ฐฉ๋ฒ•

๊ทธ๋ ‡๋‹ค๋ฉด ํ•จ์ˆ˜๋Š” ์–ด๋–ป๊ฒŒ ์ •์˜ํ•  ์ˆ˜ ์žˆ์„๊นŒ? ๐Ÿ˜ฎ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ํ•จ์ˆ˜๋ฅผ ์ •์˜ํ•˜๋Š” ๋ฐฉ์‹์€ ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ, ํ•จ์ˆ˜ ํ‘œํ˜„์‹, Function ์ƒ์„ฑ์ž ํ•จ์ˆ˜, ํ™”์‚ดํ‘œํ•จ์ˆ˜(ES6)๋กœ ์ด 4๊ฐ€์ง€๊ฐ€ ์žˆ๋‹ค.

์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ๊ฐ€์žฅ ๋ณดํŽธ์ ์ธ ํ•จ์ˆ˜ ์ƒ์„ฑ ๋ฐฉ์‹์ธ ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ๊ณผ ํ•จ์ˆ˜ ํ‘œํ˜„์‹์— ๋Œ€ํ•ด ์ค‘์ ์ ์œผ๋กœ ์‚ดํŽด ๋ณผ ๊ฒƒ์ด๋‹ค.

ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ

ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ์€ ๊ฐ€์žฅ ๊ธฐ๋ณธ์ ์ธ ํ•จ์ˆ˜ ์„ ์–ธ ๋ฐฉ์‹์ด๋‹ค.

// 1. ํ•จ์ˆ˜์„ ์–ธ๋ฌธ
function add(x, y){
	return x+y;
}

ํ•จ์ˆ˜ ํ‘œํ˜„์‹

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ํ•จ์ˆ˜๋Š” ๊ฐ์ฒด ํƒ€์ž…์˜ ๊ฐ’์ด๋‹ค. ๊ทธ๋Ÿฌ๋ฏ€๋กœ ๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด์„ ํ†ตํ•ด ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜๋“ฏ์ด ํ•จ์ˆ˜๋ฅผ ์ƒ์„ฑํ•  ์ˆ˜๋„ ์žˆ๋‹ค.

// 2. ํ•จ์ˆ˜ํ‘œํ˜„์‹
const add = function b(x, y){
	return x+y;
}

๋˜ํ•œ ์•„๋ž˜์ฒ˜๋Ÿผ ES6์—์„œ ์ถ”๊ฐ€๋œ ํ™”์‚ดํ‘œ ํ•จ์ˆ˜ ๋ฐฉ์‹์„ ์ •์˜ํ•  ์ˆ˜๋„ ์žˆ๋‹ค.

const add = (x,y) => (x+y)

ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋Š” ๋‚˜์ค‘์— ๋ณ„๋„์˜ ํฌ์ŠคํŒ…์„ ํ†ตํ•ด ์ž์„ธํžˆ ์‚ดํŽด๋ณด์ž.



ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ vs ํ•จ์ˆ˜ ํ‘œํ˜„์‹

๊ทธ๋Ÿฌ๋ฉด ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ๊ณผ ํ•จ์ˆ˜ ํ‘œํ˜„์‹์€ ์–ด๋–ค ์ฐจ์ด์ ์ด ์žˆ๋Š”์ง€ ์‚ดํŽด๋ณด์ž.

ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ์œผ๋กœ ์‹คํ–‰ํ•œ ํ•จ์ˆ˜๋Š” ์‹ค์ œ๋กœ ์–ด๋–ป๊ฒŒ ํ˜ธ์ถœ์ด ๋ ๊นŒ? ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์€ ์•”๋ฌต์ ์œผ๋กœ ์ƒ์„ฑ๋œ ํ•จ์ˆ˜ ์ด๋ฆ„๊ณผ ๋™์ผํ•œ ์ด๋ฆ„์˜ ์‹๋ณ„์ž๋ฅผ ์ƒ์„ฑํ•˜๊ณ , ๊ฑฐ๊ธฐ์— ํ•จ์ˆ˜ ๊ฐ์ฒด๋ฅผ ํ• ๋‹นํ•ด์„œ ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰ ๋  ์ˆ˜ ์žˆ๋„๋ก ํ•œ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด,

function add(x, y){
	return x+y;
}

์œ„์™€ ๊ฐ™์ด ํ•จ์ˆ˜์„ ์–ธ๋ฌธ์œผ๋กœ ์ƒ์„ฑํ•œ ์ฝ”๋“œ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์— ์˜ํ•ด ํ•จ์ˆ˜ ํ‘œํ˜„์‹๊ณผ ์œ ์‚ฌํ•˜๊ฒŒ ๋ณ€ํ™˜ ๋œ๋‹ค๊ณ  ์ƒ๊ฐ ํ•  ์ˆ˜ ์žˆ๋‹ค.

const add = function add(x,y){
	return x+y;
}

๊ทธ๋ ‡๋‹ค๋ฉด ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ๊ณผ ํ•จ์ˆ˜ ํ‘œํ˜„์‹์€ ๋™์ผํ•œ ๊ฒƒ์ผ๊นŒ? ๐Ÿ˜ฏ

๊ฒฐ๋ก ๋ถ€ํ„ฐ ์ด์•ผ๊ธฐ ํ•˜๋ฉด, ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ๊ณผ ํ•จ์ˆ˜ ํ‘œํ˜„์‹์€ ๋™์ผํ•˜์ง€ ์•Š๋‹ค!
๊ทธ ์ด์œ ๋Š” ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ์œผ๋กœ ์ •์˜ํ•œ ํ•จ์ˆ˜์™€ ํ•จ์ˆ˜ ํ‘œํ˜„์‹์œผ๋กœ ์ •์˜ํ•œ ํ•จ์ˆ˜์˜ ์ƒ์„ฑ ์‹œ์ ์ด ๋‹ค๋ฅด๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

์–ด๋–ค ์ฐจ์ด๊ฐ€ ์žˆ๋Š”์ง€ ๋‹ค์Œ ์ฝ”๋“œ๋ฅผ ํ†ตํ•ด ์‚ดํŽด๋ณด์ž.โŒจ๏ธโŒจ๏ธ

//ํ•จ์ˆ˜ ์ฐธ์กฐ
console.dir(add); // f add(x,y)
console.dir(sub); // undefined



//add๋ฅผ ์ •์˜ํ•˜๊ธฐ ์ด์ „์— ์‹คํ–‰
console.log(add(2,5)); // 7

//sub๋ฅผ ์ •์˜ํ•˜๊ธฐ ์ด์ „์— ์‹คํ–‰
console.log(sub(2,5)); // TypeError: sub is not a function

//add๋ฅผ ํ•จ์ˆ˜์„ ์–ธ๋ฌธ ๋ฐฉ์‹์œผ๋กœ ์„ ์–ธ
function add(x,y){
	return x + y ;
}

//sub๋ฅผ ํ•จ์ˆ˜ํ‘œํ˜„์‹ ๋ฐฉ์‹์œผ๋กœ ์„ ์–ธ
const sub = function(x,y){
	return x - y ;
}

์œ„ ์ฝ”๋“œ์˜ ์‹คํ–‰ ๊ฒฐ๊ณผ๋ฅผ ๋ณด๋ฉด, ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ์œผ๋กœ ์ •์˜ํ•œ add ํ•จ์ˆ˜๋Š” ์ •์˜ํ•˜๊ธฐ ์ „์— ์‹คํ–‰ํ•˜๋ฉด ์‹คํ–‰์ด ๋˜์ง€๋งŒ, sub๋Š” ์‹คํ–‰์ด ์•ˆ๋˜๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค!

์ฐจ์ด๊ฐ€ ๋ฐœ์ƒํ•˜๋Š” ์ด์œ ๋Š” ํ˜ธ์ด์ŠคํŒ…์ด ๋ฐœ์ƒํ•˜๋Š” ์ฃผ์ฒด๊ฐ€ ๋‹ค๋ฅด๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. (ํ˜ธ์ด์ŠคํŒ…์— ์›๋ฆฌ๊ฐ€ ๊ถ๊ธˆํ•˜์‹  ๋ถ„๋“ค์€ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ ํฌ์ŠคํŒ…์„ ์ฐธ์กฐํ•˜์„ธ์š”๐Ÿ˜)

ํ•จ์ˆ˜์„ ์–ธ๋ฌธ์œผ๋กœ ํ•จ์ˆ˜๋ฅผ ์ •์˜ํ•˜๋ฉด ๋Ÿฐํƒ€์ž„ ์ด์ „์— ์ฝ”๋“œ ํ‰๊ฐ€ ๊ณผ์ •์—์„œ ํ•จ์ˆ˜๊ฐ์ฒด๊ฐ€ ๋จผ์ € ์ƒ์„ฑ๋œ๋‹ค. ์ฆ‰, ํ•จ์ˆ˜ ํ˜ธ์ด์ŠคํŒ…์ด ๋ฐœ์ƒํ•œ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค.

๋”ฐ๋ผ์„œ ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ ์ด์ „์— ํ•จ์ˆ˜๋ฅผ ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ ์‹คํ–‰๊นŒ์ง€ ํ•  ์ˆ˜ ์žˆ๋‹ค. (์ด๋ ‡๊ฒŒ ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ์ด ์ฝ”๋“œ์˜ ์„ ๋‘๋กœ ๋Œ์–ด ์˜ฌ๋ ค์ง„ ๊ฒƒ ์ฒ˜๋Ÿผ ๋™์ž‘ํ•˜๋Š” ๋ฐฉ์‹์„ ํ•จ์ˆ˜ ํ˜ธ์ด์ŠคํŒ… ์ด๋ผ ํ•œ๋‹ค.)

๋ฐ˜๋ฉด์— ํ•จ์ˆ˜ํ‘œํ˜„์‹์œผ๋กœ ํ•จ์ˆ˜๋ฅผ ์ •์˜ํ•˜๋ฉด ๋ณ€์ˆ˜ ํ˜ธ์ด์ŠคํŒ…์ด ๋ฐœ์ƒํ•œ๋‹ค. sub์ด๋ผ๋Š” ๋ณ€์ˆ˜์— ํ• ๋‹น๋˜๋Š” ๊ฐ’์€ ๋Ÿฐํƒ€์ž„์— ๊ฒฐ์ •๋˜๊ธฐ ๋•Œ๋ฌธ์—, sub์ด๋ผ๋Š” ๋ณ€์ˆ˜ ํ˜ธ์ด์ŠคํŒ…์— ์˜ํ•ด undefined๋กœ ์ดˆ๊ธฐํ™”๋œ๋‹ค.

๋”ฐ๋ผ์„œ, sub์ด๋ผ๋Š” ๋ณ€์ˆ˜์— ํ•จ์ˆ˜๊ฐ€ ๋Œ€์ž…๋˜๊ธฐ ์ „์—๋Š” undefined์ด๊ธฐ ๋•Œ๋ฌธ์— ํ•จ์ˆ˜์— ์ ‘๊ทผํ•  ์ˆ˜ ์—†๋‹ค.

์ •๋ฆฌ

๐Ÿ’ก ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ์œผ๋กœ ์„ ์–ธ๋œ ํ•จ์ˆ˜๋Š” ํ•จ์ˆ˜ ํ˜ธ์ด์ŠคํŒ…์ด ๋ฐœ์ƒํ•œ๋‹ค. ๋Ÿฐํƒ€์ž„ ์ด์ „์— ํ•จ์ˆ˜ ๊ฐ์ฒด๊ฐ€ ์ƒ์„ฑ์ด ๋˜๋ฏ€๋กœ ํ•จ์ˆ˜๊ฐ€ ์ •์˜๋˜๊ธฐ ์ „์— ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ๋‹ค.

๐Ÿ’ก ํ•จ์ˆ˜ ํ‘œํ˜„์‹์œผ๋กœ ์„ ์–ธ๋œ ํ•จ์ˆ˜๋Š” ๋ณ€์ˆ˜ ํ˜ธ์ด์ŠคํŒ…์ด ๋ฐœ์ƒํ•˜๋ฉฐ, undefined๋กœ ์ดˆ๊ธฐํ™”๋œ๋‹ค. ๊ทธ๋Ÿฌ๋ฏ€๋กœ ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ์œผ๋กœ ์„ ์–ธํ•œ ํ•จ์ˆ˜๋Š” ํ•จ์ˆ˜๊ฐ€ ์ •์˜๋˜๊ธฐ ์ „์— ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•  ์ˆ˜ ์—†๋‹ค.

์ด๋Ÿฌํ•œ ํ•จ์ˆ˜ ํ˜ธ์ด์ŠคํŒ…์€ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์ „์— ๋ฐ˜๋“œ์‹œ ํ•จ์ˆ˜๋ฅผ ์„ ์–ธํ•ด์•ผํ•œ๋‹ค๋Š” ๊ทœ์น™์„ ๋ฌด์‹œํ•˜๋ฏ€๋กœ ํ•จ์ˆ˜ ํ‘œํ˜„์‹์„ ๊ถŒ์žฅํ•œ๋‹ค๊ณ  ํ•œ๋‹ค.

์—์–ด๋น„์—”๋น„

์œ„ ์ฝ”๋“œ๋Š” Airbnb ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋”ฉ ์Šคํƒ€์ผ ๊ฐ€์ด๋“œ์—์„œ ๊ฐ€์ ธ์˜จ ์ฝ”๋“œ์ธ๋ฐ, ํ•จ์ˆ˜ ์ด๋ฆ„์ด ์žˆ๋Š” ๊ธฐ๋ช… ํ•จ์ˆ˜ ํ‘œํ˜„์‹์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ๊ถŒ์žฅํ•˜๊ณ  ์žˆ๋‹ค.

์•ž์œผ๋กœ ํ•จ์ˆ˜๋ฅผ ์ •์˜ํ• ๋•Œ๋Š” ํ•จ์ˆ˜ํ‘œํ˜„์‹์„ ์‚ฌ์šฉํ•˜๋„๋ก ํ•ด์•ผ๊ฒ ๋‹ค. ๐Ÿ˜๐Ÿ˜

0๊ฐœ์˜ ๋Œ“๊ธ€