์ด๋ฒ ํฌ์คํ ์์๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ํต์ฌ ๊ฐ๋ ์ธ ํจ์, ๊ทธ ์ค์์๋ ํจ์ ์ ์ธ์๊ณผ ํจ์ ํํ์์ ์ฐจ์ด์ ๋ํด ์ดํด๋ณด์.
ํจ์๋ ๋ฌด์์ผ๊น? ์ต๊ทผ ์ฝ๊ณ ์๋ ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ 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)
ํ์ดํ ํจ์๋ ๋์ค์ ๋ณ๋์ ํฌ์คํ ์ ํตํด ์์ธํ ์ดํด๋ณด์.
๊ทธ๋ฌ๋ฉด ํจ์ ์ ์ธ๋ฌธ๊ณผ ํจ์ ํํ์์ ์ด๋ค ์ฐจ์ด์ ์ด ์๋์ง ์ดํด๋ณด์.
ํจ์ ์ ์ธ๋ฌธ์ผ๋ก ์คํํ ํจ์๋ ์ค์ ๋ก ์ด๋ป๊ฒ ํธ์ถ์ด ๋ ๊น? ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ ์๋ฌต์ ์ผ๋ก ์์ฑ๋ ํจ์ ์ด๋ฆ๊ณผ ๋์ผํ ์ด๋ฆ์ ์๋ณ์๋ฅผ ์์ฑํ๊ณ , ๊ฑฐ๊ธฐ์ ํจ์ ๊ฐ์ฒด๋ฅผ ํ ๋นํด์ ํจ์๊ฐ ์คํ ๋ ์ ์๋๋ก ํ๋ค.
์๋ฅผ ๋ค์ด,
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 ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋ฉ ์คํ์ผ ๊ฐ์ด๋์์ ๊ฐ์ ธ์จ ์ฝ๋์ธ๋ฐ, ํจ์ ์ด๋ฆ์ด ์๋ ๊ธฐ๋ช ํจ์ ํํ์์ ์ฌ์ฉํ๋ ๊ฒ์ ๊ถ์ฅํ๊ณ ์๋ค.
์์ผ๋ก ํจ์๋ฅผ ์ ์ํ ๋๋ ํจ์ํํ์์ ์ฌ์ฉํ๋๋ก ํด์ผ๊ฒ ๋ค. ๐๐