[Javascript] 함수, 함수 표현식, 화살표 함수 / 차이점

함수

사각형의 넓이를 구하는 함수를 작성한다고 하면,

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

다음과 같이 만들 수 있다.
여기서 getRectangleArea는 함수의 이름, width, height는 매개변수, width*height는 return 값이다

• 함수는 무조건 return 값을 갖는다. (함수 안에 return문이 없으면 undefiend를 반환한다.)

함수 표현식

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

console.log(getRectArea.name); //getRectArea 반환

함수 표현식도 일반적인 함수 선언과 비슷하다. 매개변수와 return 값을 갖는다.
차이점은

• 익명함수를 만들 수 있다. 위와 같은 함수의 경우 익명함수인데, function 키워드 뒤에 바로 매개변수가 선언된다.
• 함수가 변수 getRectArea에 담기게 된다.

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

console.log(getRectArea.name) //func1 반환

이런 식으로 이름을 만들어줄 수도 있긴 하다.

화살표 함수

const getRectArea = (width, height) => {
  let RectArea = width * height;
  return RectArea
}

• 화살표 함수는 function 키워드 없이 함수를 선언한다.

//방식 1
const getRectArea = (width, height) => width * height;

//방식 2
const getRectArea = (width, height) => {return width * height}

• 함수에 return문 한 줄만 있을 경우: 중괄호{}와 return문을 생략하고 작성할 수 있다.
• 중괄호{}로 body를 감싸줄 경우에는 return문이 있어야 한다!

+) MDN을 읽어보니까 몇가지 제한점이 있는데 아직은 잘 모르겠다.