Front-End/JavaScript

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
반응형