자바스크립트 다양한 함수 식

B_Tae 2022. 2. 5. 23:02

*제 개인적인 정리이기 때문에 다소 설명이 모호할 수 있습니다.
또한 "html,css,자바스크립트 do it" 책에 내용이 다소 포함되어 있습니다.

함수의 재사용

함수를 사용하는 가장 큰 장점은 재사용성이라 할 수 있다.
예로 alert()함수를 사용할 때 괄호 안에 메시지만 바꿔서 실행 할 수 있다.

이렇듯 재사용할 수 있는 함수를 만들기 위해서는 매개변수, 인수, return이 필요하다.

function plusNum(num1, num2) {
    var sum = num1 + num2 ;
    return sum ; 
}
var result = plusNum(2,3);
document.write(result);

매개변수는 외부에서 값을 받아 줄 변수이며, 함수 괄호 안에 매개변수의 이름을 넣어야한다.
매개변수를 여러 개 사용할 때는 쉼표로 구분하여 나열한다.
위 소스에서 num1, num2가 매개 변수이다.

매개변수가 있는 부분에 실제 값을 인수라 한다.
위 소스처럼 문서 안에서 입력하여 사용할 수도 있고, 사용자에게 받은 정보를 입력받아 사용할 수도 있다.
2, 3이 인수가 된다.

값을 반환한다는 의미이다. return을 사용하지 않는다면 변수 sum은 함수 안에만 존재하게 된다.
이때 값을 밖에서 사용하기 위해 return 예약어를 사용해야한다.

ES6부터는 매개변수를 선언할 때 기본값을 입력할 수 있다.
매개변수에 값이 입력되지 않았을 때 기본값을 사용한다.

function plusNum(num1, num2 = 5, num3 = 10) {
    var sum = num1 + num2 + num3 ;
    return sum ; 
}

위 소스를 예로 들어보면 num2 , num3는 각각 5, 10이라는 기본값을 가지고 있다. 따라서

plusNum(1) ; // num1 = 1 , num2 = 5 (기본값), num3 = 10(기본값)
plusNum(1, 7); // num1 = 1 , num2 = 7 , num3 = 10(기본값)

이렇게 생각하면 된다.

앞서 예시 소스에서는 함수 이름을 선언하고 호출하여 사용하는 방식을 사용했다.
함수명만 알면 어디서나 실행 할 수 있어 많이 사용하는 방식이고, 이 밖에 다른 방식으로 표현 할 수도 있다.

말 그대로 이름이 없는 함수이다. 익명 함수는 함수 자체가 식이 됨으로 변수에 할당할 수 있고, 다른 함수의 매개변수로 사용할 수도 있다.

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

한 번만 실행하는 함수라면 함수를 정의함과 동시에 실행 할 수 있다.

기본형

(function(){
    명령
}());

함수가 하나의 식이 됨으로 마지막에 세미콜론을 붙인다. 또한 매개변수와 인수를 작성 할 수 있다.

ES6버전부터 => 표기법을 사용해 함수를 선언할 수 있다. 단, 익명 함수에서만 가능하다.

기본형
(매개변수) => {함수 내용}

여러 조건에 따라 모양이 약간씩 변경된다.