본문 바로가기
혼공스(자바스크립트)

[혼공스] 4주차 _ Chapter 05

비틀비틀멘탈 2024. 7. 29. 00:09

 

 

05 - 1     함수의 기본 형태

 

 

 

 익명 함수

→ 함수 : 코드의 집합을 나타내는 자료형

→ function ( ) { } 

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

        함수()
        함수()

        console.log(typeof 함수) // 함수의 자료형 확인
        console.log(함수)   // 함수 자체를 출력한 결과 
    </script>

→ 익명 함수: 이름이 붙어있지 않은 함수 

 

 

 

 

 

 

 선언적 함수

→ 이름이 있는 함수

→function 함수 ( ) { }

→  선언적 함수는 let 함수 = function ( ) { } ; 과 같은 기능을 수행한다.  

    <!-- 선언적 함수 선언_손코딩 5-1-2 -->
    <script>
        function 함수 () {   // 다르게 선언 
            console.log('함수 내부의 코드 ... 1')
            console.log('함수 내부의 코드 ... 2')
            console.log('함수 내부의 코드 ... 3')
            console.log('')
        }

        함수()
        함수()

        console.log(typeof 함수) // 함수의 자료형 확인
        console.log(함수)   // 함수 자체를 출력한 결과 
    </script>

f 함수 (이름) ( ) => 이렇게 변경됨 !

 

 

 

 

 

 매개변수와 리턴값

 

→  함수 호출 시 괄호 안에 적는 것이 매개변수, 함수의 최종 결과는 리턴값 

→   function 함수 (매개변수, 매개변수, 매개변수) {

            문장

            문장

            return 리턴 값 } 

    <!-- 기본 형태의 함수 _ 손코딩 5-1-3 -->
    <script>
        function f(x) {
            return x * x
        }

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

 3 * 3 이 되겠져 ~~ 는 9입니다 

 

 

 

 기본적인 함수 예제

 

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

 

→  4년마다 돌아오는 2월 29일이 들어있는 해를 윤년이라고 한다. 

→  100으로 나누어 떨어지는 해는 윤년 ❌

→  400으로 나누어 떨어지는 해는 윤년 ⭕

    <!-- 윤년 확인 함수 _ 손코딩 5-1-4 -->
    <script>
        function isLeapYear(year) {
            return (year % 4 === 0) && (year % 100 !== 0) || (year % 400 === 0)
        }

        console.log(`2002년은 윤년? === ${isLeapYear(2002)}`)
        console.log(`2013년은 윤년? === ${isLeapYear(2013)}`)
        console.log(`2020년은 윤년? === ${isLeapYear(2020)}`)
        console.log(`1974년은 윤년? === ${isLeapYear(1974)}`)
    </script>

헉 올해 2024도 윤년이었다니 ...!

 

✅기본 미션

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

        console.log(`2022년은 윤년? === ${isLeapYear(2022)}`)

    </script>

❌ 올해가 윤년이더라 ~ 이말이야 ~ 

 

 

 

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

    <!-- a부터 b까지 더하는 함수_손코딩 5-1-5 -->
    <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>

나도 이렇게 빨리 계산할 수 있는 머리라면 .. 🥹

 

→  숫자를 계산해서 출력할 경우

→  function 함수 ( 매개변수 ) {

          let output = 초깃값 

          처리한다

          return output           } 

 

 

 

✅ 최솟값 구하는 함수 만들기

 

    <!-- 최솟값을 구하는 함수 _ 손코딩 5-1-6 -->
    <script>
        function min(array) {
            let output = array[0]
            for (const item of array) {
                if (output > item) {
                    output = item
                }
            }
            return output
        }

        const testArray = [52, 243, 32, 102, 376, 24, 57]
        console.log(`${testArray} 중에서`)
        console.log(`최솟값 = ${min(testArray)}`)
    </script>

→  배열 내부에 있는 숫자 중에서 가장 작은 함수 구하는 코드 

좋네요 . . 흥미롭군녀
output < item을 해주면 가장 큰 값이 나오겠죠 ?

 

 

 

 

 

 나머지 매개변수 

→   호출할 때 매개변수의 개수가 고정적이지 않은 함수 : 가변 매개변수 함수

→   자바스크립트에서 이러한 함수를 구현할 때 : 나머지 매개변수 라는 문법 사용 

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

    <!-- 나머지 매개변수 사용한 배열 만들기 _ 손코딩 5-1-7 -->
    <script>
        function sample(...items) {
            console.log(items)
        }

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

 

매개변수가 배열 형태로 들어온다

 

 

    <!-- 나머지 매개변수를 사용한 min()함수_ 손코딩 5-1-8 -->
    <script>
        function min(...items) {
            // 매개변수 items는 배열처럼 사용
            let output = items[0]
            for (const item of items) {
                if (output > item) {
                    output = item
                }
            }
            return output
        }

        console.log('min(32, 532, 14, 345, 23, 65)')
        console.log(`=${min(32, 532, 14, 345, 23, 65)}`)
    </script>

 

 

 

 

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

 

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

 

 

→   min (배열) 형태로 매개변수에 배열을 넣으면 배열 내부에서 최솟값을 찾아주는 함수

→   min ( 숫자, 숫자, ... ) 형태로 매개변수를 넣으면 숫자들 중에서 최솟값을 찾아주는 함수 

    <!-- 매개변수의 자료형에 따라 다르게 작동하는 min()함수 _ 손코딩 5-1-10 -->
    <script>
        function min(first, ...rests) {
            let output 
            let items

            // 매개변수의 자료형에 따라 조건 분기하기 
            if (Array.isArray(first)) {
                output = first[0]
                items = first
            } else if (typeof(first) === 'number') {
            // 어떤 자료가 배열인지 (정확하게) 확인하려면 Array.isArray( ) 메소드 활용 
            //일반적인 typeof 연산자로는 배열을 확인할 수 없음 
                output = first
                items = rests
            }

            // 최솟값 구하는 공식 
            for (const item of items) {
                if (output > item) {
                    output = item
                }
            }
            return output 
        }

        console.log(`min(배열): ${min([32, 543, 14, 164, 63, 425, 75])}`)
        console.log(`min(숫자, ...): ${min(32, 543, 14, 164, 63, 425, 75)}`)
    </script>

 

 

 

✅전개 연산자

→   자바스크립트는 배열을 전개해서 함수의 매개변수로 전달해주는 전개 연산자를 제공한다. 

→   함수 이름 ( ... 배열 ) 

    <!-- 전개 연산자의 활용 _ 손코딩 5-1-11 -->
    <script>
        function sample (...items) {
            console.log(items) 
        }

        // 전개 연산자 사용 여부 비교하기
        const array = [1, 2, 3, 4]

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

→   첫 번째는 4개의 요소가 있는 배열이 들어왔고 

       두 번째는 숫자가 하나하나 들어왔다. 

 

 

 

 

 

 

기본  매개변수 

→   기본 매개변수 : 매개변수에 기본값을 지정 

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

<!-- 기본 매개변수 활용 _ 손코딩 5-1-12 -->
    <script>
        function earnings (name, wage=9860, hours=40) {
            console.log(`# ${name} 님의 급여 정보`)
            console.log(`- 시급: ${wage}원`)
            console.log(`- 근무시간: ${hours}시간`)
            console.log(`- 급여: ${wage * hours}원`)
            console.log(``)
        }

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

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

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

현재 최저시급으로 계산했답니다 ^^ 💸

 

 

 <!-- 기본 매개변수 추가한 윤년 함수_ 손코딩 5-1-13 -->
    <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>

나도 몰랐던 사실 !!

 

 

 

 

05 - 2     함수 고급 

 

 

콜백 함수

→   매개변수로 전달하는 함수를 콜백(callback)함수라고 한다. 

   <!-- 콜백: 선언적 함수 사용 _ 손코딩 5-2-1 -->
    <script>
        function callThreeTimes (callback) {
            for (let i = 0; i < 3; i ++) {
                callback(i)
            }
        }

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

        callThreeTimes(print)
    </script>

→   callThreeTimes()함수는 함수를 매개변수로 받아 해당 함수를 3번 호출한다. 

       callThreeTimes( )함수의 callback 매개변수에 print ( ) 함수를 전달한다. 

       callThreeTimes ( ) 함수 내부에서는 callback( i ) 혀애로 함수를 호출하고 있다. 

       따라서 매개변수로 전달했던 print ( ) 함수가 print(0), print(1), print(2) 형태로 

       차례차례 호출되어 실행 결과와 같은 결과를 나타낸다. 

콜백은 많이 쓰이는데 내가 이해를 잘 못하고 쓰는 것 같아,, 이래 적어봅니다 .. 

 

   <!-- 익명 함수 사용 _ 손코딩 5-2-2 -->
    <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 ) {  } 

   <!-- 배열의 forEach( ) 메소드 _ 손코딩 5-2-3 -->
    <script>
        const num = [254, 25, 183, 65, 74]

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

 

 

 

 

 

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

 

→   배열이 갖고 있는 함수

→   콜백 함수에서 리턴한 값들을 기반으로 새로운 배열을 만드는 함수 

 

<!-- 배열의 map() 메소드_손코딩 5-2-4 -->
    <script>
        let num = [254, 25, 183, 65, 74]

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

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

예제와 숫자를 다르게 넣었더니 맞는진 모르겠네예

구조가 같으니 ! 뭐 ! 

 

 

→   원하는 매개변수만 받을 때에는 

       num = num.map(function (value)  {

       와 같이 만들어서 사용 

 

 

 

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

 

→   콜백 함수에서 리턴하는 값이 true인 것들만 모아서 새로운 배열을 만드는 함수 

<!-- 배열의 filter()메소드 _ 손코딩 5-2-5 -->
    <script>
        const num = [0, 1, 2, 3, 4, 5]
        const evenNum = num.filter(function (value) {
            return value % 2 === 0
        })
        
        console.log (`원래 배열 : ${num}`)
        console.log(`짝수만 추출: ${evenNum}`)
    </script>

 

 

 

 

 

 

화살표 함수

→   단순한 형태의 콜백 함수를 쉽게 입력하기 위한 생성 방법

→   (매개변수) => { } 

→   (매개변수) => 리턴값 

<!-- 배열의 메소드와 화살표 함수 _ 손코딩 5-2-6 -->
    <script>
        let num = [0, 1, 2, 3, 4, 5, 5, 6, 7, 8, 9]

        num
            .filter ((value) => value % 2 === 0)
            .map ((value) => value * value)
            .forEach((value) => {
                console.log(value)
            })
    </script>

→   왜 이렇게 나오나 했네 ... 

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

 

 

 

 

 

타이머 함수

→   특정 시간마다 또는 특정 시간 이후에 콜백 함수를 호출할 수 있는 함수

함수 이름 설명
setTimeout(함수, 시간) 특정 시간 후에 함수를 한 번 호출합니다.
setInterval(함수, 시간) 특정 시간마다 함수를 호출합니다. 

 

<!-- 타이머 _ 손코딩 5-2-7 -->
    <script>
        setTimeout (() => {
            console.log('1초 후에 실행')
        }, 1 * 1000)

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

무한 실행

 

→   밀리 초 단휘 : 1 * 1000 로 입력 ( 1000으로 입력해도 됨 ) 

 

 

→   타이머를 종료하고 싶을 때

함수 이름 설명
clearTimeout (타이머_ID) setTimeout ( ) 함수로 설정한 타이머를 제거합니다.
clearInterval (타이머_ID) setInterval ( ) 함수로 설정한 타이머를 제거합니다.

 

<!-- 타이머 취소_ 손코딩 5-2-8 -->
    <script>
        let id
        let count = 0
        id = setInterval(() => {
            console.log(`1초마다 실행된다(${count}번째)`)
            count++
        }, 1000)

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

코드대로 5초 후에 타이머 종료됨 ! 

 

 

 

 

 

✔️ 블록과 함수 블록을 사용해 이름 충돌 문제 해결 

<!-- 손코딩 5-2-10 -->
    <script>
        let pi = 3.14
        console.log(`파이 값은 ${pi}`)
        
        // 블록 사용 스코프 
        {
            let pi = 3.141592
            console.log(`파이 값은 ${pi}`)
        }
        console.log(`파이 값은 ${pi}`)

        // 함수 블록 사용 스코프 
        function sample() {
            let pi = 3.141592
            console.log(`파이 값은 ${pi}`)
        }
        sample()
        console.log(`파이 값은 ${pi}`)
    </script>

→   내부 블록에서는 내부 블록에서 선언한 변수만 볼 수 있음

→   섀도잉: 블록이 다른 경우 내부 변수가 외부 변수를 가리는 현상 

 

 

 

✔️ 엄격 모드

→   문자열이 읽어들인 순간부터 코드를 엄격하게 검사한다. 

→    <script> 

           ( function ( ) {

                 'use strict'

                  문장

                  문장

             })   ( ) 

       </script> 

<!-- 엄격 모드에서 선언 없이 변수 사용 _ 손코등 5-2-13 -->
    <script>
        'use strict'
        data = 10
        console.log(data)
    </script>

→   변수를 let 키워드 등으로 선언하지 않고 사용하여 오류 

 

 

 

 

 

✔️ 익명 함수와 선언적 함수의 차이 

 

✅ 익명 함수의 사용

→   순차적인 코드 실행에서 코드가 해당 줄을 읽을 때 생성된다. 

<!-- 익명 함수 호출 -->
    <script>
        let 익명함수

        익명함수 = function() {
            console.log('1번째 익명함수')
        }
        익명함수 = function() {
            console.log('2번째 익명함수')
        }
        익명함수()
    </script>

→   순차적으로 코드가 실행되면서 '2번째 익명함수' 호출하는 함수가 익명 함수 변수에 할당됨 

 

 

 

✅ 선언적 함수의 사용

→   순차적인 코드 실행이 일어나기 전에 생성된다. 

       (같은 블록이라면 어디에서 함수를 호출해도 상관없음)

<!-- 선언적 함수 호출 -->
    <script>
        선언적함수() 

        function 선언적함수() {
            console.log('1번째 선언적함수')
        }
        function 선언적함수() {
            console.log('2번째 선언적함수')
        }
    </script>

 

 

 

 

 

✅ 선언적 함수와 익명 함수의 조합

 

→   선언적 함수는 먼저 생성, 이후에 순차적인 코드 진행을 시작하면서 익명 함수 생성 

<!-- 선언적 함수와 익명 함수의 조합 -->
    <script>
        //익명 함수 생성 
        함수 = function () {
            console.log('익명 함수')
        }

        // 선언적 함수 생성하고 할당
        function 함수() {
            console.log('선언적 함수')
        }

        함수()
    </script>

→   익명 함수 - 코드를 읽을 때와 같은 순서로 함수가 선언됨 

→   선언적 함수 - 코드를 읽는 순서와 다른 순서로 함수가 선언됨 

 

 

 

이번엔 이해가 잘 안 된다 싶으면 내용도 3번씩 읽어줘야하구 .. 

헷갈리구 .. 막 그래용 .. 

나는 가짜

 

 

'혼공스(자바스크립트)' 카테고리의 다른 글

[혼공스] 6주차 _ Chapter 07 ~ 08  (0) 2024.08.20
[혼공스] 5주차 _ Chapter 06  (0) 2024.08.13
[혼공스] 3주차 _ Chapter 04  (0) 2024.07.22
[혼공스] 2주차_Chapter 03  (2) 2024.07.14
[혼공스] 1주차_Chapter 01~02  (0) 2024.07.08

'혼공스(자바스크립트)' Related Articles

티스토리툴바