본문 바로가기
HTML, CSS, JavaScript/자바스크립트

함수(함수 선언, 함수 표현식, 재귀함수)

by JDI_ 2022. 6. 29.

프로그래밍의 함수는 수학의 함수와 비슷한 것 같지만 좀 다르다 

 

수학에서의 함수는 하나의 값에 하나의 결과가 나오지만

프로그래밍에서는 함수에 반환값이 없을 수도 있고, 하나의 값을 넣고 여러 개의 결과를 얻을 수도 있기 때문이다.

 

일단 찾아본 함수의 정의는 이렇다.

"함수, 서브루틴, 루틴, 메서드, 프로시져는 소프트웨어에서 특정 동작을 수행하는 일정 코드 부분을 의미한다."-(위키)

"함수는 작업을 수행하거나 값을 계산하는 문장 집합 같은 자바스크립트 절차입니다."-(MDN)

"함수란 자신의 외부(재귀 함수의 경우 스스로) 코드가 '호출'할 수 있는 하위 프로그램입니다. 프로그램과 마찬가지로, 함수  역시 명령문의 시퀀스로 구성된 함수 본문을 가집니다. 함수에 값을 '전달'하면, 함수는 값을 '반환'할 것입니다."-(MDN)

 

서브루틴이니 뭐니 아직 모르는 용어가 있지만 

일단 함수는 "특정 동작을 수행하도록 하는 코드 덩어리"인 것 같다.

그리고 함수를 사용하려면 함수를 '호출' 해야한다.

 

어떤 게 필요할까, 모든 게 필수적인 것은 아니다.

1. 함수의 이름 (불러야 하니까)  -> 이름을 생략하면 '익명 함수'가 된다.

2. 함수의 내용 (특정 동작을 수행해야 하니까)

3. 함수가 받아들이는 값 (매개변수)

4. 함수를 불러와서 실제로 주는 값 (인수)

5. 함수의 반환값 (return 값)

 

 

함수를 쓰는 방법은 여러 개가 있다.

 

함수 선언 : 지정된 매개변수를 갖는 함수를 정의한다.

function 함수이름(매개변수1, 매개변수2..){
	함수내용;
    return 반환값;
}

 

함수 표현식 : 어떤 표현식 내에서 함수를 정의하는데 사용한다. 변수에 할당하는 것처럼 사용할 수 있어서 다른 함수의 매개변수로 쓰거나, 함수 자신을 참조하는데 쓸 수 있고, 디버거 내 스택 추적에서 함수를 식별하는데 쓸 수 있다.

var myFunction = function 함수이름(매개변수1, 매개변수2..){ 
	함수내용};

 

예시) 일반적인 함수 표현식

var square = function(number) { return number * number };
var x = square(4) // x의 값은 16이 된다.

//함수의 이름은 없고 number를 매개변수로 받고 들어온 number값을 number로 곱한 값을 반환한다.

 

예시) 함수 자신을 참조 - 재귀 함수

var factorial = function fac(n) { return n < 2 ? 1: n*fac(n-1) };
//fac이름을 붙인 함수, n을 매개변수로 받는다. n이 2보다 작은 경우 1을, 큰 경우 fac 자신을 불러온다.
console.log(factorial(3));
// 3*fac(3-1) -> 3*fac(2)
// 3*2*fac(2-1) -> 3*2*fac(1) 
// fac(1)은 n < 2 를 만족하니까 1이 된다.
// 그래서 factorial(3)은 3*2*1 로 6이 된다.

 

예시) 다른 함수의 매개변수로 전달

함수 표현식으로 정의된 함수를  매개변수로 받아서 2번째 인자인 배열의 모든 요소에 그 함수를 실행한다.

function map(f, a){ //함수 map의 첫번째 매개변수인 f는 함수
	var result = []; //result라는 빈 배열을 만들었다.
    var	i; // for문의 변수 i 생성
    for(i = 0; i != a.length; i++)
    	result[i] = f(a[i]); //for 문의 내용이 한줄이라 {}를 생략했다.
        //f(a[i])로 두번째 매개변수인 배열에 첫번째 매개변수인 함수를 적용해서 배열 result에 저장한다.
        return result;
        //그렇게 a배열에 f함수를 적용한 새로운 배열 result를 반환한다.
}

var f = function(x) {
	return x * x * x; // 들어온 값을 3번 곱하는 함수를 f에 할당
}

var numbers = [0, 1, 2, 5, 10]; //배열 numbers 생성
var cube = map (f, numbers); // numbers배열에 f함수를 적용한 결과를 cube에 저장
console.log(cube); //cube를 출력

// [0, 1, 8, 125, 1000]를 반환한다

 

 

 

참고 : https://ko.wikipedia.org/wiki/%ED%95%A8%EC%88%98_(%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D) 

참고 : https://ko.javascript.info/function-basics

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Functions#%ED%95%A8%EC%88%98_%EC%A0%95%EC%9D%98

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions

'HTML, CSS, JavaScript > 자바스크립트' 카테고리의 다른 글

객체  (0) 2022.06.30
화살표 함수 기본  (0) 2022.06.30
반복문 (break, continue 레이블)  (0) 2022.06.29
반복문 (for, while, do-while)  (0) 2022.06.29
nullish 병합 연산자 ??  (0) 2022.06.28

댓글