함수란 무엇인가?

함수란 기능의 단위의 코드의 묶음이며, 입력값과 출력값을 가집니다.

 function sum(a, b) {
  return a + b;
}

위에서 선언한 sum 함수는 매개변수 2개를 받아 매개변수의 합을 반환해주는 함수입니다.

여기서 매개변수(parameter)란 함수를 선언할 때 입력되는 값입니다.

그렇다면 전달인자(argument)는 무엇일까요?

전달인자는 함수가 호출될 때 실제로 입력되는 값을 뜻합니다.

sum(3, 4)

// 이와 같이 sum 함수를 호출 할때 입력되는 숫자 3, 4는 전달인자

console.log(sum(3,4)) // 7

함수선언식 vs 함수표현식 vs 화살표 함수

예시로 삼각형의 넓이를 구하는 함수를 작성해 봅시다.

1. 함수선언식

 function getTriangleAre(base, height) {
   let triangleArea = (base * height) / 2;
   return triangleArea;
 }

2. 함수표현식

 const getTriangleArea = function(base, height) {
   let triangleArea = (base * height) / 2;
   return triangleArea;
 }

3. 화살표 함수

 const getTriangleArea = (base, height) =>  {
   let triangleArea = (base * height) / 2;
   return triangleArea;
 }
  
  // 함수의 body에 return문만 있는 경우 return과 중괄호 생략 가능
  const getTriangleArea = (base, height) =>  (base * height) / 2;

세 함수는 모두 같은 로직을 가지고 있으나 각각의 차이점이 존재합니다.

함수선언식 vs 함수표현식

선언식과 표현식은 호이스팅(hoisting)에차 그 차이를 보입니다.

Hello(); // 'hello'
Hello2() ; // error

const hi ='hi';
function Hello(){ console.log('hello') }
const Hello2 = function(){ console.log('hello') };

선언식의 경우 함수가 호출된 이후에 함수 선언이 이루어져도 호이스팅되어 정상적으로 잘 작동 되지만
함수 표현식의 경우에는 호이시팅 되지 않아 Hello2 함수는 실행되지 않는 것을 알 수 있습니다.

함수표현식 vs 화살표함수

첫 번째, 화살표 함수는 yield 키워드를 사용할 수 없습니다.

두 번째, 화살표 함수 앞에 new 연산자를 붙여서 호출할 수 없습니다.

세 번째, 표현식과 화살표 함수는 this값이 가리키는 대상이 다릅니다.

const cat = {
name: 'meow',
foo1: function() {
  const foo2 = function() {
    console.log(this.name);
  }
  foo2();
}
};

cat.foo1();	// undefined

• cat.foo1() 메소드 호출 시 내부 함수 foo2가 실행됩니다.
• 함수가 호출됐으므로 foo2 내부의 this는 지정되지 않아서 곧 전역 객체를 가리킵니다.
• 전역 객체에 name이란 속성은 존재하지 않으므로 undefined가 출력됩니다.

const cat = {
name: 'meow',
foo1: function() {
  const foo2 = () => {
    console.log(this.name);
  }
  foo2();
}
};
cat.foo1();	// meow

• foo2를 화살표 함수로 선언 한 경우, this는 cat을 가리키게 됩니다.

왜 이런 현상이 발생하는 것일일까요?

function 키워드로 선언한 함수가 메소드로 호출되냐 함수 자체로 호출되냐에 따라 동적으로 this가 바인딩되는 반면, 화살표 함수의 경우는 선언될 시점에서의 상위 스코프를 this로 바인딩하게 되기 때문입니다.