[JavaScript] 자바 스크립트의 함수 알기

안녕하세요! 첫 번째 과제에서는 자바 스크립트의 함수에 대해 공부하고자 합니다 ✏️

 

 

 

함수란?

먼저 자바스크립트에서 함수란 하나의 동작을 하기 위한 코드 덩어리라고 설명할 수 있습니다.
함수를 정의하면 코드를 간결하게 사용할 수 있을뿐더러, 명령의 목적을 확실하게 구분할 수 있어 편리합니다.

함수를 사용하는 방법은 다음과 같습니다.

1. 함수를 만들 때 이름을 붙이고
2. 필요할 때 함수의 이름을 사용해 실행

1번과 2번을 각각 함수를 선언한다, 함수를 호출한다고 합니다.

 

 

 

함수의 기본형은 다음과 같습니다.

function 함수명() {
    명령
}

 

 

 

다음 코드를 보면서 함수를 선언하고 호출하는 방법을 알아봅시다.

 

 

 

<script>
    function addNumber(){
        console.log(3+8);
    }

    addNumber();
</script>

실행결과 >> 11

addNumber() 함수를 정의하였습니다.

addNumber() 함수는 3+8의 결과를 콘솔에 출력하는 함수입니다.

 

 

 

매개변수를 입력받는 함수

 

 

 

반드시 매개변수를 입력받아야 하는 함수

위의 함수는 오직 3 + 8의 결과만을 출력하기 때문에 재사용할 수 없습니다.

지금부터 재사용이 가능한 addNumber() 함수를 만들어봅시다.

 

 

두 수를 입력받아 더한 값을 출력하는 함수를 만들기 위해서는

"값 두 개를 받겠다." 라는 선언이 필요합니다.

이때 외부로 부터 입력받는 값을 매개변수라고 합니다.

 

 

 

매개변수가 있는 함수는 다음과 같이 선언합니다.

function 함수명(매개변수명, 매개변수명) {
    명령
 }

 

 

 

두 값을 더한 값을 출력하는 함수를 다시 선언해 봅시다.

 

 

 

<script>
    function addNumber(x, y){
        console.log(x+y);
    }

    addNumber(3, 8);
</script>

실행결과 >> 11

위에서 언급한 것처럼, 값 두 개를 받겠다고 선언하였으니 함수를 호출할 때에도 값 두 개를 입력해야 합니다.

 

 

 

기본값을 지정한 매개변수를 입력받는 함수

하지만 함수를 호출할 때 매개변수의 값을 입력받지 못하였을 때에는 NaN(Not a Number) 에러를 발생시킵니다.

이러한 상황을 방지하기 위해 매개변수의 기본값을 지정할 수 있습니다.

 

 

 

매개변수의 기본값을 지정한 함수는 다음과 같이 선언합니다.

function 함수명(매개변수 = 기본값) {
    명령
}

 

 

 

매개변수의 기본값을 지정하여 addNumber() 함수를 선언해 보겠습니다.

<script>
    function addNumber(x = 3, y = 8){
        console.log(x+y);
    }
    addNumber();
</script>

실행결과 >> 11

기본값을 지정하면, 매개변수를 넘겨받지 않아도 에러가 발생하지 않습니다.

 

 

 

반환값이 있는 함수

위에서 만들었던 addNumber() 함수는 오직 콘솔에서만 결괏값을 확인할 수 있습니다.

저는 연산 결과를 화면에도 출력하고 싶고, 변수에 값을 저장하고 싶은데 이럴 때에는 addNumber() 함수를 사용하지 못합니다.

 

 

 

이러한 문제를 해결하기 위해 return 문을 사용한 함수를 정의하고자 합니다.

return문을 사용하면 함수를 실행한 후 그 결괏값을 함수 밖으로 반환할 수 있습니다.

 

 

 

return문이 있는 함수는 다음과 같이 선언합니다.

function 함수명(매개변수명){
    명령
    return 반환값;
}

 

 

 

그럼 return문을 사용하여 addNumber() 함수를 선언해 보겠습니다.

<script>
    function addNumber(x, y){
        var result = x + y;
        return result;
    }
    var a = addNumber(3, 8);
    document.write(addNumber(3, 8));
    console.log(addNumber(3, 8));
</script>

실행결과 >>

반환값이 있으니, 함수의 재사용이 더욱 간편해졌습니다!

---

 

 

 

이번 게시물에서는 자바스크립트의 함수에 대해 아주 기초적인 부분을 공부했습니다!

다음 게시물에서는 익명 함수와 즉시 실행 함수, 다양한 함수 표현식에 대해 공부해 보겠습니다