함수

함수

함수는 프로그램에서 반복적으로 사용되는 기능을 만들 어내 위한 코드들의 집합입니다.

분류	매서드	설명
사용자 정의 함수	• 선언적 함수 • 익명 함수	프로그램에서 필요한 기능을 사용자가 직접 정의해서 사용하는 함수입니다.
내장 함수	• 인코딩, 디코딩 함수 • 숫자 판별 함수 • 유,무한 값 판별 함수 • 숫자변환 함수 • 문자변환 함수 • 자바스크립트 코드 변경 함수	프로그램 개발에서 자주 사용되는 기능들을 자바스크립트 내부적으로 제공해주는 함수입니다.

---

01. 선언적 함수

선언적 함수는 모든 함수의 기본 형태가 되는 함수입니다.

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

결과 확인하기

02. 익명 함수

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

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

결과 확인하기

03. 매개변수 함수

매개변수 함수는 매개변수를 사용하는 함수입니다.

※ 매개변수 : 함수를 호출할 때 전달하는 변수로 'str'로 표기합니다.

{
    function func(str){     //str : 매개변수, 인자
        document.write(str);
    }
    func("함수가 실행되었습니다.");
}

결과 확인하기

04. 리턴값 함수

리턴값 함수는 'return'에 결과값을 저장하여 반환 시키는 함수로 리엑트에서 자주 쓰입니다.

※ return : 함수를 통해 처리된 결과를 반환시켜주는 명령어로 함수 안에서 return을 만나게 되면 해당 함수를 호출한 곳으로 결과 데이터를 반환해 주고 함수는 종료가 됩니다.

{
    function func(){
        const str = "함수가 실행되었습니다.";
        return str;
    }
    document.write(func()); //리턴값이 있기 때문에 실행문 안에 func()를 넣어도 출력이 된다.
}

결과 확인하기

---

화살표 함수

화살표 함수는 ECMAscript6에 추가된 함수로 '=>'를 이용하여 함수를 간결하에 표현할 수 있습니다.
또한 단일 명령문일 경우에는 함수의 중괄호{}와 return을 생략할 수 있습니다.

따라서 일반 함수와 화살표 함수를 서로 바꿀 수 있어야 합니다.

05. 선언적 함수 <=> 화살표 함수

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

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

    func = () => document.write("함수가 실행되었습니다.");
    func();
}

결과 확인하기

06. 익명 함수 <=> 화살표 함수

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

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

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

결과 확인하기

07. 매개변수 함수 <=> 화살표 함수

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

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

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

    func = str => document.write(str);  //변수가 하나일떈 괄호 마저 생략 가능
    func("함수가 실행되었습니다.");
}

결과 확인하기

08. 리턴값 함수 <=> 화살표 함수

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

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

결과 확인하기

09. 화살표 함수 응용

여러개의 함수를 복합적으로 사용하여 나타낼 수 있습니다.

//화살표 함수 : 익명함수 + 매개변수 + 리턴값
{
    const func = (str) => {
        return str;
    }
    document.write(func("함수가 실행되었습니다."));
}
 

//화살표 함수 : 익명함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴 생략
{
    const func = str => {   //변수가 하나일 때 괄호 생략 가능
        return str;
    }
    document.write(func("함수가 실행되었습니다."));
}

//화살표 함수 : 익명함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴 생략
{
    const func = str => str;
    
    document.write(func("함수가 실행되었습니다."));
}

//12. 화살표 함수 : 선언적 함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴 생략
{
    func = str => str;  //익명 함수에서 const까지 생략해버림
    
    document.write(func("함수가 실행되었습니다."));
}

결과 확인하기