티스토리 뷰

Programming/JavaScript, jQuery

[javascript 8강] 함수

국브 2019. 2. 12. 15:19

 [javascript 8강] 함수



자바스크립트에서 중요한 함수에 대해서 이번글에서 알아보겠습니다.

함수는 모든 프로그래밍 언어에서 존제합니다.

예를 들어 자바에서는 메소드 라고 불리고..

자바 스크립트에서는 함수라고 불립니다.

javascrtip 에서 함수는 자율적으로 만들어 사용할수 있습니다.

만약 계산기를 만든다면..

덧샘을 계산하는 함수, 곱샘을 계산하는 함수, 뺏샘을 계산하는 함수 등등등..

이렇게 여러개의 기능이 필요합니다.

이러한 기능을 함수로 만들어두고 함수를 호출하여 사용하면 됩니다.

함수에  대해알아보기전.. 자바스크립트에 대한 다른 글들도 하단에 남겨놓겠습니다.

모르는 부분은 한번씩 들려보시길 바랍니다.


 이전 글 링크 


2019/02/07 - [Programming/JavaScript, jQuery] - [javascript 1강] 자바스크립트 개요 및 개발환경설정

2019/02/09 - [Programming/JavaScript, jQuery] - [javascript 2강] 입출력 및 기본문법

2019/02/09 - [Programming/JavaScript, jQuery] - [javascript 3강] 변수와 자료형

2019/02/10 - [Programming/JavaScript, jQuery] - [javascript 4강] 연산자

2019/02/10 - [Programming/JavaScript, jQuery] - [javascript 5강] 배열

2019/02/11 - [Programming/JavaScript, jQuery] - [javascript 6강] 조건문(제어문)

2019/02/11 - [Programming/JavaScript, jQuery] - [javascript 7강] 반복문(제어문)




 1. 함수 생성


함수는 명식적함수, 익명함수로 나뉘어 져있습니다.

명시적함수는 함수명을 입력하여 함수명을 호출하여 함수를 실행할수 있습니다.

익명함수는 함수명이없이 1회성 및 변수에 함수를 할당하여 변수명으로 사용할수있습니다.


 사용방법 및 문법 


1. 명시적 함수생성


function 함수이름(){ 실행문 }


함수호출 : 함수이름();


2. 익명함수


var 변수이름 = function(){ 실행문 }


함수호출 : 변수이름();



 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
        
            function sum(){
                
                console.log("sum 함수 실행!");
                
            }
            
            var sum2 = function (){ console.log("sum2 함수 실행!"); }
 
            sum();
            sum2();
            
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 



            function sum(){
                
                console.log("sum 함수 실행!");
                
            }

다음과 같이 sum 이라는 명시적 함수를 만들어 주었습니다.

함수를 실행하면 "sum 함수 실행!" 이라는 문구가 콘솔에 나오게 됩니다.


var sum2 = function (){ console.log("sum2 함수 실행!"); }
다음과 같이 sum2 라는 변수를만들고 변수에 함수를 할당해 주었습니다.
함수에는 "sum2 함수 실행!" 이라는 문구가 콜솔에 나오게 됩니다.

다음 함수를 실행하였습니다.
명시적 함수인 sum 함수는 sum(); 이라고 함수를 실행하였고..
익명함수는 변수 sum2 라는 변수를 sum2(); 이라고 함수를 실행하였습니다.
그결과 위의 실행결과와 같이 2가지의 문구가 출력된것을 확인할수 있습니다.



 2. 매개변수 및 리턴


함수에 값을 전달하여 사용하는것이 매개변수입니다.

만약 덧샘을 실행하는 함수를 만들다면.. 더할값이 필요하겠죠?

그 더할값들을 바로 매개변수라고 생각하시면됩니다.

리턴값은 함수가 끝난후 반환해주는 값입니다.

이것도 덧샘함수를 실행하고 값을받아 더한후 값을 되돌려주는대

되돌려주는 값이 바로 리턴값입니다.


 사용방법 및 문법 


1. 매개변수


function 함수이름( 매개변수 ){ 실행문 }


2. 리턴


function 함수이름( 매개변수 ){ 

실행문


return 값;

 }


매개변수나 리턴은 함수에따라 사용해도 되고 사용하지 않아도 됩니다.



 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
        
            function sum(x,y){
                
                return x+y;
                
            }
            
            console.log(sum(3,2));
            
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 

 


            function sum(x,y){
                
                return x+y;
                
            }

다음과 같이 매개변수 x,y 를 받는 sum 이라는 명시적 함수를 만들고..

실행구문에 return 을 활용하여 x+y 의 값을 설정하였습니다.


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

다음과같이 console.log 에 함수를 넣어 실행하였습니다.

그결과 위의 이미지와같이 5가 나오는것을 확인할수 있습니다.

바로 5를 return 받아 화면에 출력된것을 확인할수 있습니다.




 3. arguments


arguments는 매개변수를 자동적으로 배열로 만들어 주는것입니다.

function 함수이름( x,y,z ){ 실행문 } 라는 함수가 있으면

[x,y,z] 와같이 값을 갖는 리스트가 자동적으로 arguments 에 생성이됩니다.

즉, 매개변수를 명시하지않고 arguments통해 리스트 형식으로 바로 사용할수 있습니다.

(arguments 는 javascript 자체적으로 갖고있는 기능입니다.)


 사용방법 및 문법 


function 함수이름 (){

arguments = [매개변수1, 매개변수2, ....]

}



 예제  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
        
            function am(){
                
                console.log(arguments);
                
                
            }
            
            am(3,2);
            
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 

 


             function am(){
                
                console.log(arguments);
                
                
            }


명시적함수 am을 만들어주고..

실행구문에 console.log 를 실행하고.. 내용에는 arguments 를 넣어주었습니다.


그다음 함수 am(3,2) 라고 매개변수를 2개를 넣어주었습니다.

그결과 위의 이미지와 같이 길이가 2인 arguments 가 자동적으로 생성되었고..

값은 매개변수로 전달해준 3,2 를 갖고있는것을 확인할수 있습니다.




 글을 마치며..


이번글을 통해 함수에 대해서 알아보았습니다.

자바스크립트는 유연한어어이기 때문에 변수에도 함수가 들어갈수 있다는점! 꼭 기역하시고..

다음 글에서 뵙겠습니다. 수고하세요.


도움이 되셨다면 로그인 없이 가능한

아래 하트♥공감 버튼을 꾹 눌러주세요! 




저작자표시 비영리 변경금지

'Programming > JavaScript, jQuery' 카테고리의 다른 글

[javascript 10강] 객체  (0) 2019.02.13
[javascript 9강] 함수 심화  (0) 2019.02.12
[javascript 7강] 반복문(제어문)  (0) 2019.02.11
[javascript 6강] 조건문(제어문)  (0) 2019.02.11
[javascript 5강] 배열  (0) 2019.02.10
댓글