ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • JavaScript 함수
    Front-End/JavaScript 2024. 2. 23. 12:48
    728x90
    반응형

    함수(Function)

        - 호출(Call, invoke) 가능한 대상
        - 반복적으로 여러곳에서 사용될 가능성이 농후한 로직을 분리하기 위함
        - 함수의 명명법은 카멜케이스. 또한 이는 동사이거나 '동사+목적어'의 형태를 가지는 것이 바람직

    함수 호출

        - 일반 함수와 화살표 함수를 구분하지 않고 아래와 같이 호출할 수 있다.

    [함수 이름]([전달 인자], ...?)


    가령, parseInt라는 이름을 가지는 함수에 전달인자 '3.141592'를 전달하여 호출하는 표현은 아래와 같다.

    parseInt('314');


    추가로 console의 멤버인 log 함수에 전달인자 'Hello World'를 전달하여 호출하는 표현은 아래와 같다 

    console.log('Hello World');



    일반 함수    

    일반 함수

    function [함수 이름]([매개 변수, ...]){
        [구현부]
    }


    가령, 전달 받은 매개 변수 a와 b의 합을 반환하기 위한 함수 sum은 아래와 같이 만들 수 있다.

    function sum(a, b){
        return a + b
    }


    return 키워드는 해당 함수의 호출 결과를 반환하기 위해 사용
    return 키워드는 해당 위치에서 해당 함수의 실행을 즉시 종료.

    추가로 반환값 없이 해당 함수의 실행을 고의로 종료하기 위해 return;만 작성하기도 함
    반환 값이 없는 함수의 경우 return 키워드를 작성하지 않기도 하는데, 이 때 해당 함수의 호출 결과는 undefined
        

    익명 함수

    let [변수 이름] = function ([매개 변수, ...]){
        [구현부]
    }


    전달받은 매개변수 a와 b의 합을 받기 위한 익명 함수를 sum이라는 변수에 할당하기 위해 아래와 같이 작성할 수 있다

    let sum = function(a, b){
        return a+b;
    }



    화살표 함수

    let [변수 이름] = ([매개 변수,...]?) =>{
    [구현부]
    }


    전달받은 매개변수 a와 b의 합을 받기 위한 익명 함수를 sum이라는 변수에 할당하기 위해 아래와 같이 작성할 수 있다

    let sum = (a,b) =>{
        return a+b;
    }


    화살표 함수의 구현부에 구문이 한개 밖에 없다면 중괄호를 생략 가능,

    이러한 구문이 return구문이라면 return 키워드도 생략 가능

    let sum = (a,b) => a+b;


    위 함수 sum의 구현부는 단순 a+b지만 사실 return a+b;가 축약된 형태

    가변 인자

        - 호출부의 전달 인자를 쉼표(,)로 구분하여 여러개 전달 받기 위해 사용
        - 전달받은 가변 인자는 배열(Array)

    function sum(...nums){
        let result = 0;
        for (let num of nums){
            result += num;
        }
        return result;
    }
    
    sum(1, 3, 5, 7, 9);     //25
    sum(2, 4, 6, 8, 10);    //30
    sum(10, 20, 30, 40);    //100
    sum();                  //0
    sum(1000);              //1000



    내장 함수

        - alert(x)          : 문자열 x를 문구로 가지고 확인 버튼을 가지는 단순 경고창 표시
        - confirm(x)        : 문자열 x를 문구로 가지고 확인과 취소 버튼을 가지는 확인창 표시.
                                사용자가 확인시 true, 취소시 false 반환

        - inFinite(x)       : 주어진 값 x가 유한한가의 여부 반환
        - isNaN(x)          : 주어진 값 x가 NaN인가의 여부 반환

        - parseFloat(x)     : 문자열 x를 실수로 변환 반환
        - parseInt(x)       : 문자열 x를 정수로 변환 반환

        - setTnterval(f, t) : t 밀리초를 주기로 함수 f를 실행하기 위해 사용, 인터벌 객체의 식별자인 숫자 반환
            clearInterval(i)    : setInterval 함수 호출에 의해 발생한 인터벌 객체의 등록을 해제하기 위해 사용한다.
                                인자 i로는 setInterval 함수 호출에 의해 발생한 인터벌 객체의 식별자인 숫자값을 전달해야 함

        - setTimeout(f, t)  : t 밀리초 후에 함수 f를 1회 실행하기 위해 사용. 타임아웃 객체의 식별자인 숫자 반환. 
            clearTimeout(i)     : 인터벌 객체의 등록을 해제하기 위해 사용한다.
                                    인자 i로는 setTimeout 함수 호출에 의해 발생한 타임아웃 객체의 식별자인 숫자값을 전달해야 함

    728x90
    반응형

    'Front-End > JavaScript' 카테고리의 다른 글

    JavaScript DOM, Window  (0) 2024.02.23
    JavaScript 오브젝트  (0) 2024.02.23
    JavaScript 조건문과 반복문  (0) 2024.02.23
    JavaScript 연산자  (0) 2024.02.23
    JavaScript 변수와 상수, 배열  (0) 2024.02.23
Designed by Tistory.