[JavaScript - 2] 함수 선언식, 함수 표현식, 화살표 함수

함수

• 일반 함수나 메서드는 리턴값을 지정하지 않을 경우, undefined 값이 리턴된다.
• 생성자 함수에서 리턴값을 지정하지 않을 경우 생성된 객체가 리턴된다.
• function 함수이름(매개변수(argument))

// 가장 기본적인 함수 형식
function 함수이름(매개변수){
	내용1
	내용2
	...
	return 리턴자료;
}

함수선언식

• 일반적인 프로그래밍 언어에서의 함수 선언과 비슷한 방식.
• 변수 선언을 let / const 등으로 시작해야 하는 것처럼 함수 선언은 function으로 시작.
• 선언된 함수는 나중에 사용될 것을 위해 저장되며 call 될 때마다 실행된다.
• 함수 실행 시 함수의 이름을 호출하면 된다.

function getRectangleArea (width, height) {
  let rectangleArea = width * height
  return rectangleArea
}

함수표현식

• 함수 표현식이 변수에 저장이 되면, 변수는 함수처럼 사용이 가능하다.
• 변수에 저장된 함수는 함수명이 따로 필요 없으며, 변수 이름을 통해서 호출한다.
• 변수를 선언하고 해당 변수에 함수를 할당하는 형태. 

let getRectangleArea = function (width, height) {
  let rectangleArea = width * height
  return rectangleArea
}

화살표함수 

1. 전통적인 함수표현(function)의 간편한 대안이다.

2. 화살표 함수는 몇 가지 제한점이 있고 모든 상황에 사용할 수는 없다. 이에 대한 자세한 내용은 밑에 링크를 확인 해보자.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions

화살표 함수 - JavaScript | MDN

3. 화살표 함수 특징

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

// 위의 일반적인 함수 표현은 아래 화살표 함수로 쓸 수 있다.
elements.map((element) => {
  return element.length;
}); // [8, 6, 7, 9]

 // 파라미터가 하나만 있을 때는 주변 괄호를 생략할 수 있다.
elements.map(element => {
  return element.length;
}); // [8, 6, 7, 9]

// 화살표 함수의 유일한 문장이 'return'일 때 'return'과
// 중괄호({})를 생략할 수 있다.
elements.map(element => element.length); // [8, 6, 7, 9]

// 이 경우 length 속성만 필요하므로 destructuring 매개변수를 사용할 수 있다.
// 'length'는 우리가 얻고자 하는 속성에 해당하는 반면,
// lengthFooBArX'는 변경 가능한 변수의 이름일 뿐이므로
// 원하는 유효한 변수명으로 변경할 수 있다.
elements.map(({ length: lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]

// destructuring 파라미터 할당도 아래와 같이 작성할 수 있습니다.
// 이 예에서 정의한 객체내의 'length'에 값을 지정하지 않은 점에 주목하세요. 대신, "length" 변수의
// 리터럴 이름은 우리가 해당 객체에서 꺼내오고 싶은 속성이름 자체로 사용됩니다.
elements.map(({ length }) => length); // [8, 6, 7, 9]