[혼공자스] 05. 함수

 

 

함수 호출 : 함수 사용하는 것

매개 변수: 함수 괄호 안에 넣는 자료

리턴 값: 함수를 호출해서 최종적으로 나온 결과

 

 

 

익명함수(anonymous function)

 

함수는 코드의 집합을 나타내는 자료형. 코드의 집합이라고 하는 이유는 중괄호 내부에 코드를 넣기 때문

function( ) { }

<script>
  //변수 생성
  const 함수 = function {
    console.log('함수 내부의 코드...1')
    console.log('함수 내부의 코드...2')
    console.log('함수 내부의 코드...3')
    console.log('')
  }

  //함수를 호출
  함수()
  함수()

  //출력
  console.log(typeof 함수)
  console.log(함수)
  
</script>

    ㄴ 함수를 실행하면 여러 코드를 한 번에 묶어서 실행 가능. 필요할 때마다 호출하여 반복적으로 사용가능.

함수의 자료형은 function이고, 함수를 출력하면 f (  ) { }라고 출력됨.

출력했을 때 별다른 이름이 붙어있지 않은 것을 볼 수 있는데 이처럼 이름이 붙어져 있지 않는 함수를 익명함수라고 함.

 

 

 

 

선언적 함수

 

일반적으로 이름있는 함수를 많이 사용

function 함수 ( ) { }

<script>
  //변수 생성
  function 함수 () { //익명함수와 차이나는 부분
    console.log('함수 내부의 코드...1')
    console.log('함수 내부의 코드...2')
    console.log('함수 내부의 코드...3')
    console.log('')
  }

  //함수를 호출
  함수()
  함수()

  //출력
  console.log(typeof 함수)
  console.log(함수)
  
</script>

 

매개변수와 리턴값

<script> //기본 형태의 함수 만들기
  //함수 선언
  function f(x) {
    return x * x
  } 
  //함수 호출
  console.log(f(3))
</script>

 

익명함수와 선언적 함수 차이

익명함수는 코드 위에서 부터 차례대로 읽으며 생성

선언적 함수코드는 코드가 실행되기 전에 생성.

<script>
  함수()
  함수 = function () {
    console.log('익명함수입니다.')
  }

  function 함수 () {
    console.log('선언적함수입니다.')
  }
  함수()
</script>

 

첫번째 함수()는 코드가 실행되기 전에 선언적 함수가 실행이 되어 선언적함수라고 출력이 되고,

두번째 함수()는 코드를 위에서부터 차례대로 읽으면 익명함수가 실행이 되기 때문에 익명함수라고 출력이 된다.

 

 

 

 

함수 예제

윤년을 확인하는 함수 만들기

<script>
  function isLeapYear(year) {
    return (year % 4 === 0) && (year % 100 !==0) && (year % 400 ===0)
  }

  console.log('2020년은 윤년? === ${isLeapYear(2020)}')
  console.log('2010년은 윤년? === ${isLeapYear(2010)}')
  console.log('2000년은 윤년? === ${isLeapYear(2000)}')
  console.log('1900년은 윤년? === ${isLeapYear(1900)}')
</script>

 

A부터 B까지 더하는 함수 만들기

<script>
  function sumAll(a,b) {
    let output = 0
    for (let i = a; i <= b; i++) {
      output += i
    }
    return output
  }
  console.log('1부터 100까지의 합: ${sumAll(1,100)}')
  console.log('1부터 500까지의 합: ${sumAll(1,100)}')
</script>

 

일반적으로 숫자를 계산해서 출력할 때 다음과 같은 형태의 함수 사용
function 함수(매개변수) { 
let output = 초깃값
처리한다
return 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('${testArray}중에서')
  console.log('최솟값 = ${min(testArray)}')
</script>

 

 

 

나머지 매개변수

 

가변 매개 변수 함수: 호출 할 때 매개변수의 개수가 가변적인 함수

자바스크립트에서 가변 매개 변수 함수를 실행할 때는 나머지 매개변수라는 특이한 형태의 문법 사용

 

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

 

매개변수 앞에 점을 3개 찍으면 매개변수들이 배열로 들어감.

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

 

 

<script>
  function min(...items) {
    let output = items[0]
    for (const item of items) {
      if (output > item) {
        output = item
      }
    }
    return output
  }

  //함수 호출
  console.log('min(52,273,32,103,275,24,57)')
  console.log('=${min(52,273,32,103,275,24,57)}')
</script>

 

 

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

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>

 

매개변수의 자료형에 따라 다르게 작동하는 min()함수

<script>
  function min(first, ...rest) {
    //변수 선언
    let output
    let items
  

  //매개변수의 자료형에 따라 조건 분기하기
  if (Array.isArray(first)) {
    output = first[0]
    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>

 

 

 

 

전개 연산자 spread operator

 

함수 이름 (...배열)

 

  const 함수 = function (a, b, c){
    console.log(a, b, c)
  }

  const a = [1, 2, 3]
  함수(a)
  함수(a[0], a[1], a[2])
  함수(...a)

 

<script>
  //단순하게 매개변수를 모두 출력하는 함수
  function sample(...items){
    console.log(items)
  }
  //전개 연산자 사용 여부 비교하기
    const array = [1,2,3,4]
    
    console.log('# 전개 연산자를 사용하지 않은 경우')
    sample(array)
    console.log('#전개 연산자를 사용한 경우')
    sample(...array)
</script>

   

    ㄴ실행결과를 보면 전개 연산자를 사용X : 배열이 매개변수로 들어옴 

        전개 연산자 사용: 숫자가 하나하나 전개되어 매개변수로 들어옴

 

함수의 기본적인 코드와 전개연산자와 나머지 연산자 활용한 최대값 구하기 코드

<scaript>
const max = function (첫번째 요소,...나머지){
      if (Array.isArray(첫번째요소)) {
       let output = 첫번째요소[0] //배열일 때 output 초기화
       for (const 값 of 첫번째요소) {
        if (output < 값 ){
        output = 값
       }
      }
      return output
    } else {
      let output = 첫번째요소 //배열이 아닐 때 output 초기화
      for (const 값 of 첫번째요소) {
        if (output < 값 ) {
          output = 값
        }
      }
      return output
    }
  }
    console.log(max([1,2,3,4]))
    console.log(max(1,2,3,4))
    </scaript>

 

 

나머지 매개변수와 전개연산자 정리
#나머지 매개변수 const 함수 = function (...매개변수) {}
  -> 자료형 : 무조건 배열

# 전개 연산자
  -> 함수(...배열) : 배열을 전개해서 입력하게 해주는 연산자 배열을 전개안하고 그냥 입력하게 되면 배열이 출력됨. 전개 연산자를 이용하면 값이 하나하나 입력되게 함.
  a[0], a[1], a[2] = ...a 같은 것

 

 

 

 

기본 매개변수

 

항상 같은 매개변수를 여러 번 반복해서 입력하는 것이 귗낳으므로 매개변수에 기본값을 지정하는 기본 매개변수를 사용.

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

매개변수는 왼쪽부터 입력하므로 다음과 같이 함수를 작성하면 기본 매개변수의 의미가 없음.

 b에 값을 전달하기 위해서는 a값을 채워야 하기 때문.

function sample(a =  기본값, b) { }

<script>
  //기본 매개변수를 활용하게 급여 계산하는 함수 만들기
  function earnings (name, wage = 8590, hour = 40) {
    console.log('# ${name} 님의 급여 정보')
    console.log('- 시급: ${wage}원')
    console.log('- 근무 시간: ${hour)시간')
    console.log('- 급여: ${wage * hours}원')
    console.log('')
  }

  // 최저 임금으로 최대한 일하는 경우
    earnings('구름')

    //시급 1만원으로 최대한 일하는 경우
    earnings('별', 10000)

    //시급 1만원으로 52시간 일하는 경우
  earnings('인성',10000,52)
</script>

<script>
  //기본 매개변수를 추가한 윤년 함수
  function isLeapYear(year = new Date().getFullYear()){
    console.log('매개변수 year: ${year}')
    return (year % 4 === 0) && (year % 100 !== 0) || (year % 400 === 0)
  }

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

 

 

 

 

콜백함수 "함수를 매개변수로 전달하는 함수"

 

함수도 하나의 자료형이므로 매개변수로 전달 가능.

 

<script>
  function callThreeTimes (callback) {
    for (let i = 0; i < 3; i++) {
      callback(i)
    }
  }

  function print (i) {
    console.log('${i}번째 함수 호출')      
  }

  //함수를 호출.
  callThreeTimes(print)
</script>

 

<script>
  // 함수를 선언
  function callThreeTimes(callback) {
    for (let i = 0; i < 3; i++) {
      callback(i)
    }
  }
  //함수를 호출
  callThreeTimes(function (i){
    console.log('${i}번째 함수 호출')
  })
</script>

 

 

콜백 함수를 활용하는 함수" forEach( ) "

배열이 갖고있는 함수(메소드)로써 단순하게 배열 내부의 요소를 사용하여 콜백함수를 호출

배열의 함수를 반복을 돌려서 사용하는 배열의 메소드.

function ( value, index, array) { } //보통 배열을 돌리기 때문에 array부분은 작성 X

<script>
  const  numbers = [273, 52, 103, 32, 57]

  numbers.forEach(function(value, index, array) {
    console.log(`${index}번째 요소 : ${value}`)
  })
</script>
</head>

 

콜백함수를 활용하는 함수 " map( )"

map( ) 메소드도 배열이 갖고 있는 함수. 콜백 함수에서 리턴한 값들을 기반으로 새로운 배열을 만드는 함수.

<script>
  //배열을 선언
  let numbers = [273, 52, 103, 32, 57]

  //배열의 모든 값을 제곱
  numbers = numbers.map(function (value, index, array){
    return value * value
  })
  
  //출력
  numbers.forEach(console.log)
</script>

 

콜백 함수를 활용하는 함수: filter( )

filter ( ) 메소드도 배열을 갖고 있는 함수. 콜백 함수에서 리턴하는 값이 true인 것들만 모아서 새로운 배열을 만드는 함수

filter ( )메소드는 기본적으로 true와 false가 올 것을 예상하는 메소드임.

<script>
  const numbers = [1,2,3,4,5]
  const evenNumbers = numbers.filter(function (value){
    return value % 2 === 0
  })

  console.log(`원래 배열 : ${numbers}`)
  console.log(`짝수만 추출 : ${evenNumbers}`)
</script>

 

 

 

 

화살표 함수

 

map ( ), filter ( ) 함수처럼 단순한 형태의 콜백 함수를 쉽게 입력하고자 화살표 함수라는 함수 생성 방식을 사용.

function  키워드 대신 화살표를 사용하며, 매개변수와 리턴될 기본 포맷을 표현해주면 됨.

>const array = [1,2,3,4,5,6,7,8,9]
undefined
>array.map((value) => value * value)
(9) [1, 4, 9, 16, 25, 36, 49, 64, 81]

 

<script>
  //배열을 선언
  let numbers = [0,1,2,3,4,5,6,7,8,9]
  
  //배열의 메소드를 연속적으로 사용
  numbers
    .filter((value) => value % 2 === 0)
    .map((value) => value * value)
    .forEach((value) => {
      console.log(value)
    })
</script>

     ㄴ 어떤 메소드가 리턴하는 값을 기반으로 해서 함수를 줄줄이 사용하는 것: 메소드 체이닝 method chaining

 

 

 

 

타이머 함수

 

특정 시간마다 or 특정 시간 이후에 콜백 함수를 호출 할 수 있는 타이머 함수가 있음. (시계만들때, 움직임을 구현할 때 사용)

 

시간에 따라 타이머 시작
setTimeout(함수, 시간) : 특정 시간 후에 함수를 한 번 호출
setInterval(함수, 시간) ; 특정 시간마다 함수를 호출

타이머 종료
clearTimeout(타이머_ID): setTimeout( ) 함수로 설정한 타이머를 제거
clearInterval(타이머_ID): setInterval( ) 함수로 설정한 타이머를 제거

 

<script>
  //타이머 걸기
  setTimeout (() => {
    console.log('1초 후에 실행')
  }, 1 * 1000)

  let count = 0
  setInterval(() => {
    console.log(`1초마다 실행(${count}번째)`)
    count ++
  }, 1 * 1000)
</script>

<script>
  let id
  let count = 0
  id = setInterval(() => {
    console.log(`1초마다 실행(${count}번째)`)
    count ++
  }, 1 * 1000)

  setTimeout(() => {
    console.log('타이머를 종료')
    clearInterval(id)
  }, 5 * 1000)
</script>

 

 

 

 

 

---

 

 

구 버전 자바스크립트에서 가변 매개변수 함수 구현하기

구 버전 자바스크립트에서 가변 매개변수 함수를 수현할 때는 배열 내부에서 사용할 수 있는 특수한 변수인 arguments를 활용함. 이는 함수 내부에서만 사용이 가능하며 for문에서만 사용 가능함.( forof, forin 구문에서 사용 불가)

arguments를 사용하여 가변 매개변수 함수

<script>
  function sample () {
    console.log(arguments)
    for (let i = 0; i< arguments.length; i++) {
      console.log(`${i}번째 요소 : ${arguments[i]}`)
    }
  }

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

 

확인문제1

a부터 b까지 범위를 지정했을 대 범위 안의 숫자를 모두 곱하는 함수 만들기

<script>
  const multipleAll = function (a, b) {
    let output = 1
    for ( i = a; i <= b; i++)
      output *= i
      console.log(output)
  }

  console.log(multipleAll(1,2))
  console.log(multipleAll(1,3))
</script>

 

확인문제2

최대값을 찾는 max()함수만들기

- 매개변수로 max([1,2,3,4]) 와 같은 배열을 받는 max()함수 만들기

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

    return output
  }
  console.log(max([1, 2, 3, 4]))
</script>>

 

- 매개변수로 max(1,2,3,4) 와 같이 숫자를 받는 max()함수 만들기

<script>
  const max = function (...array) {
    let output = array[0]
    for (const i of array) {
      if (output < i){
        output = i
      }
    }
    return output
  }
  console.log(max(1,2,3,4))
</script>

 

-max([1,2,3,4])형태와 amx (1,2,3,4) 형태를 모두 입력할 수 있는 max()함수 만들기

<script>
  const max = function (첫번째요소, ...나머지) {
    if (Array.isArray(첫번째요소)) {
      let output = 첫번째요소[0]
      for (const i of 첫번째요소) {
      if (output < i) output = i
      } 
      return output
} else {
    let output = 첫번째요소
    for (const i of 나머지) {
    if (output < i) output = i
    }
    return output 
  }
}
console.log(max([1,2,3,4]))
console.log(max(1,2,3,4))
</script>

 

 

확인문제3

filter 함수의 콜백 함수 부분을 채워서 1) 홀수만 추출 2) 100이하의 수만 추출 3) 5로 나눈 나머지가 0인 수만 추출

<script>
  let numbers = [273, 25, 75, 52, 103, 32, 57, 24, 76]
  //홀수만 추출
  numbers = numbers.filter((value) => value % 2 === 1)
  console.log(numbers)
  //100이하의 수만 추출
  numbers = numbers.filter((value) => value <= 100 )
  console.log(numbers)
  //5로 나눈 나머지 0일 수만 추출
  numbers = numbers.filter((value) => value % 5 === 0)
  console.log(numbers)
</script>

 

 

확인문제4

'A 코드'를 forEach메소드를 사용하는 방법으로 수정

//A 코드
<script>
  const array = ['사과', '배', '귤', '바나나']

  console.log('# for in 반복문')
  for (const i in array) {
    console.log(i) //인덱스 출력
  }

  console.log('# for of 반복문')
  for (const i of array) {
    console.log(i) //갑 출력
  }
</script>

 

  const array = ['사과', '배', '귤', '바나나']

  array.forEach(function(value, index) {
    console.log(index) //인덱스 출력
  })

  array.forEach((value,index) => {
    console.log(value)  //값 출력
  })