PinkCoding

CLASS web

JavaScript

함수 만들기

이번 강좌에서는 함수를 만들어 보겠습니다.

자바스크립트에서는 이미 있는 함수를 갔다 쓰기도 하지만 우리가 직접 만들어 볼 수도 있습니다.

또한, 우리가 함수를 제작 하기때문에 함수의 이름은 우리가 하고 싶은 이름으로 만들수 있습니다.

함수 만들기

먼저 function 라고 적어 줍니다. 그리고 함수의 이름을 적은후 괄호를 열고 닫고 그리고 대괄호를 열고 닫고 끝!!

function functionName(){
}

위와 같습니다. 그리고 {}안에 실행할 명령문을 적어주면 됩니다.

그리고 함수는 함수를 호출해줘야만 함수가 작동합니다. 즉 저렇게 작성만 하면 작동하지 않습니다.

함수 호출 하기

함수호출 하는 방법은 함수명() 끝!

즉,

functionName();

입니다.

그럼 헬로우 월드를 출력하는 함수를 만들고, 그 함수를 호출을 해봅시다.

function hello(){
  document.write("Hello World!!");
}

위와 같이 hello라는 함수를 만들고 헬로우 월드 출력문을 {}안에 넣어 줍니다.

그리고 함수호출은

hello();

위와 같이 작성하면 호출이 됩니다.

예문을 통해서 알아봅시다. 함수 호출문이 없는 소스 입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>자바스크립트</title>
<script>
    function hello(){
        document.write("Hello World!!");
    }
</script>
</head>
<body>
</body>
</html>

결과는 바로 아래에서 확인할 수 있습니다.

PLAY

이 소스를 웹에서 보기 버튼을 눌러 실행해 보시면 아무것도 출력이 안되는 것을 보실 수 있습니다.

그럼 이번엔 함수 호출문을 넣어서 테스트 해봅시다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>자바스크립트</title>
<script>
    function hello(){
        document.write("Hello World!!");
    }
    hello();
</script>
</head>
<body>
</body>
</html>

결과는 바로 아래에서 확인할 수 있습니다.

PLAY

위의 예제를 실행해 보시면 출력문인 hello world가 보이실 것입니다.

함수 안에는 계산식을 넣어도 되고 필요하신 명령문을 작성하시면 됩니다. ^^

그럼 이번엔 5+3을 수행하는 함수를 만들어 봅시다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>자바스크립트</title>
<script>
    function add(){
        add = 5+3;
        document.write(add);
    }
    add();
</script>
</head>
<body>
</body>
</html>

결과는 바로 아래에서 확인할 수 있습니다.

PLAY

그럼 이번엔 24+10을 수행하는 함수를 만들어 봅시다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>자바스크립트</title>
<script>
    function add(){
        add = 24+10;
        document.write(add);
    }
    add();
</script>
</head>
<body>
</body>
</html>

결과는 바로 아래에서 확인할 수 있습니다.

PLAY

위 같이 5+3을 계산하는 함수를 만들어봤고 24+10을 하는 함수도 만들어 봤습니다. 이렇게 같은 더하기 기능을 하는데 더하는 숫자가 다르다고 해서 함수를 또 만들거나 하면 함수를 만드는 의미가 없습니다.

이것을 설명하기 위해서 같은 기능을 함수를 갖는 예제 소스를 2번 만들어봤습니다.

그럼 위와 같이 같은 기능을 하는데 입력값이 다른 경우는 어떤 방법을 사용해야 할까요? 바로 함수를 호출 할때 값도 같이 보내서 호출 하는 방법이 있습니다.

즉, 24+10을 한다고 하면 더하기 기능은 함수에 지정 해두고 24와 10을 함수 호출시에 보내면 됩니다. 그 방법은 함수를 호출 할때에 아래와 같이 괄호 안에 값을 적어 줍니다.

add(24,10);

위의 함수를 호출할 때 값을 넘기는데 이 값은 아규먼트(argument)라고 부릅니다.

위와 같이 함수를 호출 하면 함수 호출 시에 24와 10이 add함수에 넘어 가게 되며 24 와 10은 계산식에 의해 합이 계산되고 출력문에 의해 계산된 값이 출력 됩니다.

그렇다면 위와 같이 함수를 호출 할때 값을 보내준다면 함수를 만들때는 어떻게 해야 할까요?

보내주는 수만큼 함수의 괄호 안에 변수를 넣어 주면 됩니다. 즉 24는 a라는 변수에 넣고 10은 b라는 변수에 넣기 위해서

JavaScript

function add(a,b){
}

위와 같이 선언을 해주면 됩니다. 위에 있는 a, b는 파라미터(매개변수)라고 부릅니다.

그러면 24는 a의 값이 10은 b의 값이 됩니다.

실제 예문을 통해 알아 봅시다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>자바스크립트</title>
<script>
    function add(a,b){
        add = a+b;
        document.write(add);
    }
add(24,10);
</script>
</head>
<body>
</body>
</html>

결과는 바로 아래에서 확인할 수 있습니다.

PLAY

나중에 규모가큰 작업을 한다면 소스의 재활용성이 높아져서 편리하게 사용하실수 있습니다. ^^

숫자외에도 문자열도 되고 하니 테스트 해보시기 바랍니다.

function string_output(str){
  document.write(str);
}
string_output("함수에 들어가서 저는 출력 될게요.");

예제 소스로 본다면,

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>자바스크립트</title>
<script>
    function string_output(str){
        document.write(str);
    }
    string_output("함수에 들어가서 저는 출력 될게요.");
</script>
</head>
<body>
</body>
</html>

결과는 바로 아래에서 확인할 수 있습니다.

PLAY

함수 만들기는 이것으로 끝내겠습니다. ^^

다음 콘텐츠

파라미터 기본값 설정