tree6316
야금야금 개발
tree6316
전체 방문자
오늘
어제
  • 분류 전체보기 (34)
    • Unity (8)
    • Language (0)
      • Java (0)
    • Web (23)
      • HTML (9)
      • CSS (3)
      • JavaScript (9)
      • JSP (2)
      • Ajax (0)
    • DB (0)
      • MySQL (0)
      • Oracle (0)
    • OS (0)
      • CentOS (0)
    • Server (1)
      • CiscoPacketTracer (1)
    • DevTool (1)
      • VMware (0)
      • IDE (1)
    • ETC (0)
    • 일상 (0)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
tree6316

야금야금 개발

Web/JavaScript

JavaScript 따라하기 4일 차 | 함수 function

2022. 5. 31. 10:12

함수

 - 특정 기능을 수행하는데 필요한 코드들의 모음

 - 반드시 호출을 통해서 사용

 - 함수 호출 시 전달하는 값을 "전달인자(Argument)" 라고 함

 - 함수 정의 시 전달인자를 전달받아 저장할 변수를 "매개변수(Parameter)" 라고 함

 - 함수 작업이 끝난 후 호출한 곳으로 되돌아 갈 때 전달하는 값을 "리턴값(Return value)"라고 함

< 함수 정의 기본 문법 >
function 함수이름([매개변수선언...]) {
    // 외부로부터 함수가 호출되면 실행할 코드들...
    [return [값];]
}

함수 예시

// #1 전달인자 X, 리턴값 X
// showMessage() 함수 정의 => 전달인자가 없는 형태의 함수로 정의
function showMessage() { // 전달인자가 없으므로 매개변수(파라미터)를 선언하지 않는다!
    // showMessage() 함수가 호출되면 실행할 코드를 작성하는 부분
    alert("showMessage() 함수 호출됨!");
} // showMessage() 함수 끝
showMessage(); // showMessage() 함수 호출
    
    
// #2 전달인자 O, 리턴값 X
// 	전달인자가 있는 함수(= 매개변수를 포함하는 함수)
// 	=> 함수 호출 시 외부로부터 전달되는 값을 전달인자라고 하며
// 	   전달인자가 있는 함수는 선언 시 매개변수를 통해 전달인자를 전달받아 저장하도록 해야함
//    (주의! text 변수 선언 시 var, let 등 명시하지 않음 = 변수명만 지정)
function showMessage(text) {
    // 외부에서 함수 호출 시 전달된 데이터는 text 변수에 저장되며
    // 함수 내에서 text 변수를 자유롭게 사용 가능
    // => 전달받은 데이터의 타입에 따라 변수 text 의 타입이 결정됨
    // => 만약, 매개변수가 있지만 전달인자가 없을 경우 undefined 가 됨
    alert("함수에 전달된 값 : " + text + ", 데이터타입 : " + typeof(text));
}
// showMessage(text) 함수 호출 시 소괄호() 내부에 전달할 데이터(= 전달인자 = Argument) 지정
// => 소괄호 내부에 지정된 데이터는 함수 호출 시 선언부의 매개변수(파라미터) text 에 저장됨
showMessage("안녕하세요"); // 문자 데이터 전달 시 매개변수 text 가 string 타입이 됨
showMessage(500); // 숫자 데이터 전달 시 매개변수 text 가 number 타입이 됨
showMessage(); // 오류 발생하지 않음 undefined 전달 됨 (자바에서는 오류 발생함)
// #2-2. 함수 내에서 전달받은 값이 undefined 일 경우 기본값을 설정하는 방법(= if 문 활용) 
function showMessage2(text) {
    if(text == undefined) {
        text = "전달받은 데이터 없음";
    }
    alert("함수에 전달된 값 : " + text + ", 데이터타입 : " + typeof(text));
}



// #3 전달인자 X, 리턴값 O
// 	리턴값이 있는 함수
// 	- 함수 실행 도중 return 문을 만나면 즉시 함수 실행을 종료하고 호출한 곳(위치)로 흐름이 돌아감(복귀)
// 	- 이 때, return 문 뒤에 어떤 값 또는 변수 등을 지정할 수도 있으며(= 리턴값)
// 	  값이나 변수가 지정될 경우 돌아갈 때 해당 값(= 리턴값)을 가지고 돌아감
// 	- 함수를 호출한 곳에서는 리턴값을 전달받아 변수에 저장하거나 연산 등에서 즉시 사용 가능
function getMessage() {
    alert("getMessage() 함수 호출됨!");
    // 함수 내에서 return 문을 사용하여 호출한 곳으로 특정 값 리턴하기
    return "리턴값";
}
alert(getMessage()); // getMessage() 함수가 리턴하는 "리턴값" 문자를 alert() 함수로 출력


// #4 전달인자 O, 리턴값 O
function getMessage(message) {
    alert("getMessage() 함수 호출됨!");
    // 함수 내에서 return 문을 사용하여 호출한 곳으로 특정 값 리턴하기
    return message;
}
alert(getMessage("전달인자")); // "전달인자" 문자를 받아 리턴하는 alert() 함수로 출력

 

저작자표시 (새창열림)

'Web > JavaScript' 카테고리의 다른 글

JavaScript 따라하기 6일 차 | 객체 { : }  (0) 2022.05.31
JavaScript 따라하기 5일 차 | 이벤트 input onclick, etc...  (0) 2022.05.31
JavaScript 따라하기 3일 차 | 배열 Array  (0) 2022.05.30
JavaScript 따라하기 2일 차 | 조건문 if switch for while  (0) 2022.05.30
JavaScript 따라하기 1일 차 | 주석과 변수 생성  (0) 2022.05.27
    tree6316
    tree6316
    야금야금 개발하는 블로그입니다.

    티스토리툴바