혼공스 5챕터

5 - 1 함수의 기본형태

 

함수는 프로그래밍 문법의 꽃이라고 부를 수 있습니다.

 

익명함수

함수의 자료형은 function 이며 코드에서 함수를 출력하면 f ( ) { } 라고 출력됩니다.

이때 f 는 함수를 나타냅니다. ( ) 앞에 별다른 이름이 붙어있지 않으면 익명함수 라고 표현합니다.

 

선언적함수

일반적으로는 이름이 있는 함수를 많이 사용합니다.

다음과 같이 생성한 함수를 선언적 함수라고 합니다.

 

    function 함수 ( ) { }; <<<선언적 함수

조금의 차이는 있지만 선언적 함수는 다음 코드와 같은 기능을 수행합니다.

그차이에 대해서는 235쪽에서 조금 더 알아보겠습니다.

   let 함수 = function ( ) { };  <<< 익명함수에  let으로 이름을 붙여줘서 선언적함수와 같은 기능

 

 

매개변수와 리턴값

함수를 호출할때 괄호 안에 적는 것을 매개변수라고 합니다.

함수의 최종 결과를 리턴값이라고 부릅니다.

    <script>

        function 함수(매개변수, 매개변수, 매개변수){

            문장

            문장

            return 리턴값

        }

    </script>

input = 매개변수 , output = 리턴값

 

 

최솟값을 구하는 함수

    <script>

        function min(array){

            let output = array[0]

            for(const item of array){

                if (output > item){

                    output = item

                }

            }

            return output

        }

        const testArray = [52, 273, 32, 103, 275, 24, 57]

        console.log(`최소값은 ${min(testArray)}`)

    </script>

 

array를 정해주고 output은 array의 첫 요소로 지정해주고

array를 반복문으로 배열안의 숫자들을 차례대로 비교해준다.

그러면서 하나씩 비교하면서 더 작은 값을 output 으로 정해주면

마지막까지 비교했을때 배열안의 모든 숫자 중 가장 작은 수가 output 이 됩니다.

 

    <script>

        function max(array){

            let output = array[0]

            for(const item of array){

                if (output < item){

                    output = item

                }

            }

            return output

        }

        const testArray = [52, 273, 32, 103, 275, 24, 57]

        console.log(`최대값은 ${max(testArray)}`)

    </script>

반대로 최대값은 output < item 만 수정해주면 간단합니다.

 

 

API 란 무엇인가. (간단하게 살펴보자)

= Application Programming Interface(약속)

= 애플리케이션 프로그램을 만들 때의 약속

여기서 약속은 여러가지 의미로 해석될 수 있습니다.

예를 들면 alert() , console.log() 같은 것을 우리는 정확히 몰라도

alert() 은 알람창을 띄워주고 console.log() 은 콘솔에 값을 나타내 주는걸로 알 수 있습니다.

그렇게 설계자가 정해놨고 우리는 정해진 약속대로 사용합니다.

 

 

지금부터 살펴볼 내용은 일반적으로 설계자만 자세하게 사용하는 내용입니다.

그렇기때문에 '이런게 있구나' 하고 눈도장만 찍어두자 (나머지매개변수, 일반매개변수, 클래스고급내용)

 

나머지 매개변수  : 함수를 만들 때 ( 항상 마지막에!)

        function(...매개변수) {}

        // -> 자료형이 배열!!

처음에는 어렵게 생각들었는데

간단하게 보니 나머지 매개변수를 사용하면 배열이 된다고 이해하면 됩니다.

    <script>

        // 단순하게 매개변수를 모두 출력하는 함수

        function sample(...items) {

            console.log(items)

        }

        sample(1, 2)

        sample(1, 2, 3)

        sample(1, 2, 3, 4)

    </script>

결과

(2) [1, 2]
(3) [1, 2, 3]
(4) [1, 2, 3, 4]

 

전개 연산자 : 함수를 호출할 때

        //전개연산자

        function 이름(...배열)

    <script>

        // 단순하게 매개변수를 모두 출력하는 함수

        function sample(...items) {

            console.log(items)

        }

        //전개 연산자 사용 여부 비교하기

        const array = [1, 2, 3, 4]

        console.log('# 전개 연산자를 사용한지 않은 경우')

        sample(array)

        console.log('# 전개 연산자를 사용한 경우')

        sample(...array)

    </script>

결과

# 전개 연산자를 사용한지 않은 경우
[Array(4)]
 # 전개 연산자를 사용한 경우
(4) [1, 2, 3, 4]

 

 

 

기본 매개변수

 

매개변수에 기본값을 지정하여 사용하는 기본 매개변수.

 

함수 이름 (매개변수 , 매개변수 = 기본값, 매개변수 = 기본값)

 

기본 매개변수의 활용

 

    <script>

        function earnings(name, wage=8590, hours=40){

            console.log(`#${name}님의 급여 정보`)

            console.log(`- 시급: ${wage}원`)

            console.log(`- 근무 시간: ${hours}시간`)

            console.log(`- 급여: ${wage * hours}원`)

            console.log('')

        }

        earnings('구름')

        earnings('별', 10000)

        earnings('인성', 10000, 52)

    </script>

 

#구름님의 급여 정보
- 시급: 8590원
- 근무 시간: 40시간
- 급여: 343600원
 
 #별님의 급여 정보
 - 시급: 10000원
 - 근무 시간: 40시간
 - 급여: 400000원

 #인성님의 급여 정보
 - 시급: 10000원
 - 근무 시간: 52시간
 - 급여: 520000원

 

 

 

 

( 구버전, 최신버전 ) p214

 

과거에는 컴퓨터 성능때문에 짧은 코드를 선호했다.

하지만 이제는 가독성 좋은 코드를 선호한다.

 

과거에 쓰였던 코드이면서 지금은 쓰지 않는 코드들이 가끔 보일 수 있다.

그럴때를 위해 미리 한번 과거의 코드들을 눈도장 찍고 언제가 보게 됐을때 이해하면 된다.

 

구버전에서 가변 매개변수 함수를 구현 할때는 arguments를 활용했다.

 

구버전에서는 전개 연산자가 없던 시절  apply() 함수를 사용했다.

 

구버전에서는 기본 매개변수가 없었을때 다음과 같은 코드를 사용해서 구현했다.

 

    <script>

        function earnings (wage, hours) {

            wage = wage || 8590

            hours = hours || 52

            return wage * hours

        }

    </script>

 

 

 

확인문제

max([1,2,3,4]) 형태와 max(1,2,3,4) 형태를 모두 입력할 수 있는 max()함수를 만들어보세요.

 

    <script>

        const max = function(first, ...rests){

            let output

            let items

            if (Array.isArray(first)){

                output = first[0]

                items = first

            } else if (typeof(first) === 'number'){

                output = first

                items = rests

            }

            for (const data of items){

                if(output < data){

                    output = data

                }                

            }

            return output

        }

       

        console.log(max(1,2,3,4))

        console.log(max([1,2,3,4]))

    </script>

 

Array.isArray() 로 배열인지 아닌지 판단하고

배열인 경우와 그렇지 않은경우(숫자인경우) 로 나눠서

output 과 items 를 초기화해주면 된다.