🔍 Function

논리적인 일련의 작업을 하는 하나의 단위로, 코드의 묶음(즐겨찾기)을 의미하며 기능의 단위로도 볼 수 있다. 구체적인 입력값과 출력값을 가질 수 있고, 호출 후 반드시 return된다.

funtion cal(param1, parmam2){
   console.log(param1 + param2);
   return parma 1*10;
   } //선언

cal(10,20); //호출

함수를 이용하여 구구단 출력하기

function mulTablePrinter(num){ //keyword | name | prarameter(매개변수)
    console.log(num*1);//body
    console.log(num*2);
    console.log(num*3);
    console.log(num*4);
    console.log(num*5);
    console.log(num*6);
    console.log(num*7);
    console.log(num*8);
    console.log(num*9);
}

mulTablePrinter(2) //2단 출력,(2)=argument(전달인자)
mulTablePrinter(9) //9단 출력

입력값과 출력값

function getTriangleArea(base, height){
  let triangleArea = (base * height) / 2;
  return triangleArea; //함수내부에서 return을 하지 않은 경우, print undefined
}

console.log(getTriangleArea(2,4)) // print 4

//함수 내부에서 return-> 출력값이 return문의 값

👀 함수 선언 방법

✔ 함수 선언식

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

✔ 함수 표현식

const getTriangleArea = function(base, height){//변수에 익명 함수 할당
  let triangleArea = (base * height) / 2;
  return triangleArea;
}

✔ 화살표 함수

const getTriangleArea = (base, height) => {//함수표현식을 기반으로, 변수에 funtion keyword를 화살표로 축약해서 표기
  let triangleArea = (base * height) / 2;
  return triangleArea;
}

화살표 함수는 body에 return문만 있는 경우, return과 {}중괄호를 생략할 수 있다.

const getTriangleArea = (base, height) => base * height / 2; //O

const getTriangleArea = (base, height) => (base * height / 2) //O, 소괄호 사용가능

const getTriangleArea = (base, height) => {base * height / 2} //X, 중괄호 사용불가, return undefined

그러나, 함수 내의 표현식이 2줄 이상인 경우, 가독성을 위해 return과 {}중괄호를 명시적으로 쓰는 것이 좋다.

사각형의 넓이 구하기

• 함수 선언식

function getRectangleArea(width, height){
  let RectangleArea = width * height;
  return RectangleArea;
  }
  
  function getRectangleArea(width, height){ //더 빠르고 콤팩트한 코드
  return width * height;
  }

• 함수 표현식

const getRectangleArea = function(width, height){//변수에 익명 함수 할당
  let RectangleArea = width * height;
  return RectangleArea;
}

• 화살표 함수

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

//const getRectangleArea = (width, height) => width * height; //O

✔ 함수 선언식, 함수 표현식의 차이

함수 선언문은 var와 같이 함수 스코프를 가지고 있기 때문에 선언 전에 호출(함수 호이스팅)이 가능하다. 따라서, 어디서든 호출이 가능하다.

decl(); // '1'
function decl(){ 
    console.log(1)
} 

함수 표현식, 화살표 함수는 함수 호이스팅되지 않으므로 변수에 대해서 호이스팅을 하게되며 선언 전에 호출 시 error가 발생한다. 따라서, 함수를 초기화한 코드 밑에서만 호출된다.

expr(); // Uncaught ReferenceError: expr is not defined
expr = function(){ // let 호이스팅에 따라 ReferenceError가 출력된다.
    console.log(1)
};// 함수 표현식으로 함수 선언 시, 세미콜론 사용

expr(); // Uncaught ReferenceError: expr is not defined
const expr = function(){
    console.log(1)
};// const 호이스팅에 따라 ReferenceError가 출력된다.

expr(); // Uncaught ReferenceError: expr is not defined
let expr = function(){
    console.log(1)
};// let 호이스팅에 따라 ReferenceError가 출력된다.

var 키워드의 경우, 호이스팅에 따라 expr()값이 undefined이기 때문에 ReferenceError가 출력되지 않고, TypeError가 출력된다.

expr(); // Uncaught TypeError: expr is not a function
var expr = function(){
    console.log(1)
};//함수 표현식으로 함수 선언 시, 세미콜론 사용

✔ parameter와 argument의 차이점

parameter(매개변수): 함수 선언 시, 소괄호 안에 변수를 적어주는 값으로, 실행 시 입력에 따라 바뀔 수 있는 값
argument(전달인자): 함수 호출 시, parameter에 할당되는 값

Reference: 코드스테이츠