자바스크립트 튜토리얼 - 5 [함수]

함수는 프로그래밍 언어마다 함수 혹은 메서드라는 용어로 사용되고, 그 의미와 용도는 모두 동일하다.

함수란?

프로그래밍 언어에서 특정 작업을 여러번 반복해야하는 경우 해당 작업을 재사용 가능한 구조로 만든것을 함수라고한다. 함수는 특정 기능을 수행하는 코드 블록을 하나의 실행 단위로 만든것이다.

function sum(p1, p2){
	let sum = p1 + p2;
    return sum;
}

function[함수키워드] sum[함수명] (파라미터|입력값){
    return sum; [반환값]
}

함수를 이루는 요소

• 함수 선언키워드 function
• 함수명
• 입력 파라미터 (옵션)
• 코드블록
• 반환값 (옵션)

함수가 정의 되었다고 자동으로 실행되는 것이 아니라 함수명을 사용해서 호출했을떄 실행된다. 함수를 호출하는 방법은 다음과 같다.

let sum1 = sum(21, 24)

함수명을 사용해서 입력 파라미터에 대응되는 인수(arguments)를 전달하면, 함수에 작성된 코드 블록이 실행되고 그 결과를 반환하게 된다.

function sum(p1, p2) {
	//함수 선언
	let sum = p1 + p2;
	return sum;
}

let sum1 = sum(21, 24); //함수 호출
let sum2 = sum(7, 16); //함수 호출

함수표현식

함수 표현식은 변수에 함수를 할당해서 사용하는 방식이다.

let sum = function(p1, p2){
	return p1+p2
}

이렇게 함수를 선언하면 함수를 호출할떄 변수명을 사용하면 된다.

let sum = function(p1, p2){
	return p1+p2
}
let sum1 = sum(21, 24);
let sum2 = sum(7, 16);

언뜻 보기에는 두 방식이 차이가 없는 것처럼 보이지만 실행 측면에서 큰차이가 있다. 일반적인 함수 선언 방식의 경우 다음과 같이 함수 호출 코드가 먼저 나오고 함수 선언이 나중에 되더라도 함수가 정상적으로 실행된다.

let sum1 = sum(21, 24);
let sum2 = sum(7, 16);

function sum (p1, p2){
	return p1+p2;
}

이렇게 정상 실행되는 이유는 자바스크립트 엔진이 일반적인 함수 방식으로 선언된 함수를 먼저 해석하기 때문에 호출하는 구문이 위에 있어도 실행 되는 것이다.

하지만 변수에 함수를 할당하는 방식은 순서대로 실행된다. 함수를 담고 있는 변수에 대한 코드 구문이 함수를 호출하는 코드 구문보다 위에 있을 경우 에러가 발생한다.

let sum1 = sum(21, 24); //함수 호출 에러 발생
let sum2 = sum(7, 16); //함수 호출 에러 발생

let sum = function(p1, p2){
	return p1+p2
}

함수를 사용하는 이유

함수를 사용해서 특정기능을 하는 코드 블록 작성하면 해당함수가 갖는 기능이 필요할때마다 호출만 하면 해당기능을 사용할수 있는 장점이 있다. 같은 코드를 중복으로 여러번 작성할 필요없이 코드를 재사용할수 있게 된다.

또, 코드를 수정해야할일이 생겼을때 해당함수만 수정하면 함수를 호출해 사용하는 모든 곳에 반영시킬 수 있기 때문에 유지보수의 편의성을 높일 수 있다. 뿐만 아니라 코드가 기능별로 함수라는 하나의 코드블록으로 모여 있기 때문에 프로그램을 이해할 수 있는 가독성이 높아진다.

• 코드의 재활용
• 유지보수 편의성
• 코드 가독성 향상
• 코드 품질 향상 및 신뢰성 확보

부가세 계산 프로그램 예제

부가세를 계산해서 보여주는 화면이 3개 있다고 가정했을때, 자바스크립트 코드를 동일한 로직으로 구현하게 된다.

화면1

let salesPrice = 10000; //매출
let vat = 0.1; //부가세 10%
let tax = salesPrice * vat //세금

화면2

let salesPrice = 24000; //매출
let vat = 0.1; //부가세 10%
let tax = salesPrice * vat //세금

화면3

let salesPrice = 94000; //매출
let vat = 0.1; //부가세 10%
let tax = salesPrice * vat //세금

프로그램이 정상 작동되고 아무 문제 없이 부가세가 정확히 계산되고있다. 그런데 어느날 법이 바뀌어서 부가세가 10%에서 12%로 인상되었다. 위 코드 대로라면 화면 3개에 대한 각 코드를 모두 수정해야한다.

하지만 다음과 같이 함수로 작성하면 부가세를 보여줘야하는 모든 화면에서 이 함수를 호출하게 되며 부가세가 10%에서 12%로 변경되더라도 함수 내부 로직만 수정하면 되기때문에 부가세 계산 함수를 일일이 찾아서 수정할 필요가 없다.

function calcultateTax(salesPrice){
	let vat = 0.1; //부가세 10%;
    let tax = salesPrice * vat;
    return tax;
}

부가세 계산이 필요한 화면에서는 calcultateTax함수를 호출하면서 파라미터로 매출액만 전달하면 된다.

let tax calcultateTax(100000) //매출액 100000원 파라미터로 전달

부가세가 10%에서 12%로 인상되었다면 다음과 같이 부가세 부분만 변경하면 함수를 호출하는 모든 화면에 자동으로 반영된다.

function calcultateTax(salesPrice){
	let vat = 0.12; //부가세 10%에서 12%로 변경;
    let tax = salesPrice * vat;
    return tax;
}

조건문을 조합한 두 수의 더하기/빼기/곱하기/나누기 함수 구현

function calculator(n1, n2, operator) {
    if (operator == "+") {
		return add(n1, n2);
    } else if (operator == "-") {
        return minus(n1, n2);
    } else if (operator == "*") {
        return multiple(n1, n2);
    else if (operator == "/") {
        return divide(n1, n2);
	}
}

let plus = calculator(5,7,"+");
console.log(plus) //12

let minus = calculator(5,7,"-");
console.log(minus) //2

let multiple = calculator(5,7,"*");
console.log(multiple) //35

let divide = calculator(5,7,"/");
console.log(divide) //5

함수는 결국 전체 프로그램을 특정 목적(기능)단위로 잘게 나누고 이를 모듈화하여 관리할수 있게 해준다. 반복적으로 사용되는 함수들을 모아 놓은것을 공통 함수 혹은 공통 모듈이라고 한다.

함수가 잘 설계되어 있다면 예상치 못한 변경 사항이 발생하더라도 전체 애플리케이션에 별다른 영향을 주지 않고 관련 함수만 수정하여 변경 사항을 빠르고 쉽게 반영할수 있다.