[노드JS] 자바스크립트의 함수

그러면 함수를 사용할 때는 어떨까? 자바스크립트가 자료형을 표시하지 않기 때문에 함수를 선언하고 호출하는 형태로 약간 달라진다.

▲ 자바와 자바스크립트의 함수 비교

자바에서 더하기 함수를 만드는 경우, 먼저 함수 상자의 이름을 add라고 붙일 수 있다. 함수 상자는 입력 값과 출력 값을 갖는데, 이 입력 값을 a와 b라는 변수로 받아 함수 상자에 넣어 준다면 add라는 함수 이름 뒤에 소괄호를 붙인 후 파라미터(매개변수) 이름과 타입을 적어야 한다. 또한 함수의 출력 값이 정수라면 함수 이름 앞에도 int와 같은 타입을 표시해야 한다.

그러나 자바스크립트에서는 타입을 표시하지 않으므로 타입이 표시되었던 부분은 모두 사라진다.

심지어 파라미터로 전달되는 변수에는 var 키워드도 붙일 필요가 없다. 이 때문에 함수를 정의하는 형태가 더 단순해진다.

다만 함수라는 명시적으로 구별하기 위해 function 키워드를 함수 이름 앞에 붙여준다.

중요한 것은 앞에서 사용했던 자바스크립트의 변수에는 일반 데이터나 객체 이외에 함수도 할당할 수 있다는 점이다.

이것이 자바스크립트의 가장 중요한 특징 중 하나이다. 변수에 함수를 할당한다는 것, 어떤 의미일까? 다음 그림은 더하기 함수를 add 변수에 할당하는 과정을 보여준다.

▲ 변수에 함수를 할당하는 경우

함수를 만든 후 add 변수에 할당했다. 그런데 잘 보면 변수도 이름이 있고, 함수도 이름이 있으므로, 변수 이름과 함수 이름이 중복되는 것이다. 

이렇게 두 개의 이름을 중복해서 지정할 필요가 없으므로!!

함수의 이름을 삭제한다. 이 경우 함수를 호출하고 싶다면 변수의 이름으로 호출하여 실행한다!!

함수를 변수에 할당하는 과정에서 함수의 이름이 삭제되어 function 키워드 뒤에 곧 바로 소괄호가 붙는 형태가 만들어진다.

이것을 익명 함수(Anonymous function)이라고 한다.

함수를 익명 함수로 변수에 할당할 때는 함수를 선언하는 선언문(Declaration)이 아니라 일반 수식처럼 표현식(Expression)이 되므로 가장 마지막에 세미콜론(;)을 붙여주는 것이 좋다.

자바스크립트의 함수를 만들어보자.

ch03_test3.js를 만들고 다음과 같이 진행한다.

function add(a,b){

    return a+b;

}

var result = add(10, 10);

console.log('더하기 (10,10) : %d', result);

먼저 add 함수를 정의한 후 함수를 호출하고 그 결과 값을 result 변수에 넣었다. 함수를 정의할 때는 function 뒤에 함수의 이름이 온다는 것을 쉽게 확인할 수 있다. 그리고 함수를 호출할 때는 함수 이름과 소괄호를 사용한다는 것도 알 수 있다.

이 파일을 실행하면 다음과 같은 결과가 나타난다.

▲ 더하기 함수를 만들어 실행한 결과

콘솔 창에 출력되는 결과는 누구나 쉽게 예상할 수 있다. 이제 ch03_test4.js 파일을 만들고 코드를 바꿔보자.

var add = function(a,b){

    return a + b;

}

var result = add(10,10);

console.log('더하기 (10,10) : %d', result);

결과는 위와 같은 결과가 출력이 된다. 하지만 더하기 함수에 함수 이름이 없고 함수는 만들어지자마자 add 변수에 할당되었다는 점이 다르다.

자바스크립트 함수는 변수에 할당되는 경우가 많다. 이런 패턴도 있다는 점을 알아두자.

그러넫 함수가 변쉥 할당될 수 있다면 객체 안에 속성으로도 들어갈 수 있다.

즉, 객체의 속성에는 변수를 만들어 할당할 수 있으므로 객체 안의 속성에 함수를 할당할 수 있다. 다음은 객체의 속성으로 더하기 함수를 할당했을 때의 표현한 그림이다.

▲ 객체의 속성으로 더하기 함수를 할당하는 경우

다른 속성들처럼 add라는 이름으로 속성을 추가할 수 있는데, 그 속성의 값이 함수가 된다. 이런 모양을 실제 코드로 만들면 다음과 같다. ch03_test5.js 파일을 만들고 아래와 같이 진행하자.

var Person = {};

Person['age'] = 20;

Person['name'] = '소녀시대';

Person.add = function(a,b){

    return a+b;

}

console.log('더하기 : %d', Person.add(10,10));

이렇게 입력한 ch03_test5.js파일을 실행하면 앞에서와 같이 더하기가 정상적으로 실행된 후 그 결과가 출력된다.

더하기 함수를 호출할 때는 객체의 속성으로 할당된 함수를 호출해야 하므로 Person.add()와 같은 형태로 호출한다.

이런 형태의 코드는 다음과 같이 일차적으로 변수에 함수를 할당한 후 다시 그 변수를 객체의 속성으로 추가되도록 수정할 수도 있다. ch3_test5.js 파일을 복사하여 ch03_test6.js 파일을 만든 후 다음과 같이 수정하자.

var Person = {};

Person['age'] = 20;

Person['name'] = '소녀시대';

var oper = function(a,b){

    return a+b;

};

Person['add'] = oper;

console.log('더하기 : %d', Person.add(10,10));

결론적으로 앞의 코드와 같다.

하지만 함수를 변수에 먼저 할당했다는 점이 다르다. 

이제 마지막으로 객체를 만들면서 동시에 속성을 초기화하는 코드를 만들어보자.

ch03_test7.js 파일을 만들고 다음과 같이 입력한다.

var Person = {

    age : 20,

    name : '소녀시대',

    add : function(a,b){

        return a+b;

    }

};

console.log('더하기 : %d', Person.add(10, 10));

자바스크립트 객체는 중괄호를 이용해 만드는데, 객체를 만들 때 중괄호 안에 속성을 바로 넣어줄 수도 있다.

이 속성에 포함된 속성 이름과 속성 값은 콜론(:)으로 구분되며 각각의 속성은 콤마(,)로 구분한다.

속성에는 숫자나 문자열과 같은 일반적인 데이터와 함께 함수도 할당될 수 있으므로 더하기 함수를 add라는 이름의 속성으로 추가했다.

이 파일을 실행하면 이전과 마찬가지로 더하기 결과가 출력된다.

자바스크립트의 장점은 함수를 변수에 할당할 수 있다는 점인데 이 때문에 다양한 작업이 가능해진다는 이점을 갖고 있다.