j08. 자바스크립트 함수

자바스크립트 함수

자바스크립트 함수 (JavaScript Functions) 는 정해진 임무를 수행하기 위해 작성된 코드 들의 블록 입니다.

자바스크립트 함수는 (JavaScript function) "무언가가" 호출할 때 실행됩니다.
<p id="myID81"></p>

<script>
function myFunction(myNumA, myNumB, myNumC) {
myResult = myNumA / myNumB + myNumC;
return myResult;
}
document.getElementById("myID81").innerHTML = myFunction(100, 10, 90);
</script>

---

자바스크립트 함수 (JavaScript function) 는 함수 키워드 (function keyword), 그 다음 이름 (name), 그 다음 소괄호 (parentheses, () ) 로 구성됩니다.

함수의 이름은 문자 (letters), 숫자 (digits), 언더스코어 (underscores), 그리고 달러 표시 (dollar signs) 를 포함할 수 있습니다. (즉 변수 때 규칙과 동일 합니다).

소괄호 (parentheses, () ) 에는 파라미터 들이 콤마로 구분하여 들어갈 수 있습니다. (parameter_1,  parameter_2, ... , parameter_N)

함수에 의해 실행될 코드는, 중괄호 (curly brackets, {} ) 안에 적습니다.

function name(parameter_1, parameter_2, ... , parameter_N) {
    실행 될 코드;
}

함수 파라미터 (매개변수) 들 (Function parameters) 은 함수 정의의 일부로서, 나열된 이름 들입니다.

함수 인수 들 (Function arguments) 은 함수가 호출 (invoked) 되었을 때, 함수가 받는 실제 값 들 입니다.

함수 내에서, 인수 (arguments) 은 지역변수 (local variables) 처럼 동작 합니다.

함수 (Function) 는, 다른 프로그램 언어 들의 처리절차 (Procedure) 또는 서브 루틴 (Subroutine) 과 매우 흡사합니다.

---

아래와 같이 "무언가가" 함수를 호출 (Function Invocation) 할 때, 함수 내부의 코드 들이 실행됩니다.

1. 사용자가 버튼을 클릭하여, 이벤트가 발생했을 때
2. 자바스크립트 코드로 부터 호출 되었을 때
3. 스스로 자동 호출 되는 경우

이와 같은 경우가 있는데, 함수 호출 (function invocation) 에 관해서는 차차 배우게 됩니다.

---

자바스크립트가 리턴 지시문 (return statement) 을 만나게 되면, 그 함수는 실행을 중지할 것입니다.

만일 그 함수가 지시 문에 의해 호출 되었다면, 자바스크립트는 그 호출 지시문 다름의 코드들을 이어서 실행하기 위해 "리턴 (return)" 할 것입니다.

함수는 종종 리턴 값 (return value) 을 산출합니다. 리턴 값은 호출한 곳 (caller) 으로 리턴 됩니다.

<script>
function myFunction(myNumA, myNumB) {
return myNumA * myNumB; // 이 함수는 호출되면 두개의 값의 곱을 반환할 것입니다.
}
var myResult = myFunction(100, 200); // 함수를 호출하였고, 위의 함수에서의 결과값이 반환되어, 최종적으로 myResult 변수에 담기게 됩니다.</script>

---

위와 같이 함수로 만들어 두면, 코드들을 재활용할 수 있습니다. 

한번만 코드를 정의해 놓으면, 다른 인수 (arguments) 를 대입하여, 여러가지 결과들을 생성 할 수 있습니다.

이때 myFunction(100, 200) 처럼, 소괄호 연산자 ( () Operator) 가 함수를 호출하게 됩니다.

즉, myFunction 까지만 적으면, 그 함수 객체를 의미하는 것이고, myFunction() 처럼 소괄호를 하게 되면 그 함수의 결과값을 요구 하는 것입니다.

---

<p id="myID86"></p>

<script>
function myFunction(myNumA, myNumB) {
return myNumA * myNumB;
}
document.getElementById("myID86").innerHTML = myFunction;
</script>

위의 경우, 함수 객체 자체가 반환됩니다. 따라서 결과값이 function myFunction(myNumA, myNumB) { return myNumA * myNumB; } 이 됩니다.

---

<p id="myID87"></p>

<script>
function myFunction(myNumA, myNumB) {
return myNumA * myNumB;
}
document.getElementById("myID87").innerHTML = myFunction(100, 200);
</script>

이 경우는 함수의 실행후 결과값이 반환되어, 20000 이 되었습니다.

---

함수도 변수 처럼 사용될 수 있습니다.

var myResult = myFunction(100, 200);
var text = "100 곱하기 200 은 " + myResult + " 입니다";

---

[광고] Udemy 동영상 강의로 보기