[JS] 함수 선언문, 함수 표현식, 화살표 함수

함수를 사용하는 이유?

원하는 시점에서 함수를 재사용할 수 있다는 생산성 증가 측면

함수 기능 단위로 테스트를 실행할 수 있는 테스트 용이성

유지보수성, 코드의 가독성

이러한 장점을 모듈화 라고 한다.

* 모듈화? 기능적인 분리를 통해서 다른 프로그램을 개발할 때에도 유지보수와 코드 재사용성을 높여 소프트웨어를 설계하는 기법

utils와 개념이 유사하며, 객체지향을 배웠다면 간단히 이해가 될 것이다

두가지 개념이 사용된다

• import : 사용하는 쪽, 함수를 불러옴
• export : 내보내는 쪽

표현 방법

1. 함수 선언식
2. 함수 표현식
3. 화살표 함수

함수 선언문

다른 언어들과 유사한 형태를 가지고 있다.

function calcRectArea(width, height) {
  return width * height;
}

`function`으로 함수를 사용할 것이다 선언하고

`calcRectArea`로 함수의 이름

`()` 괄호 안에 인자를 넣는다.

호이스팅이 일어난 가능성이 존재한다.

함수 선언 - JavaScript | MDN

❓그렇다면 함수 표현식으로 바꾸면 어떻게 될까?

함수 표현식

리터럴 함수라고도 불리며, 함수를 변수에 할당하는 방식이다.

const getRectArea = function (width, height) {
  return width * height;
};

함수의 이름 부분이 없다!

함수 표현식 - JavaScript | MDN

함수 선언문과 차이점은

호이스팅이 적용되지 않는다

함수 선언식 : 어디서든 호출이 가능
함수 표현식 : 함수를 생성(초기화) 한 코드 아래에서만 호출 가능

또한 `;` 의 차이점도 있다. 선언식은 없고, 표현식은 붙인다.

화살표 함수

ES6 부터 나타난 방식이다.

function 역할을 `=>` 화살표가 하는것! retrun 또한 생략이 가능하다

const materials = ['Hydrogen', 'Helium', 'Lithium', 'Beryllium'];

console.log(materials.map((material) => material.length));

함수 표현식을 작성하는 또다른 방법이기 때문에 호이스팅이 되지 않고, `;` 도 붙는다.

return 생략해도 작동한다

화살표 함수 표현식 - JavaScript | MDN

특히, 화살표 함수 문법을 굉장히 많이 사용하게 될 것이기 때문에(ex. map, forEach 등)

화살표 함수 작성법에 익숙해지는 것이 좋다~

☑️ 배운점

MDN 공식문서를 참고했는데

한국말이 아닌, 영어로 문서를 읽고 익숙해져야 좋을 것 같다...