React에서 함수형 Component를 사용하는데 함수선언과 화살표함수에서 export default를 사용 차이가 있다는걸 발견하였다. 이에 궁금증이 생겨 함수선언식과 함수표현식에 대해 다시 공부해야겠다는 생각이 들었고, 그동안 함수를 사용할줄알았지 두 개념의 차이를 몰랐다는 것에 부끄러움이 느껴졌다.. 배웠던 내용인데 복습이 꼼꼼하지 않아 궁금증이 계속생기고있어 배운것이외의 공부를 하지 않은 점에 대해 반성을 하게 되었고 이제 해당부분들을 꼼꼼히 메우려고한다.

함수

• 함수는 자신의 외부에서 코드가 호출되거나 재귀함수의 경우 내부적으로 호출되는 "subprogram"
• program과 마찬가지로 함수는 function body에 명령문 시퀀스로 구성
• parameter로 값을 전달할 수 있고 return으로 값을 반환 가능
  • 단 함수실행이 return에서 끝나지 않거나 return뒤에 표현식이 없는경우 undefined가 반환됨
• JavaScript에서 함수는 다른 함수로 전달되거나 반환받을 수 있고, 변수와 속성을 할당받을 수도 있기 때문에 First-Class object에 해당함
• 다른 객체와 마찬가지로 properties와 methods를 가질수 있고 객체와 구별되는 점은 함수 호출 가능
• 함수 정의 방법 3가지 함수 선언 함수표현식 생성자

First-Class object
프로그래밍 언어에서 함수가 다른 변수처럼 처리될 때 first-class object라 한다.
예를들어 함수가 다른함수에 인자로 전달되거나 다른함수에 의해 반환될 수 있고 변수에 값으로 할당 될 수있다.

// 생성자
const add = new Function("x", "y", "return x + y");

// 선언
function add(x, y) {
  return x + y;
} // No need for semicolon here

// 표현식; 변수에 할당되는 익명 함수입니다.
const add = function (x, y) {
  return x + y;
};
// 표현식; 고유한 이름을 가집니다.
const add = function funcName(x, y) {
  return x + y;
};

// 화살표 함수
const multiply = (x, y) => x + y;

// 메서드
const obj = {
  //객체안에 사용
  add(x, y) {
    return x + y;
  },
};

콜백함수

• 다른함수에 인수로 전달되는 함수를 콜백함수라 한다.

함수 선언(function declaration)

• 함수선언은 지정된 매개변수(parameter)를 갖는 함수를 정의
• function 생성자나 함수표현식을 사용해서 정의 가능
• 기본적으로 함수는 undefined를 반환, 반환값을 지정하려면 return 필요
• 함수 선언으로 생성된 함수는 function객체로 function객체의 모든속성, 메서드 및 행위 특성을 갖음
• 함수 선언은 그 선언을 둘러싼 함수의 최상부나 전역 범위(global scope)로 끌어올려짐(호이스팅)

function `함수이름` ('parameter'){
	'statement'
}

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

함수 표현식

• 함수이름이 없는경우(익명함수) 생략할 수 있으며 함수이름은 함수의 body 내에서만 사용가능
• 함수 표현식은 함수선언과 거의 비슷하나 익명함수로 만들경우 이름을 생략할 수 있는 특징을 갖음
• 함수 표현식은 정의되자마자 실행되는 즉시 호출 함수 표현식으로 사용가능
• 함수 표현식은 함수 선언과 달리 끌어올려지지 않으며 정의 이후 사용가능.
• 함수 body에서 현재 함수를 참고하고 싶다면 유명(named)함수를 생성해야함
• callback으로 자주 사용됨

const 변수 = function 함수이름 (매개변수) {
	statement;
}

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

//callback함수로 사용
button.addEventListener("click", function (event) {
  console.log("button is clicked!");
});

화살표 함수 표현식

• 함수표현식에 대한 간결한 대안, 약간의 의미적 차이와 의도적인 사용상의 제한을 갖음
• 화살표 함수에는 자체 바인딩이 this에 없어 인수 또는 super로 사용해야하며 메서드로 사용 불가능
• 화살표한수는 생성자로 사용 불가. new로 호출하면 typeError반환
• 화살표 함수는 함수 내부에서 yield사용할 수 없으며 제너레이터 함수로 생성 불가
• 매개변수와 화살표 사이에 줄바꿈이 포함 될 수 없음.
• js는 화살표 뒤에 오는 토큰이 {가 아닌 경우에만 화살표 함수에 간결한 본문이 있는 것으로 간주

//사용예
// 기존의 익명 함수
(function (a, b) {
  const chuck = 42;
  return a + b + chuck;
});

// 화살표 함수
(a, b) => {
  const chuck = 42;
  return a + b + chuck;
};

// 기존 함수
function bob(a) {
  return a + 100;
}

// 화살표 함수
const bob2 = (a) => a + 100;


const func = (x) => x * x;
// 간결한 본문 구문, 암시적 "반환"

const func2 = (x, y) => {
  return x + y;
};
// 블록 본문을 포함, 명시적 "반환" 필요

화살표함수 예제

// 빈 화살표 함수는 정의되지 않은 값을 반환합니다.
const empty = () => {};

(() => "foobar")();
// "foobar"를 반환합니다.
// (즉시 호출되는 함수 표현식입니다.)

const simple = (a) => (a > 15 ? 15 : a);
simple(16); // 15
simple(10); // 10

const max = (a, b) => (a > b ? a : b);

// 간단한 배열 필터링, 매핑 등
const arr = [5, 6, 13, 0, 1, 18, 23];

const sum = arr.reduce((a, b) => a + b);
// 66

const even = arr.filter((v) => v % 2 === 0);
// [6, 0, 18]

const double = arr.map((v) => v * 2);
// [10, 12, 26, 0, 2, 36, 46]

// 보다 간결한 프로미스 체인
promise
  .then((a) => {
    // …
  })
  .then((b) => {
    // …
  });

// 시각적으로 더 쉽게 구문 분석할 수 있는 매개변수 없는 화살표 함수
setTimeout(() => {
  console.log("I happen sooner");
  setTimeout(() => {
    // deeper code
    console.log("I happen later");
  }, 1);
}, 1);

호이스팅

• 인터프리터가 코드를 실행하기 전 함수, 변수, 클래스 또는 import의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상
• 자바스크립트 엔진은 코드를 실행하기 전 실행 가능한 코드를 형샹화하고 구분하는 과정을 거친다.
• 자바스크립트 엔진은 코드를 실행하기 전 실행 가능한 컨텐그스를 위한 과정에서 모든 선언(var, let, const, function, class)을 스코프에 등록한다.
• 코드 실행 전 이미 변수선언/함수선언이 저장되어있기 때문에 선언문보다 참조/호출이 먼저 나와도 오류 없이 동작
• var는 선언과 함께 undefined로 초기화 되어 메모리에 저장되는데 let과 const는 초기화 되지 않은 상태로 선언만 메모리에 저장되기 때문에 선언문 이전에 참조되면 참조에러(referenceError)가 발생한다. (초기화 되지 않으면 변수를 참조할 수 없다.)

참고 : 호이스팅

출처 : mdn문서