프로그램에서 특정 기능을 수행하는 명령들의 소스 코드를 묶어 놓은 함수(function)에 대해서 정리해 본다.

---

함수 선언 방식

함수를 선언하는 방식은 함수 선언식(function Declarations)과 함수 표현식(Function Expressions)이 있다.

함수 선언식(Function Declarations)

'function'이라는 키워드를 사용하여 함수를 선언하는 방식이다. 함수를 사용하기 위해서는 함수명으로 호출한다.

<script>
  function 함수명() {
    ~logic~
  }
  함수명();    // 함수를 사용하기 위한 호출 방법
</script> 

함수 표현식(Function Expressions)

함수를 변수와 같이 선언하는 방식이다. 함수를 사용하기 위해서는 변수명으로 호출한다.

<script>
  const a = function() {
    ~logic~
  }
</script>

함수 선언식 vs 함수 표현식

함수 선언식은 호이스팅 영향을 받지만, 영향을 받지 않는다. 즉, 함수 선언식은 함수가 선언되기 전에 호출되더라도 정상적으로 코드가 실행되는 것이다.

• 함수 선언식

<script>
  test();  // 정상적으로 실행, 12345출력
  function test() { document.write(12345); }
</script>

• 함수 표현식

<script>
  test();  // Error
  const test = function() { document.write(12345); }
</script>

---

매개변수(Parameter)와 인수(Argument)

예를 들어 두 수를 더하는 함수를 사용하고자 할 때,

<script>

  function sum() {
  	document.write(3+5);
  }
  
  sum(); // 8 출력
  
</script>

sum 함수를 호출하면 결과는 언제나 8이 출력되는 것이다. 이 함수는 재사용성이 낮다. 따라서 숫자를 더한다는 함수의 기본 로직을 그대로 사용하면서 함수 안에 들어갈 숫자만 바꿔서 재사용성을 높이기 위해 함수의 매개변수와 인수를 사용한다.

<script>

  function sum(a, b) {  // 매개변수: 함수 재사용을 위한 값 a,b가 필요함을 지정
  	document.write(a+b);  // 매개변수가 각각 함수 내에서 어떻게 실행되는지 작성
  }
  
  sum(1, 2);  
  // 인수: 함수 호출 시 괄호 안에 매개변수의 할당값으로 넘겨준 값 1, 2
  // '1+2'의 값인 3이 출력된다.
  
</script>

인수 안에 원하는 숫자를 넣어 계속해서 함수를 호출할 수 있다.
ES6에서는 매개변수의 기본값을 지정하는 기능도 생겼다.

<script>

  function multisum(a, b=1, c=2) {
    document.write(a+b+c);
  }
  
  multisum(1, 2, 3)  //a=1, b=2, c=3
  multisum(1, 2)  // a=1, b=2, c=2(기본값)
  multisum(5)  // a=5, b=1(기본값), c=2(기본값)
  
</script>

---

함수값 반환(Return)

함수를 실행한 후 그 결과값을 함수 밖으로 넘기는 것을 '함숫값을 반환한다(return).'고 한다. 반환 위치는 함수를 호출한 위치이다. 함수 내에서 도출된 결과값을 직접 노출하지 않고 다른 함수에 적용하거나 다른 곳에 표시해야 할 경우 사용한다.

<script>

  let result = add(1, 3);  // 인수 1, 3을 가지고 add 함수 호출 
  alert(`두 수를 더한 값은 ${result} 입니다.`)
  
  function add(a, b) {
    let sum = a + b;  // 인수 1은 a, 3은 b 변수로 넘겨지고 두 값을 더해 sum 변수에 저장
    return sum;  // 결과값을 result에 반환하여 저장
  }
  
</script>

return문은 간단한 식일 경우 변수 없이 직접 return을 이용하여 식을 반환하는 소스를 작성 할 수 있다.

<script>

  function add(a, b) {
    return a + b;  // a와 b를 더한 값을 저장한 후 반환한다.
  }
  
</script>

---

변수 적용 범위(Scope of variables)

자바스크립트에서 선언된 변수는 스크립트 어디에서나 사용할 수 있는 것이 아니라 적용 범위(scope)가 있다. 따라서 변수를 사용할 때는 이 것에 유념해야 한다.

지역변수(Local Variable)

함수 안에서 선언하고 함수 안에서만 사용한다.

<script>

  function test() {
    let age = 30; // 지역변수
  }
  
  console.log(age);

</script>

출력 시 오류가 발생한다. 콘솔에 출력하고자 한 변수가 test() 함수 내에서만 유효한 지역 변수이기 때문이다.

전역변수(Global Variable)

스크립트 소스 전체에서 사용할 수 있는 변수이다.

<script>
  let age = 80;  // 전역변수

  function test() {
    let age = 30; // 지역변수
  }
  
  console.log(age);

</script>

출력 시 전역변수 인 80이 출력 된다.

블록변수(Block Variable)

ES6에 추가된 변수이다. 블록 변수는 변수를 선언한 블록({}) 안에서만 유효하며, let 키워드를 사용하여 선언하여 만들 수 있다.

<script>

  function test(a, b) {
    let local = a + b;
    if(b > 3) {
      let block = b + a;
    }
    console.log(local);  // 지역변수가 함수 안에서 사용되어 실행됨 
    console.log(block);  // 블록변수가 블록 외에서 사용되어 실행 안 됨
  }

</script>

---

화살표 함수(Arrow Function)

함수 선언을 조금 더 간단하게 작성하는 방법으로 주로 익명함수(anomymous function)에 사용 된다. function, return 등의 예약어가 생략 된다.

<script>
const variable = function(parameters) { return body } 
// return 필요
const variable = (parameters) => body 
// return 불필요하나 코드가 긴 경우 중괄호({})와 return 필요 
</script>

예를 들어 아래와 같이 같은 함수를 다르게 작성 할 수 있다.

<script>
const sum = function(a, b) { return a + b; }  // basic function
const sum = (a, b) => a + b;  // arrow function
</script>

---

즉시실행함수 (IIFE: Immediately Invoked Function Expression)

함수의 선언과 동시에 호출하는 함수로 기존 함수에 괄호를 사용하여 사용한다. 아래 예시와 같이 괄호의 위치만 약간 바꾼 두 가지 형태로 사용이 가능하다.

<script>
(function(name) {return `${name}님, 안녕하세요.`}(smy));  // 'smy님, 안녕하세요.' 출력
(fuction(a, b){return a + b})(1, 2);  // '3' 출력
</script>

즉시실행함수는 변수를 전역 변수로 선언하지 않고 초기화 하여 코드의 충돌을 막기 위해 사용하는 것이라고 하는데... 나에겐 조금 어려운 개념이라 조금 더 공부를 해야겠다ㅠㅠ