[JS] 함수 선언문 (Function Statement)

    반응형

    * 개인적인 공부 내용을 기록하는 용도로 작성한 글 이기에 잘못된 내용을 포함하고 있을 수 있습니다.

     

    JavaScript에서 함수를 선언하는 방법은 총 3가지가 존재한다.

    1. 함수 선언문 Function Statement

    2. 함수 표현식 Function Expression

    3. 함수 생성자 Function Constructor

    function fs() { console.log("Function Statement"); } 
    let fe = function() { console.log("Function Expression"); };

    함수 표현식과 함수 생성자는 추후에 따로 정리할 예정이다. 이번 포스팅 에서는 함수 선언문 Function Statement를 이용해 함수를 선언하는 방법에 대해서 정리해 보고자 한다.

     

    #1 함수 선언

    #2 기본값 (default value)

    #3 반환값 (return value)


    #1 함수 선언

    함수 선언문을 이용해 함수를 선언할 때는 function 예약어를 사용한다. 기본적인 선언 형태는 다음과 같다.

    function 함수이름(파라미터1, 파라미터2, ...) {
    	본문내용..(body)
    }

    x, y 인자 두개를 파라미터로 받아와 합을 출력하는 add 함수를 선언해 보았다. 함수는 "함수이름(인자1, 인자2..)" 와 같이 호출한다. 만약 파라미터가 존재하지 않는 함수라면 괄호 안의 숫자는 생략한다.

     // 함수 선언문 방식으로 add 함수 선언
     function add(x, y) {
        console.log(x+y);
    }
    // 함수 실행
    add(10, 20);
    [실행결과] 30

    #2 기본값 (default value)

    만약 파라미터에 아무런 값도 전달해 주지 않으면, "undefined" 자료형으로 초기화된다. text를 파라미터로 받는 showMessage함수에 아무런 값도 전달하지 않고 showMessage함수를 호출하니 "undefined"가 출력된다.  

    function showMessage(text) {
        console.log(text);
    }
    showMessage();
    [실행결과] undefined

     

    기본값(default value)이란 파라미터에 아무런 값도 전달해 주지 않았을 경우 자동으로 초기화 되는 값이다. 기본값은 대입 연산자(=)를 이용해 따로 설정해줄 수 있다.

    function showMessage(text="메세지가 입력되지 않았습니다.") {
        console.log(text);
    }
    showMessage();
    [실행결과] 메세지가 입력되지 않았습니다.

     

    기본값에는 변수 뿐 만 아니라 함수 또한 넣어줄 수 있다.

    function defaultMessage(){
        console.log("defaultMessage() 호출");
    }
    
    function showMessage(text=defaultMessage()){
    
    }
    
    showMessage();
    [실행결과] defaultMessage() 호출

    #3 반환 값 (return value)

    return을 이용하면 함수 호출 시 함수의 특정한 값을 반환 하도록 할 수 있다. 이 때 반환하는 값을 반환 값 (return value) 라고 부른다. return은 함수 내부 어디서든 사용 가능하고, return을 만나면 함수는 그 즉시 종료되고 반환 값을 반환한다. 이 때 반환 값으로 변수 뿐 만 아니라 식(statement)도 넣어 줄 수 있다.

    // 변수를 반환하는 예시
    function addXY(x, y){
        let sum = x + y;
        return sum;
    }
    addXY(10, 20);
    [실행결과] 30
    // 식을 반환하는 예시
    function addXY(x, y){
        return x + y;
    }
    addXY(10, 20);
    [실행결과] 30

     

    만약 반환값을 따로 지정해 주지 않으면 undefined리턴한다.

    function returnNone(){
        return
    }
    returnNone();
    [실행결과] undefined

    # 요약

    1. function 키워드를 이용해 함수를 선언하는 방식을 함수 선언문 (function statement) 방식이라고 부른다.

    2. 파라미터에 값을 전달하지 않을 경우 자동으로 초기화 해 주는 기본 값 (default value)을 설정할 수 있는데, 기본 값으로는 변수 뿐 만 아니라 함수 또한 설정할 수 있다. 

    3. return을 이용하면 함수의 특정 값을 설정할 수 있다. 이 때 반환값을 따로 지정해 주지 않으면 undefined를 리턴한다.

    반응형

    'Archive2 > WEB' 카테고리의 다른 글

    [JS] 익명 함수  (0) 2022.03.05
    [HTML] a 태그 _ 밑줄 제거 / 이미지 링크 / 목차 (앵커)  (0) 2022.03.05
    [JS] var, let, const  (0) 2022.03.04
    [JS] 자료형 개요 (DataType)  (0) 2022.03.03
    [JS] 변수와 상수 (var & const)  (0) 2022.03.03

    댓글

    Designed by JB FACTORY