함수

1. 함수 리터럴

자바스크립트에서는 함수도 일반 객체처럼 값으로 취급된다.

다음과 같이 test라는 이름의 함수를 정의해 보자.

function test(){
   // 함수 내용
}

함수는 function이라는 키워드로 생성한다.

함수명은 일단 test라고 임의로 지었으나, 적절한 이름으로 지어주면 된다

매개변수는 함수명 test 뒤 소괄호()에 적어준다.

2. 함수 선언문 방식으로 함수 생성하기

함수 선언문 방식은 1번에서 설명한 함수 리터럴 형태와 같다. 단, 함수 선언문 방식으로 정의된 함수의 경우 반드시 함수명이 정의되어 있어야 한다.

다음과 같이 함수를 정의하고, 호출해보자.

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

console.log(add(3,4)); // 7

3. 함수 표현식 방식으로 함수 생성하기

이번에는 2번과 다른 방법으로 함수를 생성해보자.

이번 함수 포스터를 쓸 때, 맨 앞에서 자바스크립트에서 함수도 하나의 값으로 취급된다고 했다. 값은 변수에 저장할 수 있다. 떄문에 함수도 숫자나 문자열처럼 변수에 할당하는 것이 가능하다.

이런 방식으로 함수 리터럴로 하나의 함수를 만들고, 생성된 함수를 변수에 할당하여 함수를 생성하는 것을 함수 표현식이라고 말한다.

다음 예제는 2번의 예제에서 생성했던 add 함수를 함수 표현식으로 생성한 것이다.

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

console.log(add(3, 4)); // 7
console.log(sum(1, 2)); // 3

일단 함수 리터럴로 두 값을 더하는 기능을 가진 함수를 생성한 다음, 이를 add 변수에 저장했다. 여기서 함수 리터럴로 생성한 함수는 함수명이 없으므로 익명 함수이다.

또한 sum이라는 변수에도 add 값을 할당하는 것을 볼 수 있다. 함수 변수인 add는 함수의 참조값을 가지므로 sum이라는 값에 그대로 할당할 수 있다.

 

앞서 설명했듯이 위와 같이 이름이 없는 함수 형태를 자바스크립트에서는 익명 함수(anonymous function)라고 부른다. 즉, 위의 add는 익명함수를 이용한 함수 표현식 방법(익명 함수 표현식)이다. 이러한 익명 함수의 호출은 앞 예제와 같이 함수 변수에 함수 호출 연산자인 ()를 붙여서 기술하는 것으로 가능하다.

 

4. 기명 함수 표현식 주의점

그렇다면, 반대로 2번에서 생성했던 함수 표현식을 보자. 이는 함수 이름이 포함된 함수 표현식을 사용했으므로, 기명 함수 표현식이라고 한다.

이러한 기명 함수 표현식을 사용할 때는 주의할 점이 있다.

다음의 코드를 보자.

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

console.log(add(3,4)); //출력값 : 7
console.log(sum(3,4)); // 출력값 : Uncaught ReferenceError: sum is not defined 에러 발생

위 코드는 sum() 함수를 정의하고, 이 함수를 add 함수 변수에 할당했다. 에제에서 특이한 점은 add() 함수 호출은 결과값이 성공적으로 리턴된 반면에, sum() 함수 호출의 경우에는 에러가 발생한다는 것이다. 이것은 함수 표현식에서 사용된 함수 이름이 외부 코드에서 접근 불가능하기 떄문이다.

 

추가로, 자바스크립트 함수는 함수 끝에 ;(세미콜론)을 붙이는 것을 강제하진 않는다. 자바스크립트 인터프리터가 자동으로 세미콜론을 삽입시켜 주기 떄문이다.

또, 자바스크립트 함수와 관련해 호이스팅(function Hoisting)을 알아두어야 한다. 이는 자바스크립트 내에서 변수 생성과 초기화의 작업이 분리돼있기 때문이다. 이는 추후 다른 글에서 더 상세하게 알아보려고 한다.

 

[REFERENCE : 인사이드 자바스크립트 (송형주, 고현주 지음 ; 한빛미디어)]