함수를 선언하는 방법은 크게 2가지가 있다.

일반 함수

function 을 사용한 함수 선언 방법이다.

function 이름 (매개변수){코드} 

예시 : function funcName (a){console.log(a)};

const 이름 function (매개변수){코드} 

예시 : const funcName2 = function (a){console.log(a)};

일반 함수는 어떻게 선언하든 큰 차이는 없다

()=>{} 을 사용한 함수 선언 방법이다.

const 이름 = (매개변수) => {코드} 

예시 : const funcName = (a) => {console.log(a)};

const 없이 선언해도 작동을 하긴 하지만 절대로 사용하지 말자

함수를 선언할 때 ()안에 넣는 것을 매개변수라고 한다!
해당 함수내에서만 선언되는 변수이며, 함수 호출시 인자를 받는 기준! 이라고 생각하면 된다.

const arrowFunc = (a,b) => {
  console.log(a,b);
};

arrowFunc("첫번째 인자","두번째 인자")

인자는 값이다.
호출하는 함수에 넘겨줄 값을 전달인자 라고 한다.

깊게 생각하지 말자!
그냥 a 와 b를 순서대로 선언했기 때문에 arrowFunc 호출시 ()안에서 ,를 기준으로 a,b에 인자가 전달된다.

지금처럼 순서 가 아닌 이름으로 할당 및 선언하는 {객체 구조분해 할당} 이라는 것도 있는데 나중에 설명하겠다.

js에서 어떠한 변수명에 ()가 붙으면, 그것은 함수를 호출하여 사용함을 뜻한다.

즉, 내가 const a = 1 로 a를 선언했다고 했을 때
a()를 호출하면 a라는 이름의 함수를 찾기 때문에 a()는 함수를 찾을 수 없다는 오류를 내고 터진다!

올바른 선언 및 호출의 예시
function funcName(a) {
  console.log(a);
}
funcName("일반 함수");

const arrowFunc = (a) => {
  console.log(a);
};
arrowFunc("화살표 함수");

함수는 코드를 실행시켜주는 역할도 하지만, 제일 중요한 건 역시 반환 값이다!

return은 제일 큰 두가지 특징이 있는데

한번 사용해보자

const arrowFunc = (a) => {
  return a;
  console.log(a); //리턴이 실행 된 후의 코드는 실행되지 않는다.
};
arrowFunc("화살표 함수");

코드를 옮겨적기만 해도 console.log 부분의 색이 연해지는 것을 볼 수 있다.

즉 return이 종료된다면, 그 함수는 더이상 코드를 실행하지 않는다.

그렇다면 반환 된 값은 어떻게 사용할 수 있는가?
console.log의 경우 기본적으로 반환 된 값을 콘솔에 올리니 console.log(arrowFunc("화살표 함수")); 로 콘솔에 띄우는 것도 가능하며
기본적으로 아래와 같이 많이 사용한다.

const result = arrowFunc("화살표 함수");
console.log(result) //화살표 함수 가 출력된다.

함수가 리턴해주는 값은 우리가 변수로 선언할 수 있다.

지금부터 설명할 건, 딱히 알든 말든 크게 상관은 없는 함수 선언 및 사용법이다.
다만, 이런 방식도 있다는 것도 알고 갔으면 도움이 될거같아 작성하였다.

함수 선언은 함수의 이름이 없어도 선언이 가능한데, 그러면 그런 함수는 어떻게 호출해야 하는가?
즉시 실행 함수로 사용할 수 있다.

자주 사용하지는 않지만, 주로 테스트 단계에서 어쩌다가 한번은 사용하기도 한다..

(function (a) {console.log(a);})("이름 없는 일반 함수");

((a) => {console.log(a);})("이름 없는 화살표 함수");

방식은 (함수 선언)(인자) 다.

굳이 이해할 필요는 없어서 설명도 적진 않겠다.
그냥 이런 방식으로 사용할 수도 있구나, 하고 다음으로 넘어가보도록 하자!

쓸데없는 것에 메모리를 많이 할당 할 만큼 코딩은 여유롭지 못하다..