자바스크립트 함수(Function)

이번에는 자바스크립트에서 중요하게 사용되는 함수에 대해서 알아보도록 하겠습니다.

 

함수란?

자바스크립트에서 함수는 특정 작업을 수행하도록 설계된 코드블록을 말합니다.

그리고 이 함수는 호출되었을 때 자신이 가진 내용을 수행하게 됩니다.

 

function myFunction(p1, p2) {
  return p1 * p2;   // 해당 함수는 인자로 받은 p1, p2에 대한 곱셈값을 반환합니다.
}

위의 코드에서 구현한 myFunction 이라는 함수의 경우 p1과 p2라는 2개의 인자를 받아서 이 둘의 곱을 반환합니다.

즉, 입력받은 2개의 인자에 대한 곱셈값 반환. 이것이 함수 myFunction의 기능이 됩니다.

 

 

함수를 정의하는 방법

자바스크립트에서는 함수를 정의할 때 function 이라는 키워드를 사용합니다.

function function_name(parameter1, parameter2, parameter3) {
  // 함수가 가지는 기능(함수 호출 시 실행할 코드)
}

위와 같이 function 키워드, 함수 이름, 인자, 그리고 실행코드를 기술하는 구조로 함수를 정의할 수 있습니다. 정의하는 방법만 다를 뿐 그 이외의 내용들은 다른 프로그래밍 언어의 함수와 거의 동일합니다. 해당 구조를 파악한 후에 위에 첫번째 예시로 제시한 myFunction 함수의 정의를 살펴보면 그 구조가 이해될 것입니다.

 

 

함수의 반환

함수가 호출되고 함수의 코드를 실행하다가 return을 만나게 되면 함수의 실행이 중지됩니다.

그리고 이 함수가 내부적으로 코드를 실행하면서 얻은 반환값을 호출지점으로 반환하게 됩니다.

var x = myFunction(4, 3);   // myFunction(3, 4)에 대한 반환값 12가 변수 x에 할당됩니다.

function myFunction(a, b) {
  return a * b;             // 해당 함수가 a * b의 값을 반환합니다.
}

그래서 위의 코드의 경우 myFunction에 인자로 3과 4를 전달한 결과 즉, 반환값 12가 변수 x에 할당됩니다.

 

 

함수를 정의해서 사용하는 이유

이와 같이 함수를 정의하고, 인자전달, 반환값 저장 이라는 과정을 통해서 함수를 이용하는 이유는 무엇일까요?

함수를 정의해서 사용함으로서 특정한 기능을 분리해서 구현할 수 있고 이 기능을 단지 함수를 호출함으로서

사용할 수 있기 때문에 코드 재사용을 통한 코드라인수를 줄일 수 있다는 장점이 있습니다.

그렇기 때문에 구현해야하는 기능이 코드라인 수가 많거나, 여러번 반복해서 사용해야하는 기능이라면

함수로 구현해서 사용하는 것이 여러가지 측면에서 좋습니다.

 

 

 ( ) 없이 함수의 이름만으로 호출하는 경우

function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius;

위의 코드를 보면 정의되어 있는 toCelsius라는 함수를 ( )를 통한 인자전달 없이 그냥 함수 이름인 toCelsius만 적어서 호출하는 것을

볼 수 있습니다. 위와 같이 함수를 호출하는 경우 함수는 자신의 코드를 수행해 얻은 반환값을 반환하는 대신 함수 객체를 반환하게 됩니다.

즉, 자신의 정의에 대한 내용을 반하게 됩니다.

실제로 위의 코드를 실행하면 아래와 같이 함수의 정의내용이 출력되는 것을 확인할 수 있습니다.