[JavaScript] 자바스크립트의 함수 - ①기본

안녕하세요. 오늘은 자바스크립트 함수의 기본에 대한 포스팅입니다.

 

JavaScript

함수(function)란?

- 함수(function)란 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록. 
- 이러한 함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있다.

- 자바스크립트에서는 함수도 하나의 타입(datatype)이다. 

  따라서 함수를 변수에 대입하거나, 함수에 프로퍼티를 지정하는 것도 가능하다. 

  또한 자바스크립트에서는 함수가 다른 함수 내에 중첩되어 정의될 수도 있다. 

 

 

---

 

 

함수의 정의

자바스크립트에서 함수의 정의는 function 키워드로 시작된다. 

다음과 같은 구성 요소를 가진다. 

 

1. 함수명 (함수의 이름)

2. 매개변수(parameter) - 괄호 안에 쉼표로 구분됨

3. 실행문 - 중괄호로 둘러싸인 자바스크립트 실행문

 

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

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

 

//add라는 함수명을 가진 함수를 정의함.
function add(x, y){  // x, y 는 add() 함수의 매개변수(parameter).
     document.write(x+y);     // 호출 시 x+y값을 출력함.
}

add(5,10);   // add() 함수에 인수로 5와 10을 전달하여 호출.

//15

 

위의 예제에서 매개변수 x에는 인수 5가, y에는 인수 10이 저장되어 사용된다.

인수와 매개변수는 개수뿐만 아니라 순서 또한 매우 중요하게 적용된다. 

 

 

인수란?   - 함수의 인수(argument)란 함수가 호출될 때 함수로 값을 전달해주는 변수나 상수를 의미한다.

 

---

 

반환(Return)문

자바스크립트 함수는 리턴문을 포함할 수 있다.

반환문을 통해 호출자는 함수에서 실행된 결과를 전달받을 수 있다.

 

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

자바스크립트에서는 타입을 명시해주지 않아도 배열이나 객체를 포함한 모든 타입의 값을 반환할 수 있다.

 

 

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

var addNum = add(10, 5); //15

function makeSentence(str){
    return "나는 " + str +"을(를) 좋아해!";
}

document.write(makeSentence("복숭아")); //나는 복숭아를 좋아해!

위 예제에서 볼 수 있듯이, 자바스크립트는 반환 타입을 지정해주지 않아도 알아서 처리해준다.

 

 

---

 

값으로서의 함수

위에서 언급했듯이, 자바스크립트에서 함수는 문법적인 구문일뿐만 아니라 값(value)이기도 하다.

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

 

 

예제 1) 변수에 함수를 대입

function sqr(x){             //제곱값을 리턴하는 함수 sqr()
    return x*x;
}

var sqrNum = sqr;            //sqrNum라는 변수에 함수를 대입
document.write(sqr(4) + "<br>");     //16
document.write(sqrNum(4));           //16

 

● 주의

function sqr(x){             //제곱값을 리턴하는 함수 sqr()
    return x*x;
}

var sqrNum = sqr;            //sqrNum라는 변수에 함수를 대입
document.write(sqr + "<br>");     // ??
document.write(sqrNum);           //  ??

이 때 위와 같이변수명 sqrNum 뒤에 소괄호를 넣어주지 않을 경우 다음과 같은 결과가 출력된다.

function sqr(x) { sqr() return x * x; }
function sqr(x) { sqr() return x * x; }

함수나, 함수가 대입된 변수나 소괄후를 붙여주지 않으면 위와같이 해당 함수의 정의가 출력된다. 명심하자!

 

---

 

 

예제 2) 함수를 다른 함수의 인수로 전달

function sqr(x){             //제곱값을 리턴하는 함수 sqr()
    return x*x;
}
function add(x,y){           //덧셈을 리턴하는 함수 add()
    return x+y;
}
function print(x){           
    document.write(x + "의 제곱은 " + sqr(x) +"입니다");     //함수 내부에서 함수를 호출
}

 document.write(add(5, sqr(5)) + "<br>");        //add()함수의 인자에서 sqr()함수를 호출
 print(5);