먼저 함수와 관련된 용어부터 정리해보자.

함수관련용어

// 함수의 선언
function add(a,b){
	return a + b;
}

// 함수의 호출
add(3,5);

각 요소들의 명칭은 다음과 같다.

keyword name(parameter){  //parameter => 매개변수
	body
}

name(argument) // argument => 전달인자

함수선언방식

직사각형의 넓이를 구하는 함수로 예시를 들어보자.

함수선언식

• 함수 이름이 명시되어 있어야 한다.
• 함수 이름으로 함수를 호출한다.

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

getRectangleArea(3,5);

참고로, 결과값을 변수에 저장하지 않고, 바로 리턴하는 것이 더 컴팩트한 코드이다.

함수표현식

• 함수를 변수에 할당하는 방법
• 함수에 이름이 붙여졌다고 해도 변수명을 사용하여 함수를 호출해야한다.
• 함수선언부의 끝 부분에 세미콜론(;)을 붙여줘야한다.

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

result(3,4);

여기서 result는 함수명이 아니다. -> 익명함수가 할당된 변수의 이름이다.

함수선언식과 함수표현식의 차이

호이스팅(hoisting)
: 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미.

자바스크립트 엔진이 script태그를 만나면 자바스크립트 파일에 선언된 변수와 함수를 메모리에 저장한다. 그 후, 코드가 위에서 부터 차례대로 실행된다.

'호이스팅'으로 인해 코드의 하단부에 선언된 함수나 변수도 코드의 상단부에서 함수를 호출할 수 있게 되는 것이다.

함수선언식은 호이스팅이 된다.
함수표현식은 호이스팅이 되지 않는다.

화살표함수

• 익명함수의 단축표현

const result2 = (width, height) => {return width * height};

return은 생략가능하다.

const result2 = (width, height) => width * height;

참고자료
https://velog.io/@bigbrothershin/오늘-공부할-것2020.1.30