#8. Function ( 함수 )
Function ( 함수 ), LASCIATE OGNI SPERANZA, VOI CH'ENTRATE.
PER ME SI VA NELLA CITTA DOLENTE, 나를 지나는 사람은 슬픔의 도시로,
PER ME SI VA NELL'ETTERNO DOLORE, 나를 지나는 사람은 영원한 비탄으로,
PER ME SI VA TRA LA PERDUTA GENTE. 나를 지나는 사람은 망자에 이른다.
GIUSTIZIA MOSSE IL MIO ALTO FATTORE: 정의는 지고하신 주를 움직이시어,
FECEMI LA DIVINA POTESTATE, 신의 권능과 최고의 지와
LA SOMMA SAPIENZA E'L PRIMO AMORE. 원초의 사랑으로 나를 만들었다.
DINANZI A ME NON FUOR COSE CREATE 나보다 앞서는 피조물이란
SE NON ETTERNE, E IO ETTERNA DURO. 영원한 것뿐이며 나 영원히 서 있으리.
LASCIATE OGNI SPERANZA, VOI CH'ENTRATE. 여기에 들어오는 자 희망을 버려라.
- 단테의 신곡 지옥편 제3곡, 1~9행
"여기에 들어오는 자 희망을 버려라." 단테의 신곡 지옥편 마지막 구절처럼 Function 은 비전공자가 학습하는데 상당한 러닝 커브가 필요한 부분입니다. 이번 장에서는 Function 의 기초적인 개념들만 설명드리고 중요 개념들은 따로 연재할 예정입니다. 하지만 기초적이라고 해서 쉬운 것 또한 아니니 약간의 긴장은 필요합니다.
Function 은 특정 코드를 다시 사용할 수 있도록 코드를 묶어두는 방법입니다. 쉽게 설명하면 특정 기능을 재사용할 수 있는 코드의 집합이라고 볼 수 있습니다. Function 은 parameter (매개변수), argument (인자) 를 사용하여 코드를 재사용할 수 있습니다. parameter 는 Function 으로 전달되는 변수를 말하며, argument 는 Function 에서 넘겨 받은 특정값을 의미합니다.
function 함수명( parameter ) {}
함수명( argument )
그럼 간단한 코드를 통해서 함수가 어떤 식으로 동작하는지 알아보겠습니다.
function multiply(num1, num2) { // parameter : num1, num2
console.log(num1 * num2);
}
multiply(10, 20); // argument : 10, 20
곱셈 연산이 가능한 multiply Function 을 생성하였습니다. multiply Function 을 사용하기 위해서는 multiply() 를 사용하여 안에 argument 를 전달해야 합니다. 이것을 흔히 "함수를 호출한다" 고 얘기합니다.
multiply Function 을 호출시 argument 로 10, 20 값을 입력하면 각각의 숫자는 parameter num1, num2 로 전달됩니다. 전달된 값은 console.log(num1 * num2) 로 다시 전달되어 두 수의 결과 200이 출력됩니다.
위 코드가 어떤 방식으로 동작하는지 도식도로 살펴보겠습니다.
return, Function 을 끌어안고 죽다.
논개(論介, 1574년[1] 9월 3일 ~ 1593년)는 조선 선조 시대의 열녀이다. 충절을 기려 의암(義巖)이라고 한다. 그녀는 재주와 지혜가 뛰어나고 시문(詩文)에 능하였다. 임진왜란 당시 제2차 진주성 전투에서 왜장과 함께 남강(南江)에 투신하였다.
출처 : 위키백과
출처 : 나무위키임진왜란 당시 왜장 게야무라 로쿠스케를 유인하여 남강에 투신하여 순절한 논개처럼 return 또한 Function 의 값을 가지고 죽는다(?)는 점에서 논개와 유사한 성격을 갖고 있습니다. 즉, JavaScript 의 return 은 현재 Function 을 종료하고 그 값을 반환합니다.
function multiply(num1, num2) {
return num1 * num2;
}
console.log(multiply(10, 20));
위 코드에서 multiply Function 의 argument 로 10, 20 을 넘기면 200 이라는 값을 반환한다는 것을 console.log() 를 통해서 확인할 수 있습니다. 그럼 Function 을 종료한다. ( = 죽는다 ) 라는 의미는 무엇일까요? 바로 return 이후에 있는 기능들은 동작하지 않고 그 자리에서 Functoin 을 종료시킨다라는 의미입니다.
multiply Function 안에 2개의 console.log() 를 사용하면 2개의 결과값이 출력되는 것을 확인할 수 있습니다.
return 을 사용했을 경우에는 첫 번째 값을 반환한 후 바로 cal Function 을 종료시켰기 때문에 console.log() 는 출력되지 않는 것을 확인할 수 있습니다.
크롬 브라우저에서는 console.log() 를 사용하지 않더라도 console.log(multiply(10, 20)) 를 사용한 것처럼 Function 의 반환값을 확인할 수 있습니다.
Function Declarations ( 함수 선언문 ) 과 Function Expressions ( 함수 표현식 )
Function Declarations 와 Function Expressions 은 Function 을 생성하는 방법을 의미합니다.
function multiply(num1, num2) {.....} // Function Declarations
var multiply = function(num1, num2) {.....} // Function Expressions
두 생성 방법에 가장 큰 차이점은 바로 var 의 사용유무입니다. 물론 어떤 방식을 사용해도 Function 을 사용하는데 크게 지장은 없습니다. 단, 둘 사이에 아주 미묘한(?) 차이는 존재합니다.
Function Declarations 은 해당 Function 을 호출하는 코드가 Function 을 정의하는 코드보다 이전에 있건 이후에 있건 함수 호출에 문제가 없습니다.
그러나 Function Expressions 은 Function 을 정의하는 코드보다 뒤에 있어야만 정상적으로 Fuction 이 호출됩니다. Function 을 정의하는 코드 이전에 호출할 경우 아래처럼 에러가 발생합니다.
이러한 현상은 Function Hosting ( 함수 호이스팅 ) 과 관련되어 있는데 이 부분은 Execution Context ( 실행 컨텍스트 ) 연재 이후 설명 드리겠습니다.
Function Declarations VS Function Expressions
Function 생성 시 둘 중 어떤 것을 사용하는 것이 좋은지에 대해서는 해외 커뮤니티에서도 의견이 분분합니다. 정답이 없는 기호의 차이이기 때문에 개인 스타일 또는 회사 스타일에 맞춰서 작업하는 것이 가장 좋습니다. ^^
정리를 한다면... Function 은 커피 머신과 같다.
어떤 값을 넣고 그 값과 연관된 결과물을 반환한다는 점에서 JavaScript 의 Function 은 커피 머신과 비슷한 점이 많다고 생각됩니다. 내가 원하는 커피를 마시고자 한다면 그 커피를 만들기 위해 필요한 커피 원두를 커피 머신 투입구에 넣어야 합니다.
여기서 "넣고자 하는 커피 원두" 는 argument, "원두가 들어가는 투입구" 는 parameter, "원두에 의해 추출된 커피" 는 return 으로 볼 수 있습니다.
그리고 한번 만들어 두면 장소에 상관없이 언제든지 이용 가능한 커피 머신처럼 한번 작성해두면 Function 호출을 통해서 여러번 재사용이 가능하다는 점에서 커피 머신과 Funciton 은 닮은 구석이 많습니다.
지금까지 JavaScript 의 Function 중에서 가장 기초적인 부분을 설명했습니다. 후반부로 들어가면 scope, closure, callback 등 Function 과 관련있는 중요 개념들이 여러분을 기다리고 있습니다. 상당히 난이도가 있는 내용이라 구글링을 통해서 미리 예습을 해보는 것도 괜찮습니다. 다음 장에서는 JavaScript Function 과 쌍벽을 이루는 난이도를 갖고 있는 Object ( 객체 ) 에 대해서 살펴보도록 하겠습니다.
