자바스크립트 함수(JavaScript Functions)

자바스크립트 함수는 특정 업무를 수행하도록 설계된 코드 블록이다.

자바스크립트 함수는 "무언가"가 이를 호출했을 때 실행된다.

 

 

<script>
function myFunction(p1, p2) {
  return p1 * p2;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>



//12

 

 

---

 

 

자바스크립트 함수 구문(JavaScript Function Syntax)

자바스크립트 함수는 function 키워드, 이름, 괄호()로 정의된다.

함수 이름에는 문자, 숫자, 언더바 그리고 달러 기호가 포함될 수 있다.(변수와 같은 규칙이 적용된다)

괄호는 쉼표로 구분된 매개변수들을 포함한다.(parameter1, parameter2, ...)

함수에 의해 실행되는 코드는 중괄호 { } 안에 위치한다.

 

function name(parameter1, parameter2, parameter3) {
  // code to be executed
}

 

함수의 매개변수는 함수 정의에서 괄호() 안에 나열된다. 함수 인자는 호출될 때 함수가 받는 값이다.

함수 안에서, 인자(매개변수)는 지역변수처럼 작동한다.

 

 

---

 

 

함수 호출(Function Invocation)

함수 내부에 코드는 '무언가'가 함수를 호출할 때 실행된다.

• 이벤트 발생 시(사용자가 버튼을 클릭했을 때)
• 자바스크립트 코드로부터 호출될 때
• 자동으로(셀프 호출)

 

 

---

 

 

함수 리턴(Function Return)

자바스크립트는 return 문에 도달하면 함수의 실행이 중지된다.

함수가 명령문에서 호출되면, 자바스크립트는 호출 명령문 다음에 코드를 실행하기 위해 'return' 한다.

함수는 리턴 값을 계산하는데, 리턴 값은 '호출자'에게 다시 '반환'된다.

 

let x = myFunction(4, 3);   // Function is called, return value will end up in x

function myFunction(a, b) {
  return a * b;             // Function returns the product of a and b
}


//12

 

 

---

 

 

왜 함수인가?(Why Functions?)

일단 코드를 한 번 정의하면, 코드 재사용이 가능하고 여러 번 사용이 가능하다.

다른 결괏값을 만들기 위해, 같은 코드를 인자만 변경해서 사용이 가능하다.

 

<script>
function toCelsius(f) {
  return (5/9) * (f-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);
</script>


//25

 

 

---

 

 

() 연산자의 함수 호출(The () Operator Invokes the Function)

위의 예제를 사용해서 toCelsius 는 함수 객체를 참조하고 toCelsius()는 함수 결과를 참조한다.

() 없이 함수에 접근하면 함수의 결과 대신 함수 객체가 반환된다.

 

<script>
function toCelsius(f) {
  return (5/9) * (f-32);
}
document.getElementById("demo").innerHTML = toCelsius;
</script>


//function toCelsius(f) { return (5/9) * (f-32); }

 

 

---

 

 

변수값으로 사용되는 함수(Functions Used as Variable Values)

함수는 모든 유형의 수식, 할당 및 계산에서 변수를 사용하는 것과 동일한 방식으로 사용할 수 있다.

변수를 사용하여 함수의 반환 값을 저장하는 대신

 

let x = toCelsius(77);
let text = "The temperature is " + x + " Celsius";

 

함수를 변수값처럼 직접 사용할 수 있다.

 

let text = "The temperature is " + toCelsius(77) + " Celsius";

 

 

---

 

 

지역변수(Local Variables)

자바스크립트 함수 내에서 선언된 변수는 함수에 대해 로컬이 된다.

지역 변수는 함수 내에서만 접근 가능하다.

 

<script>
myFunction();

function myFunction() {
  let carName = "Volvo";
  document.getElementById("demo1").innerHTML =
  typeof carName + " " + carName;
}

document.getElementById("demo2").innerHTML =
typeof carName;
</script>


//string Volvo

//undefined

 

지역 변수는 함수 내에서만 인식되기 때문에, 다른 함수에서 같은 이름의 변수를 사용할 수 있다.

지역변수는 함수가 시작될 때 만들어지고, 함수가 완료되면 삭제된다.