Quick JavaScript 12 - Function (함수 vs 동작 or 기능)

 

가장 중요한 함수를 가장 늦게 다루게 되었다.

잠시 옆길로 새서 '함수'라는 용어에 대해 생각해 본다.

 

프로그래밍 언어의 '함수(函數)' 는 수학의 '유리수'와 더불어,

이공계 용어를 번역하면서 발생한 대표적인 오역의 사례이다.

 

영어 사전을 보면 function 은 '기능(동작)'의 뜻이 먼저 등장하고 다음으로 수학 용어로서의 '함수'가 등장한다.

그런데 수학의 함수는

(1) 정의역의 원소인 입력값이 반드시 주어지고

(2) 그에 대응되는 공역의 원소인 유일한 결과값이 반드시 있어야 한다. 

 

그에 반해 프로그래밍 언어의 함수는 위의 조건 중 어떤 것도 충족시킬 이유가 없다.

그럼에도 최초에 C 언어에서 'function'을 번역한 사람이 이공계 전공자였을 테니,

아마도 '기능(동작)'으로 번역되는 편이 자연스러울 것을 자신에게 익숙한 수학의 '함수'로 번역한 것으로 추정된다.  

 

더 웃기는 것은 '函數' 는 음차라는 사실이다.

뭔가 심오한 뜻이 있는 것이 아니라, 중국인들이 읽으면 function과 비슷한 발음이기 때문에 선택된 한자 용어인 것이다.

'function' 과 비슷한 발음을 얻기 위해 중국인들이 채용한 한자를,

다시 한국식 한자 발음으로 바꾸어서 '함수'라는 용어가 정착된 과정은 머리를 어지럽게 한다.

 

이제 와서 용어를 바꾸지는 못하겠지만,

프로그래밍 언어에서 사용되는 함수와 수학의 함수가 전혀 다른 것임은 강조될 필요가 있어 보인다.

수학의 함수를 빌어와서 프로그래밍에서의 함수를 설명하는 것은 양쪽 모두에 도움이 안된다.

 

-----

 

본래의 주제로 돌아가자.

JavaScript 의 function 은 다른 언어의 function 에 비해 공부해야 할 것이 많다.

이 글에서는 기초 중의 기초만을 정리해 둔다.

 

1. 함수는 '값'이다!

 

현재 많이 사용되는 언어들에서 함수는 변수에 할당되거나 함수의 인자로 넘겨질 수 있는 '값'으로 취급할 수 있다.

자바스크립트에서도 그렇다.

 

(0) this 와 관련해서

Object 는 'key : value' 쌍을  모아 둔 것이다. 

다음 코드를 보면 obj 객체의 'walking' 이라는 키에 대해, function 을 짝지어 주었다.

즉, function 이 '값(value)' 임을 확인할 수 있다.

왜 자꾸 '값'임을 강조할까? 일단 위의 코드에 이어서 

obj.walking();

 

를 실행시키면 결과는 다음과 같다.

'math walking!'

 

이 시점에서 아마도 'this' 의 의미를 유추할 수 있을 것이다.

앞서 '함수'은 '기능' 혹은 '동작'이 더 자연스러운 번역이었을 거라 이야기했으니,

잠시 '함수'를 '동작'이라고 생각하면 'this'는 '동작'의 주체를 가리킨다.

일반적으로 obj.func() 의 형태에서 'dot( . )' 앞의 obj가 주체(주어)가 된다.

 

그런데,  자바스크립트에서 function 은 할당된 '값'에 불과하기 때문에 다음과 같은 일이 가능하다.

등호(=)의 우변에서 'obj.walking' 은 할당된 '값'인 function 을 뜻하니까 

    obj2.walking=obj.walking;

 

같은 표현은 이상하지 않다. 위의 마지막 코드

obj2.walking()

은 누가 걷고 있는지를 출력해 줄 것이다. 따라서 실행 결과는 다음과 같다.

'trauma walking'

method 가 class 에 귀속되는 C++ 과는 달리,

자바스크립트에서는 function 은 값으로 취급되므로 다른 객체에 할당할 수 있음을 기억해야 한다.

또한, '동작'의 주어인 this 가 바뀐다는 사실도!

 

(1) 함수 표현식(function expression)

* expression 은 따로 다룰 예정이고 여기서는 'expression' 은 값을 추출할 수 있는 코드 단위란 것만 기억해 두자.

 

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

 

이처럼 무명함수를 변수에 할당하는 것이 가능한데 이를 함수 표현식(Expression)이라고 한다.

아래에 소개할 함수 선언(declaration)은 해당 scope의 최상단으로 끌어올려지는 호이스팅(hoisting) 때문에,

선언되기 이전에 호출될 수 있지만 Expression 은 그렇지 않다.

 

(2) callback : 인자로서의 함수 

다음의 형태처럼 함수를 인자로 넘길 때, 이를 callback 이라고 부른다. 

 

another_func(1,2, add1);

 

Asynchronous 프로그래밍 편에서 callback 은 재조명될 것이다.

 

(3) Return Value

앞서 언급한 것처럼 값이라면 return value 가 될 수 있어야 한다.

다음 코드는 함수를 반환한다.

function trauma(){
  return function(){
    console.log('trauma');
  }
}

let x=trauma();
x(); // 'trauma'

 

(4) 객체로서의 함수

 

그런데 값으로서 primitive type 이 아닌 함수는 객체일 수 밖에 없고, 객체에 할 수 있는 것은 함수에도 할 수 있다.

조금 전에 정의한 trauma 함수에 이름 속성(property)를 부여하자.

 

trauma.name='mathtrauma';

 

앞서 논의한 (1), (2), (3) 처럼 '값'으로서 변수가 사용되는 모든 곳에서 사용될 수 있는 객체를 'First Class Object'라고 부른다.

 

<참고>

자바스크립트 함수는 built-in 'callable' object 인데,

자바스크립트에서는 python 의 __call__( ) 처럼 일반 객체를 callable 객체로 만들 방법은 없다.

 

2. 함수 선언 (Function Declaration)

 

C/C++ 의 문법처럼 함수를 다음과 같이 선언(declaration) 할 수 있다.

 

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

 

- JavaScript 는 관대하다! 

앞서 정의한 add1 함수는 두 개의 매개변수(parameter)-함수를 정의할 때 괄호( ) 안에서 사용된 형식 변수-를 가진다.

그런데 인자(argument)-함수를 호출할 때 넘겨지는 값-를 하나만 넘기면 어떻게 될까?

add1(5);

다른 대부분의 언어들에서는 여지없이 에러가 발생할 것이지만,

자바스크립트는 y 를 undefined 로 취급하고 return value 는 NaN 이 된다.

이런 면모는 장단점이 있는데 복잡한 상황에서 매개변수와 인자가 일치하지 않을 때,

발생한 오류가 어디서 기인했는지 알기 쉽지 않다. 주의가 요구된다.

 

 

-----

 

여기까지 JavaScript 의 구성 요소들을 대충 훑어 보았다.

이로써 이 시리즈는 종료하고, 소개된 구성 요소들을 결합해서

그럴듯한 결과물을 만들기 위해 필요한 내용들은 새로운 시리즈에서 다룬다.