[JS] 함수 선언(Function Declarations) | 함수 표현식(Function Expression)

JS에서 함수를 작성하는 방법은 여러가지이다. 각각의 기능은 조금씩 다르긴하다. 

함수 선언

https://recordoftheday.tistory.com/entry/JS-%EC%84%A0%EC%96%B8%EA%B3%BC-%ED%91%9C%ED%98%84

[JS] 함수(Functions)

 

↑

함수에 대해 정리 해논 내용은 함수 선언(function declarations)이다. 함수 키워드만으로 함수를 선언했기 때문이다. 

 

출생 년도에 따라 나이를 계산하는 기능이다. 

function calcAge1(birthYear)

먼저 함수 키워드를 사용해야 한다. function calcAge1을 작성한다. 이 함수에 출생연도를 작성하고 싶다.

그렇다면 input은어디일까? input은 birthYear이다.

birthYear은 이 함수의 매개변수이다. 매개 변수는 약간 로컬 변수 같다

로컬변수(=지역변수)
value은 function안에서만 사용가능하다. 

 

function calcAge1(birthYear) {
  
}

그 다음 함수 본체에서 중괄호를 하고

 

function calcAge1(birthYear) {
  const age = 2037 - birthYear;
}

2037년도라고 가정을 하고 그 사람의 생일을 뺀다. 

 

function calcAge1(birthYear) {
  const age = 2037 - birthYear;
  return age;
}

이제 함수에서 이 값을 뺀 다음 return 키워드로 반환한다. 

먼저 나이를 계산하고 그 값을 반환한다. 

위의 과정을 단순화해서 한번에 반환할 수 있다. 

 

const age = 2037 - birthYear을 작성할 필요없다. (즉 이 값을 변수에 저장할 필요없다.) 

왜? 값을 반환하기만 하면 되니까!

 

function calcAge1(birthYear) {
  return 2037 - birthYear;
}

2037 - birthYear ← 이 식의 결과를 return에 반환한다. 

=> return 2037 - birthYear;

위의 코드 방법은 제네릭 함수(Generic Function)이다. 

 

이제 이 함수를 call/run/invoke해보겠다.

calcAge1();

calcAge함수를 호출하고 괄호를 사용한다. 

 

function calcAge1(birthYear) {
  return 2037 - birthYear;
}

calcAge1(1991);

그런 다음 인수(매개변수의 실제 값)을 명시한다. 이제 calcAge1(1991)은 값을 생성한다. 여기에 생성되는 값은 calcAge1함수에서 반환된 값이다. 

 

매개변수와 인수
매개변수는 함수에서 다시 한번 일종의 자리 표시자이다.
인수는 내가 그 자리 표시자를 채우기 위해 사용하는 실제 값이다. 이건 매개변수이기도 하다. 

 

다시 한번 calAge1의 값을 변수에 저장해야한다. 

어떻게?

const age1 = calcAge1(1991);

이렇게 말이다. 먼저 작동여부를 위해 큰솔에서 확인해 보겠다. 

function calcAge1(birthYear) {
  return 2037 - birthYear;
}

const age1 = calcAge1(1991);
console.log(age1);

46이 나왔다. 위의 코드와 같은 방식을 함수 선언이라고 한다. 

---

함수 표현식(function expression)

function (birthYear) {
  
}

calcAge1라는 이름으로 함수를 작성하는 대신에 간단하게 이름이 없는 함수를 작성하면 된다.

그리고 매개 변수를 정의한다. 즉 함수 몸체를 정의한다. 

 

function (birthYear) {
  return 2037 - birthYear;
}

그리고 return 키워드를 작성하면 이 모든걸 변수에 저장하여 그 변수가 함수가 된다. 

 

const calcAge2 = function (birthYear) {
  return 2037 - birthYear;
};

이것을 calcAge2라고 하겠다. 함수 선언과 비슷한 방식으로 함수를 작성했지만

 

function (birthYear) {
  return 2037 - birthYear;
};

 

위의 코드 부분에서는 이름을 안줬다. 이런걸 익명 함수(Anonymous Functions)라고 부른다. 저 부분은 모든 건 기본적으로 식이다. 식은 값을 생산한다. 따라서 저 식을 calcAge2에 저장하는데 사용하면 그것은 함수가 된다. 저 식은 표현식이다.

저 전체 식을 calcAge2 변수에 할당했다. 그래서 calcAge2변수는 기본적으로 함수 값을 갖고 있다. 

 

그렇다면 저 함수를 호출하려면 어떻게 해야할까?

익명 함수(Anonymous Functions)
이름이 없는 함수

const age2 = calcAge2;
console.log(1991);

age2는 calcAge2와 같다고 표시하고 큰솔에 출력하면 된다.

 

함수 선언(function declaration)과 함수 표현식(function expression)의 코드를 비교하면

//function declaration
function calcAge1(birthYear) {
  return 2037 - birthYear;
}

const age1 = calcAge1(1991);

//function expression
const calcAge2 = function (birthYear) {
  return 2037 - birthYear;
};

const age2 = calcAge2(1991);
console.log(age1, age2);

console.log(age1, age2)를 출력하면 46과 46이 나온다.

함수 표현식은 함수 선언과 정확히 같은 방식으로 작동, 반환, 호출한다. 왜냐면 함수 본체가 같기 때문이다.

---

자바스크립트에는 두 가지 유형의 함수가 있다는 걸 알아둬야 한다.

• 함수 선언(function declaration)
• 함수 표현식(function expression)

함수는 그냥 값이다. 숫자나 문자열이나 불리언 값으로 말이다. 함수는 타입이 아니다. 문자열이나 숫자 유형은 아니지만 값이기도 하다. 값이라면 변수에 저장할 수 있다. 변수 저장 쌉가능!

 

그렇다면 함수 선언과 함수 표현식의 가장 큰 차이점은 무엇일까?

실질적인 차이는 코드를 정의하기 전에 함수 선언을 호출한다는 것이다.

 

//function declaration
const age1 = calcAge1(1991);

function calcAge1(birthYear) {
  return 2037 - birthYear;
}

정의되기 전 const age1 = calcAge1(1991);을 먼저 부르고 나중에 정의하는 것이다. 그래도 큰솔에 값이 출력되는 걸 볼 수 있다 

 

이번엔 function expression에 const age2 = calcAge2(1991);을 먼저 부르고 실행해 보겠다. 

const age2 = calcAge2(1991);

const calcAge2 = function (birthYear) {
  return 2037 - birthYear;
};

그러자

초기화 전에 calcAge2를 액세스할 수 없다고 에러 메시지가 떴다.  내부적으로 hoisting이라고 불리는 프로세스때문에 발생했다.

---

그렇다면 함수를 작성할 때 두가지 유형의 함수 중 어떤 것을 사용해야 할까?

개인의 취향에 따라 사용하면 된다.