// 최상단에 jquery를 추가해주자

 

오늘은 05 - 1장의 내용을 정리해 보자.

 

05 - 1장의 제목은 '함수의 기본 형태'로, 프로그래밍 문법의 꽃 '함수'에 대해 다루고있다.

 

중요한 내용이니만큼 천천히 정리하도록 하자.

 

그럼 정리 시작!

 

(☆)익명 함수(☆)

함수는 코드의 집합을 나타내는 자료형이며, 기본 형태는 다음과 같다.

 

fuction () {...}

 

함수를 사용하면 좋은점은 다음과 같다.

 

  • 반복되는 코드를 한 번만 정의해놓고 필요할 때마다 호출하므로 반복 작업을 피할 수 있다.
  • 긴 프로그램을 기능별로 나눠 여러 함수로 나누어 작성하면 모듈화로 전체 코드의 가독성이 좋아진다.
  • 기능별(함수별)로 수정이 가능하므로 유지보수가 쉽다
<script>
 // 변수를 생성
 const 함수 = function () {
  console.log('함수 내부의 코드입니다...1')
  console.log('함수 내부의 코드입니다...2')
  console.log('함수 내부의 코드입니다...3')
 }
 
 함수() // 함수를 호출
 
 console.log(함수) // 함수 자체도 단순한 자료이므로 출력할 수 있다
</script>

 

이름이 붙어있지 않은 함수를 익명함수라고 표현한다. 현재 코드에서 함수를 출력하면 f () {} 의 형태로 출력된다. 이때 () 앞에 등장하는 것이 함수의 이름이다.

익명 함수는 함수 자체가 식이므로 함수를 변수에 할당할 수 있고 다른 함수의 매개변수로 사용할 수도 있다.

 

선언적 함수

이름이 있는 함수를 선언적 함수라고 한다.

 

function 함수명() {...}

 

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

 

let 함수명 = function () {...}

 

<script>
 function 함수 () { // 익명함수처럼 const나 let을 이용해 할당할 필요가 없다.
  console.log('함수 내부의 코드입니다...1')
  console.log('함수 내부의 코드입니다...2')
  console.log('함수 내부의 코드입니다...3')
 }

 함수()

 console.log(함수) // 출력을 해보면 이전과는 다르게 () 앞에 함수의 이름이 출력된다

</script>

 

기본적인 함수 예제

 

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

 

  • 4로 나누어 떨어지는 해는 윤년이다.
  • 하지만 100으로 나누어 떨어지는 해는 윤년이 아니다.
  • 하지만 400으로 나누어 떨어지는 해는 윤년이다.

명시적 함수를 이용한 기본 풀이

 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script>
        function isLeapYear(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(`2020년은 윤년일까? ${isLeapYear(2020)}`)
        console.log(`2010년은 윤년일까? ${isLeapYear(2010)}`)
        console.log(`2000년은 윤년일까? ${isLeapYear(2000)}`)
        console.log(`1900년은 윤년일까? ${isLeapYear(1900)}`)
    </script>
</head>
<body>
   

 

익명 함수(화살표 함수)를 이용한 풀이

 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script>
        const isLeapYear = (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(`2020년은 윤년일까? ${isLeapYear(2020)}`)
        console.log(`2010년은 윤년일까? ${isLeapYear(2010)}`)
        console.log(`2000년은 윤년일까? ${isLeapYear(2000)}`)
        console.log(`1900년은 윤년일까? ${isLeapYear(1900)}`)
    </script>
</head>
<body>
   
</body>
</html>

 

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

 

매개변수로 A, B를 입력받고 리턴값으로 A부터 B까지 더한 값을 출려하면 된다.

 

명시적 함수를 이용한 기본 풀이

 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script>
        function sumAll (start, end) {

            let output = 0

            for (let i = start; i <= end; i++) {
                output += i
            }

            return output
        }

        console.log(`1부터 100까지의 합: ${sumAll(1, 100)}`)
        console.log(`1부터 500까지의 합: ${sumAll(1, 500)}`)
    </script>
</head>
<body>
   
</body>
</html>

 

익명 함수(화살표 함수)를 이용한 풀이

 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script>
        const sumAll = (start, end) => {

            let output = 0

            for (let i = start; i <= end; i++) {
                output += i
            }

            return output
        }

        console.log(`1부터 100까지의 합: ${sumAll(1, 100)}`)
        console.log(`1부터 500까지의 합: ${sumAll(1, 500)}`)
    </script>
</head>
<body>
   
</body>
</html>

 

3. 최솟값을 구하는 함수 만들기

 

배열을 매개변수로 전달받는 것, for of 반복문을 활용한 것을 유심히 살펴보자!

 

명시적 함수를 이용한 기본 풀이

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script>
        function 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>

 

익명 함수(화살표 함수)를 이용한 풀이

 

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

 

05 - 1장 '함수의 기본 형태'의 첫 번째 내용 정리는 여기서 마무리하자.

 

자바스크립트에서 함수의 형태와 사용법을 간단한 예제를 통해 살펴보았다.

 

내일은 함수의 기본 형태를 마저 살펴보도록 하자!

 

오늘 하루도 쌓였다.

저작자표시 비영리 변경금지 (새창열림)

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

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

티스토리툴바