본문 바로가기
혼공학습단 11기(完)

[혼공스] 05 - 1 '함수의 기본 형태' 정리(2)

by jaeheon0520 2024. 1. 18.

 

오늘은 05 - 1장을 마무리 해보자.

 

05 - 1장의 뒷부분은 매개변수 응용과 전개 연산자를 사용하는 방법을 소개하고 있다.

 

이번 포스팅에도 중요한 내용이 등장하니 꼼꼼하게 정리하도록 하자.

 

그럼 정리 시작!

 

나머지 매개변수

직전에 배열을 매개변수로 받는 예제를 풀어보았다. 

 

만약 배열이 아닌 여러 개의 숫자를 매개변수로 넣어 실행하고 싶다면 어떻게 해야 할까?

 

그럼 매개변수가 2개일 때도 있고, 3개 또는 10개일 때도 있다면 어떻게 구현해야 할까?

 

호출할 때 매개변수의 개수가 고정적이지 않은 함수를 가변 매개변수 함수라고 부른다. 자바스크립트에서 이러한 함수를 구현할 때는 나머지 매개변수라는 특이한 문법을 사용한다.

 

function 함수 이름(...나머지 매개변수) {}

 

함수의 매개변수 앞에 마침표 3개(...)를 입력하면 매개변수들이 배열로 들어온다.

 

<script>
 function sample(...items) {
  console.log(items)
 }
 
 sample(1, 2)
 sample(1, 2, 3)
 sample(1, 2, 3, 4)
</script>

 

코드를 실행하면 단순하게 sample(1, 2)와 sample(1, 2, 3) 등으로 호출했던 매개변수가 [1, 2]와 [1, 2, 3] 배열 형태로 들어오는 것을 확인할 수 있다.

 

이를 활용하면 이전에 살펴본 min() 함수의 매개변수에 배열을 사용하지 않는 형태로 변경할 수 있다.

 

기존코드(testArray 라는 배열이 사용됨)

 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script>
        let min = (arr) => {

            let minimum= arr[0]

            for (const item of arr) {
                if (item < minimum) {
                    minimum = item
                }
            }

            return minimum
        }

        const testArray = [52, 273, 32, 103, 275, 24, 57]
        console.log(`${testArray} 중에서`)
        console.log(`최솟값 = ${min(testArray)}`)
    </script>
</head>
<body>
   
</body>
</html>

 

나머지 매개변수를 활용한 코드 (arr을 배열처럼 사용한다)

 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script>
        let min = (...arr) => {

            let minimum= arr[0]

            for (const item of arr) {
                if (item < minimum) {
                    minimum = item
                }
            }

            return minimum
        }

        console.log(`52, 273, 32, 103, 275, 24, 57 중에서`)
        console.log(`최솟값 = ${min(52, 273, 32, 103, 275, 24, 57)}`)
    </script>
</head>
<body>
   
</body>
</html>

 

나머지 매개변수와 일반 매개변수 조합하기

나머지 매개변수는 이름 그대로 나머지이다. 다음 패턴과 같이 일반적인 매개변수와 조합해서 사용할 수 있다. 

 

function 함수 이름(매개변수, 매개변수, ...나머지 매개변수)

 

예시를 살펴보자.

 

<script>
 function sample(a, b, ...c) {
  console.log(a, b, c)
 }
 
 sample(1, 2)
 sample(1, 2, 3)
 sample(1, 2, 3, 4)
</script>

 

실행결과

 

실행 결과를 보면 알 수 있듯이 함수를 호출할 때 매개변수 a, b가 먼저 들어가고, 남은 것들은 모두 c에 배열 형태로 들어간다. 

 

매개변수로 들어온 자료형이 배열인지 숫자인지 확인하는 메소드

 

  • 배열인지 확인: Array.isArray()
  • 숫자인지 확인: typeof() === 'number'

주석을 참고하자.

 

<script>
 function min(first, ...rests) {
  let output
  let item
  
  if (Array.isArray(first)) { // 배열로 들어왔다면
   output = first[0] // 비교시작 지점 = 배열 시작 지점
   items = first // 배열을 반복문으로 돌린다
  }
  else if (typeof(first) === 'number' {
   output = first // 첫번째 숫자를 비교 시작 지점으로 설정
   items = rests // 나머지 숫자들을 배열로 만들어서(...) 반복문 돌리기
  }
  
  for (const item of items) {
   if (output > item)
    output = item
   }
   return output
  }
 console.log(`min(배열): ${min([52, 273, 32, 103, 275, 24, 57])}`)
 console.log(`min(숫자, ...): ${min([52, 273, 32, 103, 275, 24, 57])}`)
</script>

 

(☆)전개 연산자(☆)

자바스크립트는 배열을 전개해서 함수의 매개변수로 전달해주는 전개 연산자를 제공한다. 전개 연산자는 다음과 같이 배열 앞에 마침표 3개(...)를 붙이는 형태로 사용한다.

함수 이름(...배열)

 

함수를 호출할 때 매개변수로 전개 연산자를 사용한 간단한 예제를 살펴보자. 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script>
        function sample(...items) {
            console.log(items)
        }

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

        console.log('# 전개 연산자를 사용하지 않은 경우')
        sample(array)
        console.log('# 전개 연산자를 사용한 경우')
        sample(...array)
    </script>
</head>
<body>
   
</body>
</html>

 

실행 결과를 보면 전개 연산자를 사용하지 않는 경우에는 배열이 매개변수로 들어오고, 전개 연산자를 사용한 경우에는 숫자가 하나하나 전개되어 매개변수로 들어오는 것을 확인할 수 있다.

 

기본 매개변수

함수의 매개변수로 항상 비슷한 값을 입력하는 경우 매개변수에 기본값을 지정하는 기본 매개변수를 사용한다.

 

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

 

매개변수로 시급과 시간을 입력받아 급여를 계산하는 함수를 만들어보자.

 

  • 함수 이름: earnings
  • 매개변수: name(이름), wage(시급), hours(시간)
  • 함수의 역할: 이름, 시급, 시간을 출력하고, 시급과 시간을 곱한 최종 급여 출력

만약 wage과 hours를 입력하지 않고 실행하면 wage에 최저 임금이 들어가고, hours에 법정근로 시간 1주일 40시간이 기본 매개변수로 입력되게 만들어보자.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script>
        function earnings (name, wage=5000, hours=40) {
            console.log(`# ${name} 님의 급여 정보`)
            console.log(`- 시급: ${wage}원`)
            console.log(`- 근무 시간: ${hours}시간`)
            console.log(`- 급여: ${wage * hours}원`)
            console.log('')
        }

        earnings('구름')
        earnings('별', 10000)
        earnings('인성', 10000, 52)
    </script>
</head>
<body>
   
</body>
</html>

 

 

기본 매개변수는 값이라면 뭐든지 넣을 수 있다. 

 

윤년을 판단하는 함수를 기본 매개변수를 활용하여 다음과 같이 수정할 수 있다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script>
        function isLeapYear(year = new Date().getFullYear()) {

            console.log(`매개변수 year: ${year}`)
            if (year % 4 === 0) {
                if (year % 100 === 0) {
                    if (year % 400 === 0)
                        return true
                    else
                        return false
                }
                else
                    return true
            }
            else
                return false
        }

        console.log(`올해는 윤년일까? ${isLeapYear()}`)
    </script>
</head>
<body>
   

 

확인 문제 1. A부터 B까지 범위를 지정했을 때 범위 안의 숫자를 모두 곱하는 함수를 만들어보세요.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script>
        const multiplyAll = (a, b) => {
            let output = 1
            for (let i = a; i <= b; i++) {
                output *= i
            }
            return output
        }

        console.log(multiplyAll(1, 2))
        console.log(multiplyAll(1, 3))
    </script>
</head>
<body>
   
</body>
</html>

 

확인 문제 2. 다음 과정에 따라 최대값을 찾는 max() 함수를 만들어보세요.

 

  • 매개변수로 max([1, 2, 3, 4])와 같은 배열을 받는 max() 함수를 만들어보세요.
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script>
        const max = (arr) => {
            let output = arr[0]

            for (const item of arr) {
                if (output < item)
                    output = item
            }
            return output
        }

        console.log(max([1, 2, 3, 4, 5]))
    </script>
</head>
<body>
   
</body>
</html>

 

  • 매개변수로 max(1, 2, 3, 4)와 같이 숫자를 받는 max() 함수를 만들어보세요.
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script>
        const max = (...arr) => {
            let output = arr[0]

            for (const item of arr) {
                if (output < item)
                    output = item
            }
            return output
        }

        console.log(max(1, 2, 3, 4, 5))
    </script>
</head>
<body>
   
</body>
</html>

 

  • max([1, 2, 3, 4]) 형태와 max(1, 2, 3, 4) 형태를 모두 입력할 수 있는 max() 함수를 만들어 보세요.
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script>
        const max = (first, ...rests) => {
           
            let output
            let item

            if (Array.isArray(first)) {
                output = first[0]
                arr = first
            } else if (typeof(first) === 'number') {
                output = first
                arr = rests
            }

            for (const item of arr) {
                if (output < item)
                    output = item
            }
            return output
        }

        console.log(`max(숫자, ...): ${max(1, 2, 3, 4, 5)}`)
        console.log(`max(배열): ${max([1, 2, 3, 4, 5])}`)
    </script>
</head>
<body>
   
</body>
</html>

 

05 - 1장은 여기서 마무리된다.

 

프로그래밍의 꽃 '함수'의 기본적인 내용을 살펴보았다.

 

이번 정리에도 중요한 내용이 많이 나왔지만 내일 정리할 내용은 이보다 더 중요하다!!

 

내일은 05 - 2장의 내용을 정리해보자.

 

오늘 하루도 쌓였다!

저작자표시 비영리 변경금지

'혼공학습단 11기(完)' 카테고리의 다른 글

[혼공스] 05 - 2 '함수 고급' 정리(2)  (0) 2024.01.21
[혼공스] 05 - 2 '함수 고급' 정리(1)  (1) 2024.01.20
[혼공스] 05 - 1 '함수의 기본 형태' 정리(1)  (0) 2024.01.17
[혼공스] 3주차 미션  (0) 2024.01.16
[혼공스] 04 - 2장 연습문제 풀이  (0) 2024.01.15

관련글

티스토리툴바