[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를 리턴한다.

반응형

'📁 Archive > 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