TIL 2 (3) : 함수 (JavaScript)

함수 (function)

지시사항들(코드)의 묶음.

입력값과 출력값 사이의 관계라고 생각하시면 됩니다.

함수의 특징으로 반드시 무언가를 출력(return)한다는 것입니다. 출력값이 없더라도 undefined를 return 합니다.

 

1. 선언 (declaration)

선언 방법에는 크게 세 가지가 있습니다. 선언을 위해서는 keyword, name, parameter, body가 필요합니다.

• 함수 선언식
  

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

• 함수 표현식
  

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

• 화살표 함수
  

  const getRectangleArea=(width,height) => {
      let rectangleArea=width*height;
      return rectangleArea;
  }​

  let getRectangleArea = (width, height) => width * height​

  화살표 함수는 함수 표현식 기반으로 만들어져서 '변수 선언 후 익명 함수를 할당'합니다. 이때 function을 쓰는 대신 '=>'를 사용합니다. 만약 함수의 본문(body)에 return문만 있으면, return과 {} 중괄호를 생략할 수 있습니다. 하지만 만약 함수 내의 표현식이 2줄 이상인 경우, 생략 시 가독성이 떨어지므로 return과 중괄호를 써주는 것이 더 좋습니다.
  return문에서 () 소괄호를 사용할 수 있습니다.

 

함수 선언식과 함수 표현식의 차이점으로는 호이스팅(hoisting)과 세미콜론(;)이 있습니다.

 

여기서 호이스팅은 간단하게 끌어올리기라고 생각하면 됩니다. 일반적으로 자바스크립트는 위에서부터 아래로 코드를 실행하는데 호이스팅을 통해 밑에 있는 코드를 먼저 실행시킬 수 있습니다.

함수 선언식은 호이스팅이 되지만, 함수 표현식은 호이스팅이 되지 않습니다.

 

함수를 선언할 때

함수 선언식은 세미콜론(;) 을 사용하지 않지만, 함수 표현식은 사용합니다.

참조)

세미콜론의 역할

https://ko.javascript.info/function-expressions

함수 표현식과 화살표 함수의 차이점

https://walkinpcm.blogspot.com/2019/11/javascript-arrow-function.html

 

2. 호출 (call, invocation)

선언을 할 때 매개변수(parameter)를 이용합니다. 매개변수는 입력을 어떻게 하느냐에 따라 바뀔 수 있습니다.

이렇게 선언된 함수를 호출할 때 전달인자(argument)를 이용합니다.