[JavaScript] 함수(function)

함수의 기본 형태

• 함수 : 기능을 수행하기 위한 명령문들의 집합.
  javascript에서는 함수도 하나의 자료로 취급한다.

• 익명함수/람다식
  이름이 지정되지 않은 함수. 호이스팅하지않는다.

• 선언적함수
  이름을 지정하여 호출할 수 있는 함수. 가장 많이 쓰고 있다.

• 전개 연산자
  배열을 전개하여 매개변수로 전달할 때 사용하는 연산자. ...배열명 와 같은 형태로 매개변수에 사용한다.

  function name (input) {}
  name(...array)

• 나머지 매개변수
  호출 시 넘겨주는 매개변수 갯수는 함수에서 설정한 매개변수의 갯수를 넘길 수 없는데, 나머지 매개변수일 경우 보다 많이 받아올 수 있다.

  function name (input1, input2, ...inputs) {}
  name(input1, input2, input3, input4, input5)

  ※나머지 매개변수를 일반 매개변수와 혼용하여 사용할 때에는 일반 매개변수보다 뒤에 위치시켜야한다.

• 기본 매개변수
  매개변수의 default값을 설정한다.

함수 고급

• 콜백함수
  함수를 하나의 자료형으로써 매개변수로 사용할 때, 매개변수로 사용되는 함수를 "콜백함수"라고 한다.

• 화살표함수
  단순한 형태의 익명함수

  (매개변수) = > {
      함수내용
  }
  
  (매개변수) => 리턴값

  ※ this 키워드의 사용이 다르다. 자세한 내용은 6챕터 Object에서

• 메소드 체이닝(method chaining)
  메소드의 리턴값을 기반으로 함수를 줄지어 사용하는 것

  arr.filter(e => e % 2).map(e => e + e).forEach(e => {console.log(e)})
  // → filter로 특정 조건의 배열을 리턴받아 map으로 각 값을 연산한 배열을 리턴받은 후 forEach로 해당 배열을 출력해준다.

• 타이머 함수
  특정 시간 마다 혹은 특정 시간 이후 콜백함수를 호출할 수 있는 함수
  ※ 시간의 단위는 밀리초(1/1000초)

  • setTimeout(함수, 시간)
    특정 시간 후에 함수를 한 번 호출한다. Return 값으로 타이머ID를 반환한다.
  • setInterval(함수, 시간)
    특정 시간 마다 함수를 호출한다. Return 값으로 타이머ID를 반환한다.
  • clearTimeout(타이머ID)
    Timeout 함수로 설정한 타이머를 제거한다.
  • clearInterval(타이며ID)
    setInterval 함수로 설정한 타이머를 제거한다.

• ⭐ 즉시 호출 함수
  선언 후 즉시 호출하는 함수 패턴

  (function() { /* 함수 내용 */})()

  웹 사이트를 구현할 때 일반적으로 여러개의 js 문서가 하나의 HTML 페이지에 사용된다.
  때문에 각 js 문서 간 변수/함수명의 중복이 발생할 수 있고, 이로 인해 오류가 있을 가능성도 있다.

  < 문제 예시 >

  <script>
      let a = 'apple'
  </script>
  <script>
  	let a = 'art'
  </script>
  <!-- Uncaught SyntaxError 발생 -->

  이를 방지하기 위해 javascript에서는 익명함수를 즉시 호출하는 패턴을 자주 사용한다.
  변수가 존재하는 범위는 스코프 {} 단위이기때문에 함수를 통해 외부와 내부의 변수 범위를 구분하여 사용하는 것이다.

  < 문제 해결 예시 >

  <script>
      let a = 'apple'
      console.log('{} 외부의 a값은 ' + a)
  </script>
  <script>
      // 블록이 다르더라도 여기에서 a를 선언하거나, 호출하면 Uncaught Typ Error 가 발생한다. 꼭 아래와 같이 스코프 안에 넣어주자.
  (function () {
      let a = 'art'
      console.log('{} 내부의 a값은 ' + a)
  })()
  </script>
   <!-- 외부의 a값은 apple
   	  내부의 a값은 art -->

• 엄격 모드 (strict mode)
  javascript는 문법에 유연한 언어로 일부 문법 오류를 무시하고 정상 작동하는데, 엄격 모드는 이러한 문법 오류를 무시하지 않아 프로그램 작동을 멈추고 Error code를 출력하게 한다.

  < 사용 예시 >

  <script>
      'use strict'
  </script>
  
  <script>
      (function(){
          'use strict'
      })()
  </script>