단비의 코딩 공부 blog

[Vanilla JS]study 27일차 - 함수 본문

javascript&jquery

[Vanilla JS]study 27일차 - 함수

황굽달 2023. 5. 12. 10:42

1. 함수선언

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS - 함수</title>
    </head>
    <body>
        <script>
            //함수 : 코드의 집합
            //1. 기본 함수 선언
            function test01(a,b){
                return a * b;
            }
            console.log(test01(10,5));

            //2. 변수에 담는 함수(익명함수)
            const test02 = function(a,b){
                return a * b;
            }
            console.log(test02(10,5));

            //3. 생성자 함수(객체방식)
            const test03 = new Function('a', 'b', 'return a * b');
            console.log(test03(10,5));

            //4. 화살표함수 (ES6)
            const test04 = (a,b) => a * b;
            console.log(test04(10,5));

            //5. 즉시호출 함수 - 선언과 호출 동시에 실행하는 함수
            (function(){
                console.log(10 * 5);
            })();

        </script>
    </body>
</html>

2. 함수호이스팅

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS - 함수</title>
    </head>
    <body>
        <script>
            //Hoisting : 변수나 함수를 선언한 것을 맨 위로 올리는 javascript 기본 동작

            let x = test01(10,5);
            console.log(x);

            function test01(a,b){
                return a * b;
            }
            //대신 표현식이 복잡하면 호이스팅 처리 안됨
            //항상 선언 먼저, 호출 나중에 하는 습관을 들이는것이 좋음
        </script>
    </body>
</html>

3. 함수도객체

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS - 함수</title>
    </head>
    <body>
        <script>
            //모든 객체는 속성과 메서드를 가지고 있음
           
            function test01(a,b){
                return a * b;
            }
            console.log(typeof(test01)); //function으로 반환
            //함수도 일종의 객체라 속성수 개수를 반환
            //1. 속성 : length - 매개변수를 반환
            console.log(test01.length);

            //2. toString() : 함수를 문자열로 반환
            console.log(test01.toString());


        </script>
    </body>
</html>

4. 함수의 매개변수

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS - 함수</title>
    </head>
    <body>
        <script>
            /*
                //함수선언
                function 함수명(매개변수, parameter){

                }
               
                //함수호출
                함수명(인수,argument);

                *매개변수
                1. JS는 매개변수에 데이터 유형(변수선언)을 지정하지 않음
                2. 함수는 전달된 인수에 대해 유형검사를 수행하지 않음
                3. 인수의 개수를 확인하지 않음
                4. 누락된 것은 undifined로 처리, 혹은 기본값 지정
            */

            //ES6는 매개변수의 기본값 지정 가능
            function test01(a,b=10){
                return a * b;
            }
            console.log(test01(5)); //b를 기본값으로 처리
            console.log(test01(5,5)); //b를 변경해서 처리

            //... 나머지 매개 변수
            //... 을 사용하면 함수가 무한한 인수로 배열 처리
            //합계를 구하는 함수
            function testSum(...args){
                let sum = 0; //인수가 없을 때 값을 지정
                for(let arg of args){ //인수값만큼 반복
                    sum += arg;
                }
                return sum;
            }

            console.log(testSum(1,2,3));
            console.log(testSum(1,2,3,4,5,6,7));

            //인수객체 : 함수에는 arguments라는 내장 객체가 있음, 함수가 호출될 때 인수 배열이 포함

            //숫자 중 최대값 찾는 함수 선언
            function findMax(){
                let max = -Infinity;

                for(let i=0;i<arguments.length;i++){
                    if(arguments[i] > max){
                        max = arguments[i];
                    }
                }
                return max;
            }
            console.log(findMax(10,20,30,100,15,27));
        </script>
    </body>
</html>

5. 메서드

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS - 함수</title>
    </head>
    <body>
        <script>
            //자바스크립트의 모든 함수는 메서드
            //alert나 setInterval 같은 함수는 전역 객체(window)의 메서드

            const person = {
                firstName: 'Tony', // 속성
                lastName : 'Stark',
                fullName : function(){ //메서드
                    return this.firstName + ' ' + this.lastName;
                   
                }
            }
            console.log(person.fullName());
        </script>
    </body>
</html>

6. this 키워드

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS - 함수</title>
    </head>
    <body>
        <button>클릭</button>
        <script>
            //this키워드
            //1. 객체 코드 블록 내부에 사용 : 객체 자신을 참조
            const person = {
                firstName: 'Tony', // 속성
                lastName : 'Stark',
                fullName : function(){ //메서드
                    return this.firstName + ' ' + this.lastName;
                }
            }
            console.log(person.fullName());

            //2. 혼자 써있는 경우 : 전역 객체를 의미
            let x = this;
            console.log(x);

            //3. 함수 내부에 써있는 경우 : 전역 객체를 의미
            function test01(){
                return this;
            }
            console.log(test01());

            //4. 이벤트에서의 this - 이벤트 받는 요소를 의미
            const btn = document.querySelector('button');
            btn.addEventListener('click', function(){
                this.style.backgroundColor = 'red';
            });
        </script>  
    </body>
</html>
저작자표시

'javascript&jquery' 카테고리의 다른 글

[javascript]새로고침 후 랜덤으로 슬랏에 백그라운드 컬러 이동  (0) 2023.06.28
[javascript]해당 슬롯 롤링 및 새로고침 후 백그라운드 색상 랜덤  (0) 2023.06.27
[Vanilla JS]study 26일차 - 네이버 회원가입창 제작  (0) 2023.05.08
[Vanilla JS]study 25일차 - 정규표현식  (0) 2023.05.03
[Vanilla JS]study 24일차 - 배열반복  (0) 2023.04.26
'javascript&jquery' Related Articles more