JavaScript 함수

JavaScript 함수는 특정 작업을 수행하는 코드 블록으로 설계되었습니다。

JavaScript 함수는 어떤 코드가 그것을 호출할 때 실행됩니다。

예제

function myFunction(p1, p2) {
    return p1 * p2;              // 이 함수는 p1과 p2의 곱을 반환합니다
}

직접 시도해보세요

JavaScript 함수 문법을 통해

JavaScript 함수는 function 키워드로 정의되며 그 뒤에는함수 이름밑줄()와 함께。

함수 이름은 문자, 숫자, 밑줄 및 달러 기호를 포함할 수 있습니다（변수 이름의 규칙과 동일합니다）。

띄어쓰기 기호로 구분된 매개변수를 포함할 수 있습니다：

(매개변수 1, 매개변수 2, ...)

함수에서 실행되는 코드는 괄호로 감싸여 있습니다：{}

function name(매개변수 1, 매개변수 2, 매개변수 3) {
    수행할 코드
}

함수 매개변수（Function parameters）함수 정의 내에 나열된 이름입니다。

함수 매개변수（Function arguments）함수를 호출할 때 함수가 받는 실제값。

함수 내에서, 매개변수는 로컬 변수입니다。

다른 프로그래밍 언어에서는 함수는 프로그램(Procedure) 또는 서브 프로그램(Subroutine)에 가깝습니다。

함수 호출

함수 내의 코드는 다른 코드가 함수를 호출할 때 실행됩니다：

  • 이벤트가 발생할 때(사용자가 버튼을 클릭할 때)
  • JavaScript 코드가 호출될 때
  • 자동적인(자기 호출)

이 튜토리얼에서 함수 호출에 대해 더 많은 것을 배울 수 있습니다。

함수 반환

JavaScript가 다다를 때 return 문장에서 "반환"됩니다。

함수가 특정 문장에 호출되면, JavaScript는 호출 문장 후에 실행 코드를 "반환"합니다。

함수는 일반적으로 다음을 계산합니다반환 값이 반환 값은 호출자에게 반환됩니다：

예제

두 수의 곱을 계산하고 결과를 반환하십시오：

var x = myFunction(7, 8);        // 함수 호출, 반환 값을 x에 할당
function myFunction(a, b) {
    return a * b;                // 함수는 a와 b의 곱을 반환합니다
}

x의 결과는 다음과 같을 것입니다：

56

직접 시도해보세요

함수를 사용하는 이유는 무엇인가요?

코드를 재사용할 수 있습니다: 코드를 한 번만 정의하면 여러 번 사용할 수 있습니다。

같은 함수에 대해 다른 매개변수를 여러 번 전달하여 다른 결과를 생성할 수 있습니다。

예제

화씨 온도를 섭씨 온도로 변환하십시오：

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

직접 시도해보세요

() 연산자가 함수 호출을 수행합니다

위의 예제를 사용하여,toCelsius 참조는 함수 객체이며, toCelsius() 참조는 함수 결과입니다。

예제

()가 없는 함수에 접근하면 함수 정의를 반환합니다：

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

직접 시도해보세요

변수 값으로 사용되는 함수

함수의 사용 방법은 변수와 동일하며, 모든 유형의 방정식, 할당 및 계산에서 사용됩니다。

예제

함수의 값을 저장하는 변수 사용

var x = toCelsius(77);
var text = "The temperature is " + x + " Celsius";

함수를 변수 값으로 직접 사용할 수 있습니다：

var text = "The temperature is " + toCelsius(77) + " Celsius";

직접 시도해보세요

이 튜토리얼에서 함수에 대해 더 많은 것을 배울 수 있습니다。

지역 변수

JavaScript 함수에서 선언된 변수는 함수의지역 변수。

지역 변수는 함수 내에서만 접근할 수 있습니다。

예제

// 이 부분의 코드는 carName을 사용할 수 없습니다
function myFunction() {
    var carName = "Volvo";
    // 이 부분의 코드는 carName을 사용할 수 있습니다
}
// 이 부분의 코드는 carName을 사용할 수 없습니다

직접 시도해보세요

지역 변수는 해당 함수만이 인식하므로, 다른 함수에서 같은 이름의 변수를 사용할 수 있습니다.

지역 변수는 함수 시작 시 생성되고, 함수가 완료되면 제거됩니다.

학습서

더 많은 정보를 원하시면 JavaScript 함수자세한 내용은 JavaScript 고급 강의에서 관련 내용을 읽어보세요:

ECMAScript 함수 요약
이 절에서는 함수 개념을 설명하고, ECMAScript가 함수를 선언하고 호출하는 방법, 그리고 함수가 값을 반환하는 방법을 설명합니다.
ECMAScript arguments 객체
이 절에서는 이 객체의 기본 사용법을 소개하고, length 속성을 사용하여 함수의 매개변수 수를 측정하고, 함수 오버로드를 모의하는 방법을 설명합니다.
ECMAScript Function 객체(클래스)
이 절에서는 Function 클래스를 사용하여 함수를 생성하는 방법을 설명하고, Function 객체의 속성과 메서드를 소개합니다.
ECMAScript 클로저(clousure)
이 절에서는 클로저(clousure) 개념을 설명하고, 간단하고 약간 복잡한 두 가지 클로저 예제를 보여드립니다.