[자바스크립트]함수 이야기 1탄 - 함수 정의, 함수 선언, 함수 만들기 (function)

자바스크립트를 공부한다면

함수를 공부한다고 해도 과언이 아닐 정도로 

함수(function)는 정말 중요하답니다.

자바스크립트 함수란?

자바스크립트의 블록으로 감싼 실행문들을 모은 집합체?라고 생각하면 됩니다.

모듈? 기능집합? 메서드? 등 다양하게 표현할 수 있는데

학교 수학 수업때 배운 함수랑 같은 개념으로 보시면 되겠네요.

 

함수 선언

함수를 만드는 방법을 알아봅니다.

함수를 만들 때 사용하는 키워드는 다음과 같습니다.

• function + 함수 이름을 지정한다. 
• 함수 이름 옆에 괄호를 사용해서 콤마로 구분해서 입력받을 매개변수 목록을 정의한다.
• 다음 중괄호{}를 사용해서 함수의 몸체를 구성한다.
• 몸체에는 원하는 구현문을 코딩한다.
• 결과를 내보내고 싶다면 return문을 사용한다.

위 순서대로 함수를 하나 만들어볼까요?

두 개의 숫자를 입력받아 더한 값을 내보내는 함수를 만들어볼게요.

function addNumber(num1, num2) {
    return num1 + num2;
}

function 뒤에 addNumber로 함수 이름을 정했습니다.

이름은 함수가 어떤 기능을 하는지 누가 봐도 알 수 있는 것으로 자유롭게 만들어주면 됩니다.

기능이기에 동사로 시작하고 명사로 끝나면 좋겠네요.

결합하는 부분은 대문자로 구분해 주세요.
addNumber의 N처럼요.

이제 괄호()를 사용해서 입력받을 값을 콤마로 구분해서 정의해 줍니다.

개수는 상관없지만 꼭 필요한 만큼 만들면 좋겠지요.

숫자 2개를 받기로 정했기에 num1, num2라고 간단하기 매개변수 이름을 지정해봅니다.

이제 입력받을 매개변수를 정했습니다. 다음은 함수 몸체를 만들어봐야겠지요.

함수 몸체는 중괄호{}를 사용해 블록으로 지정해서 함수의 몸체임을 알려줍니다.

{} 안에는 원하는 표현식 등 실행 로직을 구성하면 된답니다.

그리고 결과로 더한 값을 주기 위해 return문을 사용했습니다.

addNumber 함수는 입력받은 두 개의 숫자를 더한 값을 돌려주기로 했기에

return문을 사용하고 num1 + num2 식을 만들었습니다.

한 문장이 끝나면 세미콜론을 붙여주는 건 잊으면 안 되겠지요?

그래서 함수 블록문 (몸체)는 { return num1 + num2; }로 구성했습니다.

축하합니다.

이제 우리는 자바스크립트로 함수를 선언하는 방법을 알게 되었습니다.

 

좀 더 살펴보기.

하나 더 알아두면 좋은 정보가 있습니다.

우리는 함수에 입력받은 값을 숫자로 지정했습니다.

함수에 전달하는 매개 변수는 자바스크립트 기본형 데이터들도 가능하고

배열, 객체 심지어 함수도 매개 변수로 전달할 수 있습니다.

var funA = function(a) { return a * a;};
 
function testParam(func, num) {
    var b = func(num);
    return b;
}
 
console.log(testParam(funA, 4));

위 예제를 보면 testParam 함수의 매개변수에 함수와 숫자를 받게 구현했습니다.

8번 라인을 보면 함수 funA를 넘겨주고 해당 함수가 testParam에서 받아

잘 실행됨을 확인할 수 있습니다.

값은 4 * 4로 16이 출력된답니다.

 

함수 표현식

앞에서 설명한 함수 선언은 일반적으로 함수를 선언할 때 사용합니다.

그런데 자바스크립트에서는 함수를 변수처럼 선언해서 사용할 수 있는데요.

함수 표현식으로 불립니다.

특이한 점은 함수에 이름이 없어도 된답니다.

익명 함수라고 합니다. function 다음에 함수 이름을 지정하지 않거든요.

그런데 이름을 지정할 수 도 있답니다.

함수 내에서 재귀로 자신을 다시 호출해서 참조하고 싶을 때 사용합니다.

함수 표현식은 위 예제에서도 사용했습니다. funA.

바로 인자로 넘기는 경우 사용한다는 것이지요. 간단한 익명 함수 표현식의 예를 보겠습니다.

var addNum = function (num1, num2) {
    return num1 + num2;
};
console.log(addNum(3, 4));

익명 함수를 만들었습니다.

addNum에 담겼으며 num1, num2 매개변수(인수)가 지정되었네요.

그리고 결과로 인수로 받은 두 값을 더하고 있습니다.

결과는 3 + 4를 계산해서 7을 출력하게 됩니다.

 

마치면서.

이번 포스팅은 여기서 마치겠습니다.

자바스크립트에서 함수는 정말 중요한 역할을 담당합니다.

함수형 자바스크립트라는 책이 출판될 정도면 아시겠지요?

그래서 다음 포스팅도 함수에 대한 이야기를 더 하려고 합니다.정말 재미있고 중요한 자바스크립트 함수 이야기다음 편에 만나요~.