[007] 자바스크립트 (JavaScript) - 핵심요약(함수 - Function)

안녕하세요~ totally 개발자입니다.

 

function (함수)

 

오늘 다룰 부분은 function(함수)입니다. 이 함수는 프로그래밍에서 대단히 중요한 개념으로 어떤 특정한 작업을 수행하는 코드 블록이며 주로 같은 작업을 반복하는 경우에 많이 사용됩니다. 이 함수의 특징에서는 인자(argument 혹은 parameter)라고 하는 요소들을 받을 수 있으며 return을 사용하여 함수의 결과를 내보낼 수 있습니다. 바로 예제로 들어가보도록 하겠습니다.

 

function addTwoNumbers(a, b) {
	return a + b;
}

먼저 위에 있는 첫 번째 예시를 보시면 function 뒤에 addTwoNumbers라는 맞춤 함수 이름을 지정할 수 있고 a, b라는 매개변수(인자) 2개를 받는 것을 확인할 수 있습니다. 이 변수 이름은 임의로 지정하시면 되나 가능하면 기존의 변수와 겹치지 않는 이름으로 지정하시는 것이 좋습니다. 그 밑에 return a + b;를 확인할 수 있는데 이 뜻은 a + b를 더한 값을 return하라는 의미로 연산을 먼저 수행한 후 이 값을 반환하게 됩니다. 그러면 이 함수를 어떻게 사용할 수 있을까요? 아래 예제를 확인해보도록 하겠습니다.

 

function addTwoNumbers(a, b) {
	return a + b;
}

let number1 = 10;
let number2 = 20;
const sum = addTwoNumbers(number1, number2);
console.log(sum);

아래에 number1, number2를 addTwoNumbers의 함수로 전달하면 이 number1이 a, number2가 b의 인자 요소로 전달되어 함수에서 연산을 수행하여 이 2개의 값을 더한 결과를 반환하여 const sum의 변수에 저장하게 됩니다. 이 원리를 이해하는 것이 상당히 중요합니다. 다른 방식으로 선언하는 것도 같이 보시겠습니다.

 

const addTwoNumbers = (a, b) => a + b;

console.log(addTwoNumbers(10, 20));

ES6 도입 이후 위처럼 쓰는 경우도 많기 때문에 위의 방식도 알아두시면 매우 유용하며 function 키워드 없이 const addTwoNumbers = (a, b) => a + b; 형태로도 가능합니다. => a + b를 사용하면 return a + b;와 동일하게 사용할 수 있습니다.

 

 

The Function Constructor (Function 생성자)

 

이 Function 생성자는 function을 직접 선언하여 생성하는 것으로 이런 방식도 있다는 것을 알고 계시면 되며 굳이 이 방법을 사용할 필요 없이 대체로 위에서 설명한 방법을 사용하시면 됩니다. 바로 예제를 보겠습니다.

 

const functionExample = new Function("a", "b", "return a + b");

console.log(functionExample(10, 20));

이렇게 Function 생성자를 사용하여 함수를 만들어 호출할 수 있는 방법이 있다는 정도만 알고 계시면 됩니다.

 

 

The Anonymous Self-invoking Functions(자기호출익명함수), Recursion Function(재귀 함수)

 

지금까지 살펴본 예제에서는 함수를 선언하여 그 함수를 호출하여 사용하였습니다. 하지만 self-invoking functions(자기호출익명함수)를 사용하면 호출 없이 함수를 바로 실행하여 활용할 수 있습니다. 바로 예제를 살펴보도록 하겠습니다.

 

(function(a, b) {
	return a + b;
})(10, 20);

형태가 조금 다른 것을 바로 알아보실 것으로 생각합니다. 소괄호로 function을 감싸주는 형태이며, 매개변수(인자)를 받을 수 있고 이 자기호출익명함수는 바로 호출 없이 스스로 함수가 실행됩니다. 흔히 알고 계시는 재귀 함수와는 다른 개념으로 재귀 함수는 함수에서 자기 자신을 그대로 참조하여 호출하는 것을 말하며 많이 쓰이는 예제로는 Factorial을 계산할 때 쓰입니다.

 

function factorial(number) {
	if (number === 1) return 1;
    	return n * factorial(number - 1);
}

 factorial 이라는 함수가 있으며 이 함수는 number 인자가 1이 될 때까지 계속하여 factorial 함수를 반복하여 호출하는 재귀 함수입니다. 예를 들어 factorial(3) 이렇게 호출하였을 때 return 3 * factorial(2);가 처음에 호출되며 차례로 return 2 * factorial(1); 마지막으로 number가 이미 1로 인자를 전달 받았기 때문에 1을 최종적으로 반환하여 3 * 2 * 1 = 6이 되는 것을 알 수 있습니다. 함수를 제대로 활용하여 실행시키는 것은 자바스크립트에서 상당히 중요하며 코드를 효율적으로 작성할 수 있는 매우 중요한 문법이기 때문에 반드시 숙지하셔야 합니다.