자바스크립트 - 함수

 

 

오늘은 함수에 대해서 알아보자!

 

함수란?

function 하나의 로직을 재실행할 수 있도록 하는 것으로 코드의 재사용성을 높여준다.

 

 

그렇다면 함수의 정의와 호출을 어떻게 할까?

 

 

함수는 function 뒤에 함수의 이름이 오고, 소괄호가 따라온다.

소괄호에 인자하는 값이 차례로 들어오는데 이 값은 함수를 호출할 때 함수의 로직으로 전달될 변수이다.

또, 인자는 생략할 수 있고, 함수를 호출했을 때 실행하게 될 부분이 중괄호 안쪽에 온다.

function fun(){ // 함수 정의
    i = 0;
    while(i < 10){
        document.write(i);
        i += 1;
    }   
}
fun(); // fun이라는 이름의 함수가 호출

 

함수는 입력과 출력을 어떻게 할까?

바로 return과 인자를 통해서 할 수 있다.

→ 함수의 핵심은 입력과 출력이다.

입력된 값을 연산해서 출력하는 것이 함수의 기본적인 역할이다. 

 

우선 return에 대해 알아보자.

 

함수 내에서 사용한 return은 return 뒤에 따라오는 값을 함수의 결과로 반환하고,

동시에 함수를 종료시킨다. 

function get_text1(){
    return 'Hello';
}
 
function get_text2(){
    return 'world!';
}
 
alert(get_text1()); // Hello를 반환
alert(get_text2()); // world!를 반환

return은 결과를 반환하는 것 외에 함수를 중지시키는 역할도 한다. 

function text(){
    return 'Hello';
    return 'every';
    return 'one';
}
alert(text()); // 결과 : Hello

'every'와 'one'은 출력하지 않았다.

왜 그럴까? 그것은 return 'Hello';을 실행한 후에 함수가 종료되었기 때문이다.

 

인자에 대해 알아보자!

 

인자란?

인자(argument)는 함수로 유입되는 입력 값을 의미하는데, 어떤 값을 인자로 전달하느냐에 따라서 함수가 반환하는 값이나 메소드의 동작방법을 다르게 할 수 있다.

function get_argument(arg){
    return arg;
}
 
alert(get_argument(1)); // 인자 arg에 1이 전달됨.
alert(get_argument(2)); // 인자 arg에 2가 전달됨.

 

또 복수 인자는 어떻게 처리할까?

function add(arg1, arg2){
    return arg1 + arg2
}
 
alert(add(10, 20)); // arg1에 10이 전달, arg2에 20이 전달됨.
alert(add(20, 30)); // arg1에 20이 전달, arg2에 30이 전달됨.

 

 

또, 함수를 정의하는 또 다른 방법!

var fun = function (){
    i = 0;
    while(i < 10){
        document.write(i);
        i += 1;
    }   
}
fun(); // 위에서 선언한 함수 선언과 기능은 같지만 선언 방식만 다름.

(function (){
    i = 0;
    while(i < 10){
        document.write(i);
        i += 1;
    }   
})(); // 이러한 것을 익명함수라 한다.