[Javascript] 사용자 정의 함수

사용자 정의 함수 

- 자바스크립트에서 제공하는 내장 함수 외에 개발자가 직접 정의하는 함수

- 함수(function)는 단독으로 존재할 수 있지만, 메서드(method)는 클래스 내에서만 정의 가능하다. 

- 자바의 메서드와 달리 함수 정의 시 리턴타입을 명시하지 않는다. 

- <script>태그 내의 자바스크립트 코드는 기본적으로 스크립트 태그 로딩 시 바로 실행되지만, 함수를 정의할 경우 

 해당 함수는 호출되어야만 실행 가능하다. (단, 직접 호출하지 않고도 실행 가능한 함수도 존재)

- return문을 사용하여 호출한 곳으로 값을 리턴할 수 있으며, 빈 return문을 사용하여 리턴값 없이도

 함수 실행을 중단하고 호출한 곳으로 돌아갈 수 있다. 

- 전달인자(Argement) : 함수 호출 시 함수에 전달하는 데이터
- 매개변수(Parameter) : 함수 호출 시 함수에 전달되는 데이터를 받아 저장할 변수
- 리턴값(Return value) : 함수 호출 시 작업 완료 후 원래 위치로 돌아갈 때 가지고 갈 데이터
                                       함수 호출한 위치로 돌려줄(=리턴) 데이터
- 리턴타입(Return type) : 리턴값에 대한 데이터타입(자바스크립트에선 필요하지 않다) 

 

✍함수 선언(정의) 기본 문법 

function 함수명([매개변수...]) {
	// 함수 호출 시 실행될 코드들
    [return [데이터];]
}

 

 

ex) 파라미터 x, 리턴값 x인 함수 호출하기

<script type="text/javascript">
function hello() { // 함수 선언 
    document.write("Hello, World!"); // 함수 호출 시 실행 할 코드
} // 함수 종료 후 되돌아 감 
	
document.write("함수 호출 전");
document.write("<hr>");
hello(); // 함수 호출. function hello() {} 코드로 실행 흐름이 넘어감
document.write("<hr>");
document.write("함수 호출 후");
</script>

 💻

• 함수 호출 전 후 코드 흐름을 확인할 수 있다. 
• 함수 호출이 끝난 후 원래 코드로 되돌아 간다. 

 

✍파라미터x, 리턴값x 함수 연습하기

<script type="text/javascript">
function showMessage(){ // 문자열 호출 함수 
    document.write("함수 호출됨!");
}
	
function hr() { // 구분선 <hr>태그를 호출하는 함수
    document.write("<hr>");
}
function printNum() { // 1~10까지 정수 출력 호출 함수 
    for(let num=1; num<=10; num++){
        document.write(num + " ");
    }
}
function sum() { // 1~10까지 정수의 합 호출 함수 
    let total = 0;
    for(let i=1; i<=10; i++){
        total += i;
    }
    document.write("1~10 까지의 합: " + total);
}
	
showMessage();
hr();
printNum();
hr();
sum();
	
</script>

💻

• 총 5번 함수가 호출되었다.