자바스크립트의 함수에 대해 알아보기 I

함수는 여러 코드들을 하나로 묶어 관리함으로 쉽고 편하게 프로그래밍할 수 있도록 해줍니다. 함수를 사용하게 되면 프로그램이 간략하게 되며 반복적인 작업이 줄어들게 되어 프로그램 작성을 편리하게 해줍니다. 함수에 대해 자세히 알아보고 이를 적극 활용하여 보다 즐거운 프로그래밍이 되도록 합시다.

 

Visual Studio Code 설치

Visual Studio Code 설치

 

Visual Studio Code 자바스크립트 실행 확인 가능하도록 추가 설치

Visual Studio Code 자바스크립트 실행 확인 가능하도록 추가 설치

 

 

 

 

1. 함수

 함수의 기본 사용 방법은 다음과 같습니다.

 

       function 함수명( 매개변수 ) { 

           코드

           return 리턴값            

       }

 

형태는 간단합니다. ( ) 안에는 매개변수라 하는 변수가 입력되는데 이는 함수를 호출할 때 사용됩니다. 그리고, { } 안에는 코드들이 입력되게 됩니다.

즉, 함수는 매개변수에 의해 함수가 불러지게되고 { } 안의 코드들이 실행되게 되며 리턴값을 반환하게 됩니다.

 

Visual Studio Code를 실행시키고 새파일을 열어 아래와 같이 Javascript 코드를 작성합니다.

 

    function cross(x, y) {

        return x * y;

    }

 

    console.log(cross(2, 3));

 

작성한 파일을 확장명이 js인 Javascript 파일로 저장을 하고 Ctrl + Alt + N을 눌러 실행 결과값을 확인합니다. 그러면 6이 뜨는 것을 보실 수 있습니다.

 

function cross(x, y)에서 cross는 함수명이며 x와 y는 매개변수로 함수가 호출될때 입력받을 값을 저장하게되는 변수입니다.

 

return x * y에서 return은 함수의 결과값을 반환하라는 명령어이며 x * y는 반환값으로 x와 y를 곱한 값을 반환합니다.

 

console.log(cross(2, 3))은 화면에 함수 cross의 반환값을 출력하라는 의미이며 매개변수 값으로 2와 3을 준다는 의미입니다.

 

 

 

2. 콜백 함수 (CallBack Function)

다른 함수의 매개변수로 이용되는 함수를 말합니다. 보통 함수를 사용하면 그 함수 호출되고 함수 내용을 처리한 다음 그 결과값을 리턴합니다. 그런데, 콜백 함수는 함수가 호출되면 함수 내용을 처리합니다. 하지만 바로 결과값을 리턴하는 것이 아니라 매개변수인 함수가 다시 호출될 때 결과를 리턴합니다. 이를 비동기 프로그래밍이라 합니다.

 

Visual Studio Code를 실행시키고 새파일을 열어 아래와 같이 Javascript 코드를 작성합니다.

 

    function cross(x,y,callback) {

       c = x * y

        callback(c)

    }

 

    cross(2,3,function (c) {

        console.log(c)

    })

 

작성한 파일을 확장명이 js인 Javascript 파일로 저장을 하고 Ctrl + Alt + N을 눌러 실행 결과값을 확인합니다. 그러면 6이 뜨는 것을 보실 수 있습니다.

 

결과값은 동일하지만 1번 항의 코드와 2번 항의 코드 실행에 있어서는 다릅니다.

여기서, function (c)는 익명함수입니다. cross 함수는 익명함수를 매개변수인 cross 함수로 인식합니다.

cross(2,3,function (c) : cross 함수를 부르면서 x와 y값으로 2와 3을 전달합니다. cross 함수는 x와 y를 곱한 값을 변수 c에 저장합니다. 그리고, 매개변수인 callback 함수에 c값을 저장하고 있다가 익명함수가 호출될 때 값을 전달합니다.