자바스크립트 함수의 정의

 

 

 

 

 

이번 포스팅에선.. 오늘 공부한 자바스크립트 함수의 정의에 대해서 글을 써보려고한다.

 

우선 자바스크립트에서 함수를 생성하는 방법은 3가지가 있다!

 

1. 함수 선언문

2. 함수 표현식

3. Function() 생성자 함수

 

요러케 세가지가 있다!

 

들어가기전에 함수 리터럴의 형태를 간단하게 살펴보자..

 

function add (x, y) {

    return x+y;

}

 

function : function 키워드이다. 자바스크립트 함수를 만들때 사용한다 !

add : 함수명이 오는 자리이다! 위 코드에 나온 함수의 이름은 add가 되겠죵?

(x, y) : 매개변수가 오는 자리이다! 우리가 C 나 JAVA에서 사용했던 그 매개변수랑 비슷한데 차이점은 데이터 타입을 명시하지 않아도 된다는점!

return x+y; : 이 부분은 함수 내부이다.

 

함수의 형태는 이제 설명했고,

 

우선 첫번째, 함수 선언문 방식은 어떤 방식일까?

 

간단한 함수를 하나 선언해보장.

 

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

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

 

이렇게 함수를 생성하는것이 함수 선언문 방식이다! 

 

함수 선언문 방식은 반드시 함수명이 있어야한다 위에선 add가 함수명이다.

 

그리고 호출할때는 함수명으로 호출해야한다! 우리가 다른언어에서 만들었던 함수의 형태랑 비슷한 형태이다.

 

 

두번째, 함수 표현식 방식

 

오늘 공부하면서 흥미로웠던 부분이다. 자바스크립트는 함수도 하나의 값처럼 취급된다고한다.

즉 함수를 숫자나 문자열처럼 변수에 할당할 수 있다는것이다!

 

형태를 한번 봐보자.

 

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

 

코드를 보면 = 연산자 우측에 함수 리터럴로 함수를 하나 만들고 곧바로 add 변수에 할당해주고있다.

이렇게 함수를 할당받는 변수를 함수 변수라고 하고 이런 방식으로 함수를 만드는것이 함수 표현식 방법이라고한다.

그리고 여기서 보면 함수 리터럴에 함수명이 없는데, 이런 함수를 익명함수 라고 부른다.

 

위에서 만든 add를 이렇게 활용할수도있다.

var plus = add; // 함수 변수 add는 함수의 참조값을 가지므로 또 다른 변수 plus에도 그 값을 그대로 할당 할 수있다.

console.log(add(3,4)); // 출력값 7
console.log(plus(5,6)); // 출력값 11

함수 표현식으로 생성된 함수를 호출하려면, 함수변수를 사용해야한다.

위처럼 add(3,4) / plus(5,6) 이런식으로 호출 가능하다.

 

그리고 각각 함수변수는 만들어진 함수를 참조하는 형태이다!

var plus = add 는 add의 참조값을 plus에 할당하는 것이다.

 

그리고 익명함수를 언급했는데, 이 익명함수의 호출은 함수변수에 함수 호출 연산자인 ()를 붙여서 기술하는것으로 가능하다!

 

ex) add(3,4)

 

 

 

그리고 익명 함수 표현식이 있는것처럼 기명 함수 표현식이라는것도 있는데, 말 그대로 함수명이 있는 표현식을 의미한다.

 

예를 들면 다음과 같다.

 

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

console.log(add(3,4)); // 출력값 7
console.log(sum(3,4)); // 에러!

이런 기명 함수 표현식을 사용하는 경우 주의할 점이 있다.

 

우선 코드를 보면 sum() 함수를 정의하고, 이 함수를 add 함수변수에 할당했다. 그런데 아래에서 결과를 보면

함수 변수로 호출했을땐 정상적으로 출력되고, sum() 함수 호출을 했을땐 에러가 났다는 것이다..

 

왜 이런 현상이 발생했냐면, 함수 표현식에서 사용된 함수 이름이 외부 코드에서 접근이 불가능 하기 때문이다!

 

즉 sum() 함수는 함수 표현식에서 사용된 함수 이름이기 때문에, 외부 코드에서 이 이름으로 호출을 할 수 없는것이다..

 

 

그러면 이런 함수 표현식으로 생성된 함수가 아닌 함수 선언문으로 생성된 함수는 어떤 방식으로 함수가 호출되는것일까?

 

 

함수 선언문 형식으로 정의된 함수는 자바스크립트 엔진에 의해서 함수 표현식 형태로 변경된다.

예를 들면 

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

이렇게 정의된 함수는

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

이렇게 자바스크립트 엔진에 의해서 변경된 후 호출되는 것이다.

 

즉 함수 이름과 함수 변수의 이름이 add로 같으므로 함수이름으로 함수가 호출되는 것처럼 보이지만,

실제로는 add 함수 변수로 함수 외부에서 호출이 가능하게 된 것이다!

 

그리고 추가적인 내용이지만 함수 선언문 형태와, 함수 표현식에서의 세미콜론에 대해서 잠깐 이야기해보려고한다.

 

내가 본 책에서는 일종의 관습이라고하는데 어떤 내용이냐면,

 

자바스크립트 코드를 작성할 때 함수 선언문 방식으로 선언된 함수의 경우는 함수 끝에 세미콜론을 붙이지 않지만, 함수 표현식의 경우는 세미콜론을 붙이는 것을 권장한다. 는 내용이다.

// 함수 선언문 형식
function add(x, y) {
	return x,y;
}


// 함수 표현식 방식
var add = function (x, y) {
	return x+y;
};

자바스크립트는 세미콜론 사용을 강제하지 않지만 그렇다고 세미콜론 사용을 신경쓰지 않는다면 나중에 여러 문제가 발생할 수 있기 때문에 이런 방식으로 세미콜론을 사용하는것을 많은 자바스크립트 가이드에서 권고하고 있다고한다~

 

 

이제 넘어가서 세번쨰 방법인 Function() 생성자 함수를 통해 함수를 정의하는 방법에 대해 설명하도록 하겠다.

 

자바스크립트의 함수는 Function()이라는 기본 내장 생성자 함수로부터 생성된 객체라고 볼 수 있다고 한다.

함수 선언문이나 함수 표현식 방식도 Function() 생성자 함수가 아닌 함수 리터럴 방식으로 함수를 생성하지만, 결국엔 이 또 한 내부적으로는 Function() 생성자 함수로 함수가 생성된다.

 

Function() 생성자 함수로 함수를 생성하는 문법은 다음과 같다.

new Function (arg1, arg2, ... arg N, functionBody)

// arg1, arg2, ... arg N - 함수의 매개변수
// functionBody - 함수가 호출될 때 실행될 코드를 포함한 문자열

 

이 방식을 이용하여 add() 함수를 작성하면 다음과 같다.

 

var add = new Function('x', 'y', 'return x+y');

 

하지만 이 방법은 자주 사용되지 않으므로 실제 사용하기 보다는 상식 수준으로 알아두면 좋다~