[javascript] 함수(function) Study note

September 27, 2022

“혼자 공부하는 자바스크립트” 스터디 모임 정리 노트 입니다. 📚

함수의 기본 형태

함수 : 기능을 수행하기 위한 명령문들의 집합. 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>
```

Rose

함수의 기본 형태

함수 고급