JavaScript : ReferenceType Function

올게 와버렸다. 마치 한국어(Python)를 하다가 외국어(JavaScript) 배우는 기분... 너무 묘한거 같다. 하지만 한국에서는 python 취직이 어려우니 javascript라도 잘해야지.... 화이팅하자

---

Function 함수

: 함수를 호출해서 실행할 수 있는 재사용 가능한 코드 블럭 `function` 이라는 키워드를 사용하여 정의하고 매개변수를 사용하여 값을 반환할 수 있는 타입

 

: 참조 자료형에 속하며 모든 함수는 Function object이다.

 

저번 표를 다시 살펴보자

오늘 다뤄볼 것은 오른쪽에서 마지막에있는 Function이다

기본 틀은 파이썬과 별반 다를게 없다. 하지만 조금뒤엔...

• function 키워드 : 함수 시작
• functionName : 함수의 이름
• params1, params2 : 함수의 매개변수들
• statements : 표현식
• return : 반환 값 (return 값이 없다면 undefined를 반환)

파이썬과 비교하자면 function 정의 시작이 def에서 function으로 바뀐것과 중괄호 정도다. 저번시간에 다뤘지만 중괄호 내부는 function scope에 속한다. 

 

 

함수 선언

 

javascripts에서는 함수 정의를 선언식과 표현식으로 가능하다.

 

선언식과 표현식으로 나누어지는데 표현식이 권장된다

 

선언식	표현식
- 익명 함수 사용 불가능 - 호이스팅 있음	- 익명 함수 사용 가능 - 호이스팅 없음

 

호이스팅의 경우 저번 시간에 다뤘는데, 호출보다 함수가 먼저 와서 실행이 된다면 호이스팅이 있는 것, 반대로 실행되지 않고 에러를 띄울 경우 호이스팅이 없는 것이라고 한다. 프로그래밍적으로 호이스팅은 없어야 바른 것이기 때문에, 또 익명함수를 사용 가능하기 때문에 표현식이 권장되고 있다. 익명함수는 다룰일이 있다면 다뤄보겠다.

 

함수 매개변수 (Function Parameter)

• 기본 함수 매개변수 (Default Function Parameter)
• 나머지 매개변수 (Rest parameters)

함수 매개변수를 사용하면서 부족하거나 많으면 보통 오류가 뜨는 것이 일반적인데, JavaScript에서는 오류가 나지 않고 자체적으로 처리한다. 

 

기본 함수 매개변수 (Default Function Parameter)

 

: 전달하는 인자가 없거나 undefined가 전달될 경우 이름 붙은 매개변수를 기본값으로 초기화

인자가 없다면 매개변수의 기본값이 출력되는 모습

 

나머지 매개변수 (Rest Parameters)

 

: 임의의 수의 인자를 '배열'로 허용하여 가변 인자를 나타내는 방법

• 함수 정의 시 나머지 매개변수는 하나만 작성할 수 있음
• 나머지 매개변수는 함수 정의에서 매개변수 마지막에 위치해야만 한다

네모 부분이 나머지 매개변수  처리가 되어 배열로 추가 되어있다

 

매개변수와 인자 개수가 불일치

 

: 매개변수의 개수가 인자의 개수보다 적을 경우 (매개변수 개수 > 인자 개수)

-> 누락된 인자는 undefined로 할당

부족한 인자는 배열에 undefined로 채워져 있는 것을 확인할 수 있다

 

: 매개변수의 개수가 인자의 개수보다 많을 경우 (매개변수 개수 < 인자 개수)

-> 초과 입력한 인자는 사용하지 않음

 

파란 네모 args들은 출력되지 않았다

 

Spread syntax 전개 구문 ( '...' )

 

: 배열이나 문자열과 같이 반복 가능한 항목을 펼치는 것 (확장, 전개)

: 전개 대상에 따라 역할이 다르다

• 배열이나 객체의 요소를 개별적인 값으로 분리한다
• 다른 배열이나 객체의 요소를 현재 배열이나 객체에 추가한다
• 함수, 객체, 배열 등 다양한 방면에서 사용된다

 

함수 호출 시 인자 '확장'

습관이 되어서 List로 작성하는데 파이썬 외에는 Array가 맞다..

 

numberList 속 숫자들이 확장되어 각각 a, b, c, d, e에 자동 할당되어서 연산 된 것을 확인할 수 있다.

 

 

나머지 매개변수 '압축'

 

위에서 다뤘기 때문에 생략!

 

화살표 함수 표현식 (Arrow function expressions)

 

: 함수 표현식의 간결한 표현법으로 대부분 함수 작성 시 사용된다.

 

화살표 함수까지만 해도 충분하며 권장되는 함수 표현이다

 

1.  function 키워드 제거 후 매개변수와 중괄호 사이에 화살표 (=>) 작성
2. 함수의 매개변수가 하나 뿐이라면, 매개변수의 소괄호 ( ) 제거 가능 (생략하지 않는 것을 권장)
3. 함수 본문의 표현식이 한 줄 뿐이라면, 함수 스코프에 해당하는 중괄호 { }와 return 생략 가능

심화

• 함수에 인자가 없다면 '( )' 혹은 ' _ ' 로 표시 가능
• object를 return 한다면 return 을 명시적으로 작성한다
• object를 반환하면서 return을 작성하고 싶지 않다면 객체를 소괄호로 감싸주어야 한다

마치 숏코딩 하는 것을 보는 것 같다.

 

일반 함수를 쓰면 될텐데 왜 화살표 함수를 쓰는지는 다음 시간에 나오니 함수 표현식과 화살표 함수는 꼭 알아두고 넘어가자!

---

아직 순한 맛이다.. 한번에 다루고 싶었는데 너무 양이 방대해서 나눠서 올릴 예정이다. django 배울때는 어지러웠는데 새로운 언어 배우는거는 나름 재미있는거 같다.