티스토리 뷰

Javascript

Javascript 함수

babydeveloper 2022. 2. 9. 17:21

함수란

데이터를 저장할 때 변수를 선언하여 저장한다. 변수에는 데이터만 저장할 수 있고, 코드는 저장할 수 없습니다.
하지만 함수를 사용하면 코드를 메모리에 저장했다가 필요할 때 마다 호출하여 사용할 수 있습니다.

선언적 함수

가장 기본적으로 사용하는 함수의 형태입니다.
기본적으로 함수는 함수 이름을 설정하고 함수이름을 호출해야 실행이 됩니다.

fuction 함수명(){
  자바스크립트 코드;
}
함수명();
<script>
    var count = 0;

    myFnc();  // 함수 호출문이 먼저나와도 호이스팅 방식이 적용되어 
                  // 정상적으로 함수를 호출합니다.   
    fuction myFnc(){
        count++;
        document.write("선언적 함수" + count, "<br>")
    }

    myFnc();

    -결과화면-
    선언적 함수1
    선언적 함수2
<script>

익명 함수

익명 함수는 변수에 함수를 설정하는 방법입니다.

익명 함수는 함수에 이름이 없기 때문에 변수에 넣어서 사용하는 함수입니다.
변수에는 숫자, 문자도 들어갈 수 있지만 함수도 들어갈 수 있습니다.

let 변수명 = function(){{
  자바스크립트 코드;
}
변수명();
<script>
    var theFnc = fuction(){
        document.write("익명함수 입니다.");
    }

    theFnc();

    -결과 화면-
    익명함수 입니다.
<script>

매개변수 함수

기본 함수 정의문은 함수 안에 있는 코드를 실행할 때 단순히 함수명으로 호출해서 코드를 실행했습니다. 즉 함수를 호출할 때 값을 전달할 수 없었습니다.
하지만 매개변수가 있는 함수 정의문은 함수를 호출할 때 전달하고자 하는 값을 입력하여 호출할 수 있습니다.
이렇게 전달된 값은 매개변수가 받아 함수 정의문에서 사용할 수 있게 됩니다.

function 함수명(매개변수1, 매개변수2,....매개변수n){
  자바스크립트 코드;
}
함수명(매개변수1, 매개변수2,....매개변수n);
<script>
    fuction myFnc(name, area) {
        document.write("안녕하세요", name + "입니다.", "<br>");
        document.write("사는곳은", area + "입니다.", "<br>");
    }

    myFnc("박서방", "서울");

    myFnc("김서방", "부산");

    -결과 화면
    안녕하세요. 박서방입니다. 
    사는 곳은 서울입니다. 

    안녕하세요. 김서방입니다. 
    사는 곳은 부산입니다.
<script>

리턴값 함수

return문은 함수에서 결괏값을 반환할 때 사용합니다.
그리고 함수에서 return문이 실행되면 반복문의 break문과 비슷하게 코드가 강제 종료됩니다.
다시 말해 함수 정의문에 return문이 사용되면 함수를 호출했을 때 결괏값(data)를 반환합니다.

function 함수명(){
  자바스크립트 코드1;
  return 데이터(값);

자바스크립트 코드2;
}
var 변수 = 함수명(); 함수명(매개변수1, 매개변수2,....매개변수n);
<script>
    fuction testAvg(arrdata){
        var sum = 0;
        for(var i = 0; < arrData.length; i++) {
            sum += Number(prompt(arrData[i]) + "점수는?", "0");
        }

        var avg = sum / arrData.length;
        return avg;
    }

    var arrSubject = [ "국어", "수학"];
    var result = testAvg(arrSubject);

    document.write("평균 점수는" + result + "점입니다.");
<script>

-결과 화면-
국어점수 80 
수학점수 70
평균점수는 75점입니다.

<script>
    var num = 1;
    function gallery(direct) {
        if(direct) {
            if(num == 8) return;
            num++;
        } else {
            if(num == 1) return;
            num--;
        }
        
        var imgTag = document.write.getElementByid("photo");
        imgTag.setAttribute("src", "image/pic_" + num + ".jpg");
    }
</script>
</head>
<body>
    <div id="galleyZone">
      <p><img src="images/pic_1" id="photo" alt = ""></p>
        <p>
            <button onclick="gallery(0)">이전</botton>
            <button onclick="gallery(1)">이전</botton>
        </p>
    </div>    
</body>
반응형

'Javascript' 카테고리의 다른 글

JavaScript 데이터 저장하기 배열  (0) 2022.02.14
JavaScript 데이터 저장하기 변수 / 상수  (0) 2022.02.14
조건문  (0) 2022.02.07
연산자 종류  (6) 2022.02.07
반복문 for문과 while문  (17) 2022.01.28

UP NEXT : Javascript

댓글
© 2022 babydevelop