Jin's Dev Story

[JavaScript] 함수 본문

Programming Language/JavaScript

[JavaScript] 함수

woojin._. 2023. 9. 7. 10:14

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

매개변수 : 함수를 호출할 때 괄호 내부에 넣는 여러가지 자료

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

익명 함수

  • 이름이 붙어있지 않은 함수
  • 함수 : 코드의 집합을 나타내는 자료형
    • 함수의 자료형 : function
	function () {}
  <script>
      const 함수 = function() {
          console.log('함수 내부의 코드입니다 ... 1')
          console.log('함수 내부의 코드입니다 ... 2')
          console.log('함수 내부의 코드입니다 ... 3')
          console.log('')
      }

      함수()
      함수()

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

  // 실행 결과
  // 함수 내부의 코드입니다 ... 1
  // 함수 내부의 코드입니다 ... 2
  // 함수 내부의 코드입니다 ... 3
  // 
  // 함수 내부의 코드입니다 ... 1
  // 함수 내부의 코드입니다 ... 2
  // 함수 내부의 코드입니다 ... 3
  // 
  // function
  // f () {
  // 	console.log('함수 내부의 코드입니다 ... 1')
  //	console.log('함수 내부의 코드입니다 ... 2')
  //	console.log('함수 내부의 코드입니다 ... 3')
  //	console.log('')
  // }

선언적 함수

  • 이름이 있는 함수
  function 함수() {

  }

  let 함수 = function() { };
  <script>
      function 함수() {
          console.log('함수 내부의 코드입니다 ... 1')
          console.log('함수 내부의 코드입니다 ... 2')
          console.log('함수 내부의 코드입니다 ... 3')
          console.log('')
      }

      함수()
      함수()

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

  // 실행 결과
  // 함수 내부의 코드입니다 ... 1
  // 함수 내부의 코드입니다 ... 2
  // 함수 내부의 코드입니다 ... 3
  // 
  // 함수 내부의 코드입니다 ... 1
  // 함수 내부의 코드입니다 ... 2
  // 함수 내부의 코드입니다 ... 3

  // function
  // f 함수 () {
  // 	console.log('함수 내부의 코드입니다 ... 1')
  //	console.log('함수 내부의 코드입니다 ... 2')
  //	console.log('함수 내부의 코드입니다 ... 3')
  //	console.log('')
  // }

매개변수와 리턴값

  • 매개변수 : 함수를 호출할 때 괄호 안에 적는 것
  • 리턴값 : 함수의 최종 결과
  function 함수(매개변수, 매개변수, 매개변수) [
      문장
      문장
      return 리턴값
  }
  <script>
      function f(x) {
          return x * x
      }

      console.log(f(3))
  </script>

  // 실행 결과
  // 9

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

  <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>

  // 실행 결과
  // 2020년은 윤년일까? === true
  // 2010년은 윤년일까? === false
  // 2000년은 윤년일까? === true
  // 1900년은 윤년일까? === false

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, 500)}`)
  </script>

  // 실행 결과
  // 1부터 100까지의 합: 5050
  // 1부터 500까지의 합: 125250

최소값 구하는 함수

  <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>

  // 실행 결과
  // 52,273, 32, 103, 275, 24, 57 중에서
  // 최소값 = 24

나머지 매개변수

  • 가변 매개변수 함수 : 호출할 때 매개변수의 개수가 고정적이지 않은 함수
  // 함수의 매개변수 앞에 마침표 3개(...)를 입력하면 매개변수들이 **배열**로 들어옴
  function 함수 이름(... 나머지 매개변수) { }
  <script>
      function sample(...items) {
          console.log(items)
      }

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

  // 실행 결과
  // [1, 2]
  // [1, 2, 3]
  // [1, 2, 3, 4]
  <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>

  // 실행 결과
  // min(52, 273, 32, 103, 275, 24, 57)
  // = 24

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

	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>

  // 실행 결과
  // 1 2 []
  // 1 2 [3]
  // 1 2 [3, 4]

Array.isArray() → 배열 확인

  <script>
      function min(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
      }

      console.log(`min(배열): ${min([52, 273, 32, 103, 275, 24, 57])}`)
      console.log(`min(숫자, ...): ${min(52, 273, 32, 103, 275, 24, 57)}`)
  </script>

  // 실행 결과
  // min(배열): 24
  // min(숫자, ...): 24

전개 연산자

  • 배열을 전개해서 함수의 매개변수로 전달해주는 전개 연산자
	함수 이름(...배열)
  <script>
      function sample(...items) {
          console.log(items)
      }

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

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

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

기본 매개변수

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

  function sample(a=기본값, b) { }
  <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원

콜백 함수

  • 매개변수로 전달하는 함수
  <script>
      function callThreeTimes (callback) {
          for (let i = 0; i < 3; i++) {
              callback(i)
          }
      }

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

      callThreeTimes(print)
  </script>

  // 0번째 함수 호출
  // 1번째 함수 호출
  // 2번째 함수 호출
  <script>
      function callThreeTimes (callback) {
          for (let i = 0; i < 3; i++) {
              callback(i)
          }
      }

      callThreeTimes(function (i) {
          console.log(`${i}번째 함수 호출`)
      })
  </script>

  // 0번째 함수 호출
  // 1번째 함수 호출
  // 2번째 함수 호출

forEach()

  • 배열이 갖고 있는 함수(메소드)로써 단순하게 배열 내부의 요소를 사용해서 콜백 함수를 호출한다.
<script>
	const numbers = [273, 52, 103, 32, 57]

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

// 0번째 요소 : 273
// 1번째 요소 : 52
// 2번째 요소 : 103
// 3번째 요소 : 32
// 4번째 요소 : 57

map()

  • 콜백 함수에서 리턴한 값들을 기반으로 새로운 배열을 만드는 함수이다.
<script>
	let numbers = [273, 52, 103, 32, 57]

	numbers = numbers.map(function (value, index, array) {
		return value * value
	})

	numbers.forEach(console.log)
</script>

// 74529 0 Array(5)
// 2704 1 Array(5)
// 10609 2 Array(5)
// 1024 3 Array(5)
// 3249 4 Array(5)

filter()

  • 콜백 함수에서 리턴하는 값이 true 인 것들만 모아서 새로운 배열을 만드는 함수이다.
<script>
	const numbers = [0, 1, 2, 3, 4, 5]

	const evenNumbers = numbers.filter(function (value) {
		return value % 2 === 0
	})

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

// 원래 배열: 0, 1, 2, 3, 4, 5
// 짝수만 추출 : 0, 2, 4

 

화살표 함수

  (매개변수) => {

  }

  (매개변수) => { }
  > const array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  undefined

  > array.map((value) => value * value)
  (10) [0, 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>

  // 0
  // 4
  // 16
  // 36
  // 64

⇒ 어떤 메소드가 리턴하는 값을 기반으로 해서 함수를 줄줄이 사용하는 것을 메소드 체이닝이라고 부른다.

 

타이머 함수

  • 특정 시간마다 또는 특정 시간 이후에 콜백 함수를 호출할 수 있다.
  • setTimeout(함수, 시간) : 특정 시간 후에 함수를 한 번 호출한다.
  • setInterval(함수, 시간) : 특정 시간마다 함수를 호출한다.
  <script>
      setTimeout(() => {
          console.log(`1초 후에 실행됩니다`)
      }, 1 * 1000)

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

  // 1초 후에 실행됩니다
  // 1초마다 실행됩니다(0번째)
  // 1초마다 실행됩니다(1번째)
  // 1초마다 실행됩니다(2번째)
  // 1초마다 실행됩니다(3번째)
  // ...계속...
  • clearTimeout(타이머_ID) : setTimeout() 함수로 설정한 타이머를 제거한다.
  • clearInterval(타이머_ID) : setInterval() 함수로 설정한 타이머를 제거한다. → 타이머_ID는 setTimeout() 함수와 setInterval() 함수를 호출할 때 리턴값으로 나오는 숫자이다.
  <script>
      let id
      let count = 0
      id = setInterval(() => {
          console.log(`1초마다 실행됩니다(${count}번째)`)
          count++
      }, 1 * 1000)

      let count = 0
      setTimeout(() => {
          console.log(`타이머를 종료합니다.`)
          clearInterval(id)
      }, 5 * 1000)
  </script>

  // 1초마다 실행됩니다(0번째)
  // 1초마다 실행됩니다(1번째)
  // 1초마다 실행됩니다(2번째)
  // 1초마다 실행됩니다(3번째)
  // 1초마다 실행됩니다(4번째)
  // 타이머를 종료합니다.
  • 예제
    • 예제 1 
      <script>
	let numbers = [273, 25, 75, 52, 103, 32, 57, 24, 76]

    numbers = numbers.filter((value) => value % 2 === 1)
    numbers = numbers.filter((value) => value <= 100)
    numbers = numbers.filter((value) => value % 5 === 0)
    console.log(numbers)
</script>

// 동일한 형식

<script>
	let numbers = [273, 25, 75, 52, 103, 32, 57, 24, 76]

    numbers = numbers
								.filter((value) => value % 2 === 1)
						    .filter((value) => value <= 100)
						    .filter((value) => value % 5 === 0)
    console.log(numbers)
</script>

// 실행 결과
// (2) [25, 75]
    • 예제 2 
      <script>
    const array = ['사과', '배', '귤', '바나나']

    console.log(`# for in 반복문`)
    array.forEach((item, i) => {
        console.log(i)
    })

    console.log(`# for of 반복문`)
    array.forEach((item, i) => {
        console.log(item)
    })
</script>

// # for int 반복문
// 0
// 1
// 2
// 3
// # for of 반복문
// 사과
// 배
// 귤
// 바나나
저작자표시 비영리 변경금지

'Programming Language > JavaScript' 카테고리의 다른 글

[JavaScript] 자료의 비파괴와 파괴  (0) 2023.10.13
[JavaScript] 배열  (0) 2023.10.13
[JavaScript] 조건문  (0) 2023.09.03
[JavaScript] 자료와 변수  (0) 2023.08.31
[JavaScript] 자바스크립트란?  (0) 2023.08.31
'Programming Language/JavaScript' Related Articles more