자바스크립트를 공부한다면
함수를 공부한다고 해도 과언이 아닐 정도로
함수(function)는 정말 중요하답니다.
자바스크립트 함수란?
자바스크립트의 블록으로 감싼 실행문들을 모은 집합체?라고 생각하면 됩니다.
모듈? 기능집합? 메서드? 등 다양하게 표현할 수 있는데
학교 수학 수업때 배운 함수랑 같은 개념으로 보시면 되겠네요.
함수 선언
함수를 만드는 방법을 알아봅니다.
함수를 만들 때 사용하는 키워드는 다음과 같습니다.
- function + 함수 이름을 지정한다.
- 함수 이름 옆에 괄호를 사용해서 콤마로 구분해서 입력받을 매개변수 목록을 정의한다.
- 다음 중괄호{}를 사용해서 함수의 몸체를 구성한다.
- 몸체에는 원하는 구현문을 코딩한다.
- 결과를 내보내고 싶다면 return문을 사용한다.
위 순서대로 함수를 하나 만들어볼까요?
두 개의 숫자를 입력받아 더한 값을 내보내는 함수를 만들어볼게요.
|
1
2
3
|
function addNumber(num1, num2) {
return num1 + num2;
}
|
cs |
function 뒤에 addNumber로 함수 이름을 정했습니다.
이름은 함수가 어떤 기능을 하는지 누가 봐도 알 수 있는 것으로 자유롭게 만들어주면 됩니다.
기능이기에 동사로 시작하고 명사로 끝나면 좋겠네요.
결합하는 부분은 대문자로 구분해 주세요.
addNumber의 N처럼요.
이제 괄호()를 사용해서 입력받을 값을 콤마로 구분해서 정의해 줍니다.
개수는 상관없지만 꼭 필요한 만큼 만들면 좋겠지요.
숫자 2개를 받기로 정했기에 num1, num2라고 간단하기 매개변수 이름을 지정해봅니다.
이제 입력받을 매개변수를 정했습니다. 다음은 함수 몸체를 만들어봐야겠지요.
함수 몸체는 중괄호{}를 사용해 블록으로 지정해서 함수의 몸체임을 알려줍니다.
{} 안에는 원하는 표현식 등 실행 로직을 구성하면 된답니다.
그리고 결과로 더한 값을 주기 위해 return문을 사용했습니다.
addNumber 함수는 입력받은 두 개의 숫자를 더한 값을 돌려주기로 했기에
return문을 사용하고 num1 + num2 식을 만들었습니다.
한 문장이 끝나면 세미콜론을 붙여주는 건 잊으면 안 되겠지요?
그래서 함수 블록문 (몸체)는 { return num1 + num2; }로 구성했습니다.
축하합니다.
이제 우리는 자바스크립트로 함수를 선언하는 방법을 알게 되었습니다.
좀 더 살펴보기.
하나 더 알아두면 좋은 정보가 있습니다.
우리는 함수에 입력받은 값을 숫자로 지정했습니다.
함수에 전달하는 매개 변수는 자바스크립트 기본형 데이터들도 가능하고
배열, 객체 심지어 함수도 매개 변수로 전달할 수 있습니다.
|
1
2
3
4
5
6
7
8
|
var funA = function(a) { return a * a;};
function testParam(func, num) {
var b = func(num);
return b;
}
console.log(testParam(funA, 4));
|
cs |
위 예제를 보면 testParam 함수의 매개변수에 함수와 숫자를 받게 구현했습니다.
8번 라인을 보면 함수 funA를 넘겨주고 해당 함수가 testParam에서 받아
잘 실행됨을 확인할 수 있습니다.
값은 4 * 4로 16이 출력된답니다.
함수 표현식
앞에서 설명한 함수 선언은 일반적으로 함수를 선언할 때 사용합니다.
그런데 자바스크립트에서는 함수를 변수처럼 선언해서 사용할 수 있는데요.
함수 표현식으로 불립니다.
특이한 점은 함수에 이름이 없어도 된답니다.
익명 함수라고 합니다. function 다음에 함수 이름을 지정하지 않거든요.
그런데 이름을 지정할 수 도 있답니다.
함수 내에서 재귀로 자신을 다시 호출해서 참조하고 싶을 때 사용합니다.
함수 표현식은 위 예제에서도 사용했습니다. funA.
바로 인자로 넘기는 경우 사용한다는 것이지요. 간단한 익명 함수 표현식의 예를 보겠습니다.
|
1
2
3
4
|
var addNum = function (num1, num2) {
return num1 + num2;
};
console.log(addNum(3, 4));
|
cs |
익명 함수를 만들었습니다.
addNum에 담겼으며 num1, num2 매개변수(인수)가 지정되었네요.
그리고 결과로 인수로 받은 두 값을 더하고 있습니다.
결과는 3 + 4를 계산해서 7을 출력하게 됩니다.
마치면서.
이번 포스팅은 여기서 마치겠습니다.
자바스크립트에서 함수는 정말 중요한 역할을 담당합니다.
함수형 자바스크립트라는 책이 출판될 정도면 아시겠지요?
그래서 다음 포스팅도 함수에 대한 이야기를 더 하려고 합니다.정말 재미있고 중요한 자바스크립트 함수 이야기다음 편에 만나요~.
'Software > JavaScript' 카테고리의 다른 글
| [자바스크립트]함수 이야기 3탄 - 함수를 호출하는 방법 (0) | 2022.07.31 |
|---|---|
| [자바스크립트]함수 이야기 2탄 - 매개변수(인수) 값 전달, 참조 전달 (0) | 2022.07.24 |
| [자바스크립트]label문, break문 그리고 continue문이 루프 반복문에서 어떻게 사용 되는가? (0) | 2022.07.10 |
| [자바스크립트]do while문 사용하기 편. (루프와 반복) (0) | 2022.06.27 |
| [자바스크립트]while문 사용하기 편. (루프와 반복) (0) | 2022.06.26 |
