함수의 기초

함수(function)란?

하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록

필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있음

예제

function addNum(x, y) {
    return x + y;
}
document.write(addNum(2, 3));

코딩연습 ▶

블록 - 함수나 실행문의 중괄호({})로 묶여진 부분

---

자바스크립트 함수

하나의 타입(datatype)

함수를 변수에 대입하거나, 함수에 프로퍼티를 지정 가능

다른 함수 내에 중첩되어 정의될 수 있음

---

함수의 정의

function 키워드로 시작

구성요소

1. 함수의 이름

2. 괄호 안에 쉼표(,)로 구분되는 함수의 매개변수(parameter)

3. 중괄호({})로 둘러싸인 자바스크립트 실행문

 

문법

function 함수이름(매개변수1, 매개변수2,...) {
    함수가 호출되었을 때 실행하고자 하는 실행문;
}

함수 이름(function name) - 함수를 구분하는 식별자(identifier)

매개변수(parameter) - 함수를 호출할 때 인수(argument)로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수

 

예제

// addNum라는 이름의 함수를 정의함.
function addNum(x, y) {    // x, y는 이 함수의 매개변수임.
    document.write(x + y);
}
addNum(2, 3);              // addNum() 함수에 인수로 2와 3을 전달하여 호출함.

코딩연습 ▶

위의 예제에서 매개변수 x에는 인수 2가 저장되고, y에는 인수 3이 저장되어 사용됨

이렇게 인수와 매개변수는 개수뿐만 아니라 순서 또한 매우 중요하게 적용됨

 

인수(argument) - 함수가 호출될 때 함수로 값을 전달해주는 변수나 상수

---

반환(return)문

호출자는 함수에서 실행된 결과를 전달받을 수 있음

 

함수의 실행을 중단하고, return 키워드 다음에 명시된 표현식의 값을 호출자에게 반환

배열이나 객체를 포함한 모든 타입의 값을 반환할 수 있음

예제

function multiNum(x, y) {
    return x * y;         // x와 y를 곱한 결과를 반환함.
}
var num = multiNum(3, 4); // multiNum() 함수가 호출된 후, 그 반환값이 변수 num에 저장됨.
document.write(num);

코딩연습 ▶

---

함수의 호출

정의된 함수는 프로그램 내에서 호출되어야 비로소 실행

일반적인 함수의 호출은 함수의 정의문과 같은 형태로 호출할 수 있음

함수의 정의

function addNum(x, y) {
    return x + y;
}

함수의 호출

var sum = addNum(3, 5); // 함수 addNum()을 호출하면서, 인수로 3과 5를 전달합니다.
                        // 함수의 호출이 끝난 뒤에는 그 반환값을 변수 sum에 대입합니다.

---

값으로서의 함수

함수는 문법적 구문일뿐만 아니라 값(value)이기도 함

함수가 변수에 대입될 수도 있으며, 다른 함수의 인수로 전달될 수도 있음

 

예제

함수를 변수에 저장하여 사용

function sqr(x) {                // 제곱의 값을 구하는 함수 sqr를 정의함.
    return x * x;
}
var sqrNum = sqr;                // 변수 sqrNum에 함수 sqr을 대입함.
document.write(sqr(4) + "<br>"); // 함수 sqr을 호출함.
document.write(sqrNum(4));       // 변수 sqrNum를 함수처럼 호출함.

코딩연습 ▶

---

참고

http://www.tcpschool.com/javascript/js_function_basic

코딩교육 티씨피스쿨