함수 ① 함수 기본

익명 함수

 

함수는 코드의 집합을 나타내는 자료형으로, 함수의 기본 형태는 이름이 없는 함수인 익명 함수이다.

function () {}

 

<script>
  const func = function () {
    console.log('함수가 실행되었습니다.')
  }

  func()

  console.log(func)
</script>

함수가 실행되었습니다.
f () {
  console.log('함수가 실행되었습니다.')
}

나는 위 예제 코드가 뭔가 어색하게 느껴졌었는데, 함수도 하나의 자료형임을 떠올려보면 함수 자료형의 변수를 선언한 것일 뿐이니 이상할 거 없는 코드이다.

 

선언적 함수

 

하지만 일반적으로는 이름이 있는 함수를 많이 사용하는데, 이를 선언적 함수라고 한다.

function 함수명 () {}

 

위 코드는 익명 함수를 다음과 같이 사용한 경우와 동일하다.

let 함수명 = function () {}

 

<script>
  function func () {
    console.log('함수가 실행되었습니다.')
  }

  func()

  console.log(func)
</script>

함수가 실행되었습니다.
f func () {
  console.log('함수가 실행되었습니다.')
}

 

익명 함수 예제 코드와 선언적 함수 예제 코드의 console.log(func) 실행 결과를 비교해보면,

 

익명 함수 예제 코드에서는 이름 없는 함수로 출력되고 있지만

 

선언적 함수 예제 코드에서는 func이라는 이름을 갖는 함수로 출력되고 있다.

 

매개변수와 리턴값

 

앞서 배운 익명 함수와 선언적 함수에 매개변수와 리턴값을 정의할 수도 있다.

function 함수명 (매개변수, 매개변수) {
  return 리턴값
}

 

기본 매개변수

 

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

function 함수명 (매개변수, 매개변수=기본값) {}

 

<script>
  function earnings (name, wage=10000, hours=40) {
    console.log(`${name}의 급여: ${wage*hours}원`)
  }

  earnings('김철수')
  earnings('박영희', 12000)
  earnings('홍길동', 12000, 50)
</script>

김철수의 급여: 400000원
박영희의 급여: 480000원
홍길동의 급여: 600000원

 

나머지 매개변수

 

매개변수의 개수가 고정적일 경우 함수 정의 시 매개변수의 개수를 표시할 수 있지만

 

매개변수의 개수가 고정적이지 않을 경우 나머지 매개변수를 사용할 수 있다.

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

 

함수 정의 시 함수의 매개변수 앞에 ...을 입력하면 가변 개수의 매개변수들이 배열로 전달된다.

 

이때, 나머지 매개변수는 이름 그대로 나머지이기 때문에 일반 매개변수와 조합하여 사용할 수도 있다.

function 함수명 (매개변수, 매개변수, ...나머지 매개변수) {}

 

<script>
  function func1 (...items) {
    console.log(items)
  }

  func1(1, 2)
  func1(1, 2, 3)
  func1(1, 2, 3, 4)
  
  function func2 (a, b, ...items) {
    console.log(a, b, items)
  }

  func2(1, 2)
  func2(1, 2, 3)
  func2(1, 2, 3, 4)
</script>

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

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

 

전개 연산자

 

매개변수로 숫자를 입력 받는 함수에게 매개변수로 배열을 전달하고자 할 경우 전개 연산자를 사용할 수 있다.

함수명 (...배열)

 

함수 호출 시 배열 매개변수 앞에 ...을 입력하면 배열이 전개되어 배열 원소 각각이 매개변수로 전달된다.

 

이때, 나머지 매개변수는 함수 정의 시 매개변수 앞에, 전개 연산자는 함수 호출 시 매개변수 앞에 ...을 붙인다는 점에서 다르다.

 

<script>
  function func (...items) {
    console.log(items)
  }

  func(1, 2)
  func(1, 2, 3)
  func(1, 2, 3, 4)

  func([1, 2, 3])
  func(...[1, 2, 3])
</script>

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

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

 

• 배열을 입력으로 받기

<script>
  const max = function (array) {
    let output = array[0]
    
    for (const item of array) {
      if (output < item) {
        output = item
      }
    }
    
    return output
  }
</script>

• 2개 이상의 숫자를 입력으로 받기

<script>
  const max = function (array) {
    let output = array[0]
    
    for (const item of array) {
      if (output < item) {
        output = item
      }
    }
    
    return output
  }
</script>

• 배열과 2개 이상의 숫자 모두 입력으로 받기

<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 item of items) {
      if (output < item) {
        output = item
      }
    }

    return output
  }
</script>

 

 

 

 

 

---

이 글은 혼자 공부하는 자바스크립트 (윤인성 저)를 바탕으로 공부한 내용을 작성한 글입니다.