2024.09.11 (Day 7) -JavaScript Function

함수

• 함수는 하나의 관련된 업무를 실행하기 위한 코드들을 묶기 위해서 선언되는 프로그램의 구성요소이다

각 업무가 각각의 함수로 구분되어 작성됨으로 코드를 작성하기도 편하고 나중에 필요한 부분의 코드를 식별해서 분석하거나 실행시키기에도 편하다.

 

• 함수를 메서드라 부르기도 하고 혼용되어 사용되기는 하지만 두 용어에는 엄밀히 이야기하면 차이가 있다.

함수는 영어 단어로 function 즉 기능이라는 뜻의 단어이며 함수내에 작성된 기능에 초점을 맞춘 단어이다.

그런데 클래스내에 함수가 선언될 수도 있는데 이 클래스에 선언된 함수를 메서드라고 부르기도 한다.

메서드는 영어 단어로 method, 즉 수단이라는 뜻이며 함수이지만 클래스내에 선언되어 있어

그 클래스를 이용하는 수단으로 본다는 측면의 용어이다.

정리하자면 모두 동일한 규칙으로 작성된 함수인데 클래스 내에 선언된 함수를 메서드라 부르기도 한다.

 

▷ 선언과 이용

• 함수를 선언하기 위해서는 function 이라는 예약어를 이용.

• 이름 뒤에 ( ) 가 추가되어야 하며 함수의 Body 부분을 { } 로 묶음

• 선언된 함수는 어디선가 그 함수를 호출해야 실행된다. 함수 호출은 '함수이름( )' 형태임.

 

    //test1 함수 선언 및 이용
    console.log('step1');
    //아래는 함수의 선언구문이지 실행구문이 아니다.
    //선언 자체로 함수의 body가 실행되지는 않는다
    //어디선가 이 함수의 호출해야 실행된다.
    function myFun1() {
        console.log('execute function body');
    }
    console.log('step2');

호출 전

 

    //test1 함수 선언 및 이용
    console.log('step1');
    //아래는 함수의 선언구문이지 실행구문이 아니다.
    //선언 자체로 함수의 body가 실행되지는 않는다
    //어디선가 이 함수의 호출해야 실행된다.
    function myFun1() {
        console.log('execute function body');
    }
    console.log('step2');
    
    //함수가 호출이 되면 함수부분이 모두 실행이 끝나야 밑줄이 실행된다
    myFun1() //함수호출
    console.log('step3');

 

호출 후

 

    console.log('step1');
    function myFun1() {
        console.log('execute function body');
    }
    console.log('step2');
    myFun1()
    console.log('step3');

    //함수는 일종의 코드 재사용이다.
    //함수를 하나 선언하고 그 함수의 업무가 필요한 곳에서 반복 호출(재사용)
    myFun1()

재사용

 

 

 

▷ 매개변수와 반환 값

• 함수는 인수와 반환 값을 가질 수 있다

• 인수(argument)는 함수를 호출하는 곳에서 그 함수에 전달되는 값이며 반환 값은 함수내용이 실행되고

함수를 호출한 곳에 전달되는 값이다.

• 함수 입장에서 인수는 Input 이며 반환 값은 output 이다.

 

• 함수에서 Parameter 와 Argument 가 혼용되어서 사용되기는 하지만 정확한 용어 정리를 해보면

Parameter는 함수를 선언하는 입장에서 그 함수를 호출하는 곳에서 전달하는 값을 받기 위해 선언되는 변수를 의미하며 한국어로 흔히 매개변수라고 한다.

Argument 는 함수를 이용하는 곳에서 그 함수를 호출하면서 전달하는 값을 의미하고

함수를 선언하면서 Parameter 를 선언하고 외부에서 함수를 호출하면서 Parameter 에 Argument 를 전달해서 실행시킨다.

 

 

• 인수를 받기 위해서는 함수에 매개변수가 먼저 선언되어 있어야  한다.

매개변수 선언은 함수 선언위치의 ( ) 에 선언한다 어떤 함수를 선언하면서 ( ) 를 생략할 수는 없으며

( ) 부분을 비워둘 수는 있는데 이렇게 되면 이 함수는 외부로부터 인수를 전달 받지 않는 함수가 된다.

만약 함수를 호출하는 외부로부터 인수를 전달받고자 한다면 ( ) 부분에 그 인수를 받기 위한 변수를 선언해주어야 한다.

이를 매개변수라고 하며 콤마( , ) 를 이용해 여러개의 매개변수도 선언이 가능하다.

    function myFun2(arg1, arg2) {
        console.log(`arg1 : ${arg1}, arg2 : ${arg2}`);      
        if(arg1 < arg2){
            return arg1
        }else{
            return arg2
        }
    }
    myfun2()

 

 

▼ 함수가 실행되고 그 함수를 호출한 곳에 데이터를 반환하고 싶다면 return 예약어를 이용한다

 

• 함수에 매개변수가 선언되어 있다고 하더라도 함수를 호출하면서 매개변수에 인수를 전달하지 않아도 된다.

• 매개변수에 인수가 전달되지 않으면 그 매개변수는 값을 가지지 못하기 때문에 undefined 가 된다.

 

    //argument, return value
    function myFun2(arg1, arg2) {
        console.log(`arg1 : ${arg1}, arg2 : ${arg2}`);      
        if(arg1 < arg2){
            return arg1
        }else{
            return arg2
        }
    }
    let result = myFun2(10,20)
    console.log(result);
    myFun2()//arg1:undefined arg2:undefined
    //myFun2(10) //arg1: 10 arg2:undefined

 

 

▷ default parameter

• default parameter 란 함수를 선언하면서 매개변수에 기본 값을 대입할 수 있다는 의미이다.

함수에 매개변수를 선언하고 함수를 호출하면서 그 매개변수에 인수를 전달하지 않으면 undefined 가 되는데

만약 default parameter 가 선언이 되었다면 인수가 전달되지 않는 경우

그 매개변수는 선언하면서 지정한 값을 가지게 된다.

    //default parameter
    function myFun3(arg1, arg2 = 0) {
        console.log(`arg1 : ${arg1}, arg2 : ${arg2}`);
    }console.log('``````````');
    myFun3() // unde 0
    myFun3(10) // 10 0
    myFun3(10,20) // 10 20

 

▷ reset parameter

• Rest Parameter 란 나머지 매개변수라는 의미이며… 으로 선언되는 매개변수이다.

… 이 추가된 매개변수이며 하나의 함수내에서 하나의 매개변수만 Rest Parameter 로 선언할 수 있다.

그리고 Rest Parameter 로 선언한 매개변수는 그 함수의 매개변수들 중 가장 마지막에 위치해야 한다.

 

Rest Parameter 는 하나의 매개변수이지만

여러 개의 값을 가질 수 있는 매개변수가 됨으로 내부적으로 배열로 만들어 진다.

함수 내부에서는 Rest Parameter 의 매개변수를 배열로 이용한다.

 

    //reset parameter
    function myFun4(arg1, ...arg2) {
        console.log(arg1);
        //rest parameter는 배열
        if(arg2.length>0){
            for(let i=0; i<arg2.length; i++){
                console.log(`arg2[${i}]= ${arg2[i]}`);
            }
        } 
    }
    myFun4(10,20) //arg2[0] = 20
    myFun4(10,20,30,40,50)

 

함수 표현식

• 함수 표현식이란 함수가 변수처럼 선언되는 것을 의미한다.

• 소프트웨어 개발에서 흔히 표현식(Expression) 이란 값이 도출되는 구문을 의미한다.

그러므로 표현식 구문은 변수에 대입되어 사용이 가능하다.

또한 함수 표현식이란 함수를 선언하는데 이 선언된 함수를 변수에 대입할 수 있다는 의미이다.

    //선언문 스타일의 함수 선언
    function myFun1() {
        console.log('myFun1 call');
    }

    //표현식 스타일의 함수 선언
    const myFun2 = function() {
        console.log('myFun2 call');
    }

    myFun1()
    myFun2()

 

화살표 함수

• 화살표 함수(Arrow Function) 은 다른 소프트웨어 언어에서는 람다함수(Lambda Function) 이라고 불리우는함수이며

자바스크립트에서는 함수 선언에 화살표( => ) 가 들어간다고 해서 화살표 함수라고 칭하고 있다.

 

▼ 화살표 함수는 함수명을 주지 않음으로 이렇게 선언된 함수를 외부에서 호출할 방법이 없다.

즉 일반적으로 화살표 함수는 변수에 대입되어 함수 표현식으로 선언된다.

 

 

 

▼ 만약 화살표 함수의 내용이 한줄이라면 함수 내용을 묶는 { } 을 생략할 수 있다.

 

▼  => 왼쪽의 매개변수가 하나라면 ( ) 를 생략할 수도 있다.

 

 //arrow function
    const myFun3 = () => {
        console.log('myFun3 call');        
    }
    myFun3()

    console.log('---------------------------------');

    //화살표 함수, 결과리턴
    const myFun4 = (arg1) => {
        console.log(`myFun3, arg1 : ${arg1}`);
        return 20
    }
    let result4 = myFun4(10)
    console.log(result4);
    
    console.log('---------------------------------');
    //함수의 body가 한줄이라면 {} 생략 가능하고
    //{} 을 생략 했다면 그 한줄의 실행 값이 자동 리턴. (return 안써도됨)
    const myFun5 = (arg1) => arg1 *10
    let result5 = myFun5(10)
    console.log(result5);

    console.log('---------------------------------');

    //매개변수가 하나면 ()도 생략가능
    const myFun6 = arg1 => arg1 *10
    let result6 =myFun6(10)
    console.log(result6);//100

 

람다함수

•  자바스크립트에서는 람다(Lamda) 함수를 화살표 함수라고 부른다

람다함수는 함수인데 이름이 없는 함수이며 작성규칙이

화살표를 기준으로 왼쪽이 매개변수, 오른쪽이 함수의 내용이다.

소프트웨어 언어에 따라 약간의 문법 차이는 있는데

화살표를 어떤 언어는 -> 을 사용하거나 아니면 => 을사용하기도 한다

약간의 문법차이는 있지만 화살표를 중심으로 이름없는 함수를 선언하겠다는 의미는 동일하며

이를 통칭해서 람다함수라고 부른다.

 

지역변수와 전역변수

• 변수 선언 위치에 따라 그 변수의 이용 범위가 다르다.

변수 선언이 함수 외부에 작성되어 있다면 이 변수는 전역변수(Global Variable) 이라고 부르며

어떤 함수내부에 선언되어 있다면 이 변수는 지역변수(Local Variable) 이라고 부른다.

• 전역 변수는 프로그램 코드 전체 위치에서 이용이 가능하다.

하지만 지역변수는 그 변수가 선언된 함수 내부에서만 사용할 수 있다.

 

 

    //test1 - local variable va global variable
    let data1 = 10 //global variable

    function myFun(arg1){
        let data2 =20
        //함수 내부에서 global , local varable 이용가능
        console.log(`${data1}, ${data2}, ${arg1}`);
    }
    myFun(30) //10,20,30
    console.log(data1) //10;
    //매개변수는 그 함수 내에서 선언된 local variable
    // console.log(arg1); //arg1 is not defined
    // console.log(data2); //data2 is not defined

스코프

• 소프트웨어 개발 혹은 IT 전반에 사용되는 용어이며 직역하자면 ‘범위’이다.

무언가 영향을 미치는 범위를 스코프라고 하는데

우리가 살펴본 지역변수는 그 지역변수를 선언한 함수내에서만 사용할 수 있고

지역변수가 이용되는 범위가 함수내인 것. 그래서 흔히 ‘지역변수는 함수 스코프에서 이용된다’ 라는 표현을 쓴다.

 

 

익명함수

• 익명함수란 특별한 규칙이 있는 것이 아니라 함수를 선언하면서 함수명을 지정하지 않는 함수이다.

 

• 익명함수로 함수를 선언하면 그 함수를 변수에 대입해서 그 변수명으로 이용하고

함수를 변수에 대입해서 선언하는 방식을 흔히 ‘함수 표현식’이라고 한다.

익명함수를 선언하는 대표적인 사례 중 하나가 함수를 어떤 다른 함수의 매개변수 혹은 반환값으로 이용하는 경우이다.

 

High Order Function

• 함수가 매개변수 혹은 리턴 값으로 함수를 이용할 수 있는 것을 용어로

High Order Function 이라고 부르며 한국어로는 '고차함수' 라고 한다.

• 소프트웨어 언어 전반에서 사용되는 용어이며 함수를 매개변수 혹은 반환값으로 이용하여

함수와 함수를 유기적으로 연결해서 업무가 진행되게 하고자하는 기법이다.

 

//hof
    function test1() {
        console.log('test1');
    }

    function test2() {
        console.log('test2');
    }

    function myFun2(arg) {
        arg()
        return test2
    }
    let result = myFun2(test1)
    result()
    
    //함수를 어떤 함수의 매개변수에, 그 함수의 결과로  리턴
    //그곳에서만 사용되는 함수다. 굳이 정식으로 선언할 필요가 있을까?
    function myFun3(arg) {
        arg()
        return () => console.log('test2');
        
    }
    let result3 = myFun3(()=> console.log('test1'));
    result3()