[JS] 함수 선언문 (Function Statement)
- Archive2/WEB
- 2022. 3. 4.
* 개인적인 공부 내용을 기록하는 용도로 작성한 글 이기에 잘못된 내용을 포함하고 있을 수 있습니다.
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 |