[Javascript 심화] 함수 1

ID : 2401281723

Tag : #javascript

 

C언어에서 포인터를 얼마나 제대로 이해하느냐에 따라 고급 C 개발자로 발전 할 수 있듯이 자바스크립트에서도 포인터만큼 중요한 개념이 바로 함수다. 자바스크립트의 함수는 모듈화 처리나 클로저, 객체 생성 등 자바스크립트의 근간이 되는 많은 기능을 제공하고 있다.

 

함수 정의

자바스크립트에서 함수를 생성하는 방법은 3가지가 있다.
3가지 방법 모두 같은 모양의 함수를 생성하지만, 각각의 방식에 따라 함수 동작에 조금씩 차이가 생긴다.

• 함수 선언문 (function statment)
• 함수 표현식 (function expression)
• Function() 생성자 함수

이번 포스팅에서는 두 개의 인자를 받아 그 합을 구하는 add() 함수를 3가지 방법으로 정의해보도록 하고 그 차이점을 확인해보도록 하겠다.

 

1. 함수 선언문 방식

자바스크립트에서는 함수도 일반 객체처럼 값으로 취급된다. 따라서 리터럴 방식으로 일반 객체를 생성할 수 있는 것처럼, 함수 리터럴을 이용해 함수를 생성할 수 있다. 여기서 주의할 점은 함수 선언문 방식으로 정의된 함수의 경우는 반드시 함수명이 정의되어 있어야 한다는 것이다.

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

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

 

2. 함수 표현식 방식

 

자바스크립트에서는 함수는 일급 객체라고 한다. 따라서 함수도 숫자나 문자열 처럼 변수에 할당하는 것이 가능하다. 이러한 방식으로 함수 리터럴로 하나의 함수를 만들고, 여기서 생성된 함수를 변수에 할당하여 함수를 생성하는 것을 함수 표현식이라고 말한다.
아래의 실험을 통해 함수 표현식 방식을 사용하여 add() 함수를 생성하는 모습을 확인해보자.

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

const plus = add;

console.log(add(3,4)); // OUT : 7
console.log(plus(10,1)) // OUT : 11

 

여기서 함수 선언문 방식과는 다르게 이름을 지정해주지 않아도 된다는 것이다. 함수 표현식 방식으로 함수를 생성할 경우엔 익명 함수로 선언을 하여 add 변수에 바로 대입을 하기 때문이다. 또한 객체가 된 함수는 참조 타입으로 사용을 하기 때문에 plus 변수에 대입을 하여도 add와 같은 동작을 하고 있는 것이다.
여기서는 익명 함수로 선언을 하여 함수 객체를 생성하였는데 반대로 이름을 사용하는 기명 함수를 사용할 순 없을까?
당연히 기명 함수도 사용이 가능하다. 아래 실험을 통해 기명 함수는 어떤 특징이 존재하는지 확인해보자.

 

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

console.log(add(3,4)); // OUT : 7
console.log(sum(3,4)); // OUT : Uncaught ReferenceError : sum is not defined

 

여기서 sum() 함수를 정의하고 이 함수를 add 함수 변수에 할당했다. 그런데
add() 함수는 제대로 동작하는 반면, sum() 함수는 오류를 출력하고 있다.
이것은 함수 표현식에서 사용된 함수 이름이 외부 코드에서 접근이 불가능하기 때문이다.

메모) 세미콜론
함수 선언문 방식과 함수 표현식 방식을 잘 확인해보면 각자 세미콜론 ‘ ; ’ 의 유무를 확인 할 수 있다. 일반적으로 함수 선언문 방식에서는 세미콜론을 사용하지 않는게 관습이다. 하지만 함수 표현식 방식의 경우는 세미콜론을 붙이는 것을 권장한다.
물론 자바스크립트는 C나 Java 언어와는 다르게 세미콜론 사용을 강제하지는 않는다. 그것은 자바스크립트의 인터프리터가 자동으로 세미콜론을 삽입시켜 주기 때문이다.
하지만 세미콜론 사용을 신경 쓰지 않는다면, 심각한 디버깅 상황에 직면할 수도 있다.
아래의 실험을 통해 세미콜론을 사용하지 않는 함수 표현식에서 어떻게 오류가 발생하는지 확인해보도록 하자.

 

const func = function() {
    return 30;
} // 세미콜론을 사용하지 않음

(function(){
    console.log(text,'function called'); 
})(); // OUT : (intermediate value)(…) is not a function

 

해당 실험에서 오류가 나는 이유는 자바스크립트의 파서가 func()의 함수 정의에서 세미콜론을 사용하지 않아, function 함수 끝에 있는 중괄호 닫기 ‘ } ‘ 만으로 함수가 끝났다고 판단하지 않았기 때문이다. 이러한 문제로 자바스크립트에서는 함수 표현식 방식에서 세미콜론 사용을 강력하게 권고하고 있다.

 

3. Function() 생성자 함수 방식

자바스크립트의 함수도 Function()이라는 기본 내장 생성자 함수로부터 생성된 객체라고 볼 수 있다. 위의 내용에서는 생성자 함수 방식이 아닌 선언문이나 표현식 등 리터럴로 함수를 생성했지만 결국 이 또한 내부적으로는 Function() 생성자 함수로 함수가 생성된다고 볼 수 있다.
Function() 생성자 함수로 함수를 생성하는 문법은 아래의 실험을 통해 확인해볼 수 있다.

new Function (arg1, arg2, . . ., argN, functionBody);

 

기본적으로 Function() 생성자는 인수를 사용하여 함수를 구성 할 수 있다. 앞부분의 arg 들은 생성될 함수의 인수들을 구성하고 있고 functionBody는 함수 내부에서 실행될 내용을 인수로 받는다.
이런 방식을 이용해 작성한 add() 함수는 다음과 같다.

 

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

console.log(add(3,4)) // OUT : 7

 

자세히 보면 인수, 함수 내용 모두 문자형 타입으로 받는 것을 볼 수 있다.
일반적으로 Function() 생성자 함수를 사용한 함수 생성 방법은 자주 사용되지 않으므로 이정도는 상식 수준으로 알아두면 좋을 듯 하다.