함수 알아보기

함수

함수는 프로그램에서 반복적으로 사용되는 기능을 만들어내기 위한 코드들의 집합입니다. 함수에는 선언적 함수, 익명 함수, 매개변수 함수, 리턴값 함수 등이 있습니다.

---

01. 선언적 함수

선언적 함수란, 함수를 선언한 뒤 호출하여 실행문을 실행시키는 함수입니다.

1. 선언적 함수의 형식

function 함수() {
    실행문;
}
함수명();

2. 예제

function func() {
    document.write("함수가 실행되었습니다.");
}
func();     //함수는 실행문이 있어야 실행된다.

---

02. 익명 함수

익명 함수는 변수에 함수 데이터를 저장하여 변수를 마치 함수처럼 사용합니다. 따라서, 익명 함수는 변수를 먼저 선언한 이후에 함수를 호출해야 합니다.

1. 익명 함수의 형식

var 변수 = function() {
    실행문;
}
변수명();

2. 예제

const func = function() {   //변수는 const, let, var로 선언할 수 있다.
    document.write("함수가 실행되었습니다.");
}
func();

---

03. 매개변수 함수

함수를 호출할 때 전달하는 변수를 '매개변수'라고 합니다. 매개변수 함수는 매개변수를 통해 함수의 실행문을 출력합니다.

1-1. 매개변수 함수의 형식(1)

function 함수명(매개변수1, 2, …) {
    실행문;
}
함수명(매개변수1, 2, …);

1-2. 매개변수 함수의 형식(2)

var 함수명(매개변수1, 2, …) {
    실행문;
}
함수명(매개변수1, 2, …);

1-3. 매개변수 함수의 형식(3)

(function (매개변수1, 2, …) {
    실행문;
}
)(매개변수1, 2, …);

2. 예제

//let str 함수를 원래 선언해야 하지만 생략이 가능함.
function func(str){     //문자열이 들어간다는 의미에서 str을 넣어줌
    document.write(str);
}
func("함수가 실행되었습니다.");

04. 리턴값 함수

return은 함수를 통해 처리된 결과를 반환시켜주는 명령어입니다. 리턴값 함수는 반환된 결과를 출력하는 함수입니다.

1. 리턴값 함수의 형식

function 함수() {
    const 변수명 = 변수 값;
    return 변수명;
}
실행문(함수);

2. 예제

function func(){
    const str = "함수가 실행되었습니다.";
    return str;
}
document.write(func()); //return으로 반환된 결과를 출력함.

---

05. 화살표 함수

화살표 함수는 ES6에 추가된 내용으로, 함수의 function을 생략하고 =과 =>(화살표)를 사용해 함수를 간략하게 표현합니다. 실행문이 하나인 경우, 중괄호와 return을 생략할 수 있습니다.

1. 화살표 함수의 예시 : 선언적 함수의 변환

//원형
function func() {
    document.write("함수가 실행되었습니다.");
}
func();

//화살표 함수
func = () => {  //function을 없애고 =과 화살표로 형태를 바꿈.
    document.write("함수가 실행되었습니다.");
}
func();

//축약형 : 실행문이 하나일 경우, 중괄호도 생략하여 축약할 수 있습니다.
func = () => document.write("함수가 실행되었습니다.");
func();

2. 화살표 함수의 예시 : 익명 함수의 변환

//원형
const func = function() {
    document.write("함수가 실행되었습니다.");
}
func();

//화살표 함수
const func = () => {
    document.write("함수가 실행되었습니다.");
}
func();

//축약형
const func = () => document.write("함수가 실행되었습니다.");
func();

3. 화살표 함수의 예시 : 매개변수 함수의 변환

//원형
function func(str){
    document.write(str);
}
func("함수가 실행되었습니다.");

//화살표 함수
func = (str) => {
    document.write(str);
}
func("함수가 실행되었습니다.");

//축약형
func = (str) => document.write(str);
func("함수가 실행되었습니다.");

//축약형2 : 변수가 하나일 때에는 ()도 생략이 가능함.
func = str => document.write(str);
func("함수가 실행되었습니다.");

4. 화살표 함수의 예시 : 리턴값 함수의 변환

// 원형
function func(){
    const str = "함수가 실행되었습니다.";
    return str;
}
document.write(func());

//화살표함수 (실행문이 두개 이상이기 때문에 중괄호의 생략이 불가능하다.)
func = () => {
    const str = "함수가 실행되었습니다.";
    return str;
}
document.write(func());