[자바스크립트] 사용자 정의함수

Gammi·2022년 9월 29일

자바스크립트

JS

목록 보기

5/22

✔ 사용자 정의함수

자바스크립트 내장 함수 외에 직접 정의하는 함수
접근제한자 및 리턴타입 명시X,
파라미터 변수 지정 시에도 데이터타입 명시X

<script> 태그 내의 자바스크립트 코드는 기본적으로 웹페이지 로딩 시 바로 실행되지만 함수를 정의할 경우, 반드시 호출을 통해 실행 가능
정의된 함수는 <script> 태그 내 아무 위치에서나 호출 가능

HTML 태그 요소에 onxxx 속성 사용하면 지정된 자바스크립트 코드가 실행됨

-> onxxx="자바스크립트 코드" 형식으로 지정

< 사용자 정의 함수 기본 문법 >

function 함수이름 ([매개변수...]) {
	// 외부로부터 함수가 호출되면 실행할 코드들...
    // [return [값];] (필수 아님)
}

showMessage( ) 함수 정의하기

showMassage(); // 함수 호출 

function showMassage() {
  alert("안녕하세요!");
}

showMassage(); // 함수 호출

🔗 참고

자바스크립트에서는 함수 선언부보다 위쪽에서도 호출이 가능하며, 별도의 스크립트 블럭에서도 호출이 가능하다.

onclick 속성을 이용하여 showMessage() 함수 호출

<head>
  <script>
    function showMessage() {
      alert("showMessage() 함수 호출됨");
  }
  </script>
</head>
<body>
  <input type="button" value="함수호출" onclick="showMessage()">
    // 버튼 클릭 시 showMessage()함수 호출됨
</body>

✔ 매개변수를 갖는 함수

외부에서 함수 호출 시 전달할 데이터가 있는 함수
매개변수 선언 시 변수명만 기술 (타입 기술X)

< 기본 문법 >

function 함수명(매개변수명1, 매개변수명2, ... , 매개변수명n) {
}

function showMessage(data) {
  // 자바스크립트는 데이터타입 기술하지 않음
  document.write(data);
}

showMessage("Hello, World!");
showMessage(500);
showMessage(true);
// 데이터를 넣으면 자바스크립트에서 알아서 데이터타입 정해줌

showMessage();
// 아무 데이터도 전달하지 않더라도 오류 발생X
// undefined 값에 undifined 타입으로 설정됨

➕ 전달받은 데이터가 없을 경우 기본값 설정

1. 함수 선언 시 매개변수에 기본값 직접 저장

function showMessage(data = "전달받은 데이터 없음") {
  // String 타입으로 기본값 설정
  document.write(data);
}

showMessage("Hello, World!");
// [Hello, World!] 출력됨
showMessage();
// [전달받은 데이터 없음] 출력됨

2. if문을 사용하여 undefined일 때 기본값 저장

function showMessage(data) {
  if(data == undefined) {
    data = "데이터 없음";
  }
  document.write(data);
}

showMessage(500);
// [500] 출력됨
showMessage();
// [데이터 없음] 출력됨

✔ 리턴값이 있는 함수

리턴값 : 함수 실행 후 원래 위치로 돌아갈 때 호출한 곳으로 전달하는 값

함수 선언 시 리턴타입 지정X

-> 함수 내에서 데이터타입에 따라 자동으로 return 타입 결정
리턴할 값이 없어도 return문만 사용하여 함수 종료 가능
함수 호출한 곳에서 리턴값을 전달받아 사용 가능

동시에 리턴 가능한 값은 하나

< 기본 문법 >

function 함수명([매개변수...]) {
	// 실행할 코드
    return [리턴값]; // 함수 호출한 곳으로 값을 리턴하거나 함수 종료
}

function getMessage() {
  return "Hello, World!";
  // 함수 호출 시 [Hello, World!] 리턴
}

✔ 매개변수도 있고, 리턴값도 있는 함수

함수 호출 시 값을 전달하고 함수 종료 시 값을 리턴하는 함수
매개변수는 복수 개가 가능하지만 리턴값은 하나만 가능

정수 2개를 전달받아 최대값을 리턴하는 함수 정의

function max(num1, num2) { // 자바스크립트는 데이터 타입적지 X
  if(num1 >= num2) {
    return num1;
  } else {
    return num2;
  }
}
alert(max(4,13));

var result = max(4, 13);
alert(result); // 위랑 같은 코드