📆 날짜

2023/12/09(토)

📚 챕터

함수를 정의하는 방법

---

👨🏻‍💻 학습 내용

오늘은 함수를 정의하는 3가지 방법에 대해 학습하였다.

🎯 일반적인 함수 선언문

<script>
function add(a,b){
return a + b
}
</script>

함수 선언문은 표현식이 아닌 일반 문(statement)으로 분류된다.
표현식이란 무언가 값을 산출하는 구문을 의미한다.
즉,앞선 함수 선언으로는 어떠한 값도 표현되지 않았으므로
표현식이 아닌 문으로 분류된다.
함수 선언문은 말 그대로 선언이고 어떠한 값도 표현하지 않으므로 표현식과는
다르게 변수에 할당할 수 없는 것이 자연스러워 보인다.

<script>
const sum = function sum(a,b){
return a + b 
}
sum(5,5)// 10
</script>

그러나 위 예제는 마치 sum이라는 변수에 함수 sum을 할당하는,표현식과 같은 작동을 보였다.
왜 이러한 코드를 작성하는 것일까?
이유는 자바스크립트 엔진이 코드의 문맥에 따라 동일한 함수를 문이 아닌 표현식으로
해석하는 경우가 있기 때문이다.
위와 같이 이름을 가진 형태의 함수 리터럴은 코드 문맥에 따라 전자와 같은 선언문 즉,표현식으로도 사용될 수 있음을 알고 있어야 한다.

🎯 함수 표현식

함수 표현식에 대해 알아보기 전에 일급 객체라는 개념을 알고 있어야 한다.
프로그래밍 세계에서 일급 객체란 다른 객체들에 일반적으로 적용 가능한 연산을 모두
지원하는 객체를 의미한다. 자바스크립트에서 함수는 일급 객체다.
앞서 함수가 일급 객체라고 했으니, 함수를 변수에 할당하는 것은 당연히 가능하다.
함수 표현식에서는 할당하려는 함수의 이름을 생략하는 것이 일반적이다.
이유는 코드를 봤을 때 혼란을 방지하기 위함이다.
함수 표현식에서 함수에 이름을 주는 것은 함수 호출에 도움이 전혀 안되는,
코드를 읽는 데 방해가 될 수 있는 요소임으로 할당하려는 함수의 이름을 생략하는게 좋다.

🎯화살표 함수

ES6에서 새롭게 추가된 함수 생성 방식이다.
function 대신 => 라는 화살표를 활용해서 함수를 생성한다.
그러나 화살표 함수는 겉보기와 다르게 앞서 언급한 함수 생성 방식과 몇 가지 큰 차이점이 있다.

📌 화살표 함수에서는 constructor 사용 불가능

📌 화살표 함수에서는 arguments가 존재하지 않는다.

📌클래스형 컴포넌트에서 이벤트에 바인딩할 메서드 선언 시 화살표 함수로 했을 때와 일반 함수로 했을 때 서로 다르게 작동한다.

• this | 자신이 속한 객체나 자신이 생성할 인스턴스를 가리키는 값
  일반함수 : 내부의 전역 객체를 가리킨다
  화살표 함수 : 상위 스코의 this를 그대로 따르게 된다

  ➡️ 다음은 리액트에서 자주 쓰이는 함수를 살펴보자.