함수의 종류

정성준 (Seongjun Chung)·2021년 5월 11일
0

JS Dev

목록 보기
2/7
post-thumbnail

JS문법 상의 여러가지의 함수의 종류를 정리해보고자 한다. 예시로 사각형의 넓이를 구하는 함수를 작성해보자.

함수의 이름은 누가봐도 어떤 기능을 하는 함수인지 알기 좋게 작명하는 것이 좋고 각 함수는 한개씩의 기능을 수행하는 함수로 만들어지는 것이 좋다.

함수선언식

function getAreaOfRec(width, height) {
  let result = width * height;
  return result;
}

console.log(getAreaOfRec(3, 4)); 	//12

위 처럼 function으로 함수를 선언할 것을 알려주고 getAreaOfRec으로 선언될 함수의 이름을 정해준다.
함수를 사용할 때는 함수이름과 소괄호를 붙여 getAreaOfRec(param1, param2) 활용하면 된다.


함수표현식

const getAreaOfRec = function (width, height) {
  let result = width * height;
  return result;
};

console.log(getAreaOfRec(3, 4)); 	//12

표현식은 변수를 선언하는 것처럼 함수의 키워드를 선언해주고 그 값으로 function과 매개변수들을 할당해준다.


화살표함수

const getAreaOfRec = (width, height) => width * height; //소괄호() 혹은 미사용 시 return생략 가능

console.log(getAreaOfRec(3, 4)); 	//12

화살표함수는 ES6에서 새로 나온 문법이고 기존 함수를 선언하던 방식보다 조금 더 간결하게 사용가능하다.
함수이름을 변수처럼 선언해주고 그 값으로 (param1, param2)를 할당해준 뒤, 기존함수들에서 {}안에 함수의 기능을 정리해주던 것을 똑같이 해주고 값을 return해줘도 되지만 위 처럼 기능이 한줄 정도로 정리가 가능할 때는 ()혹은 생략하고 return을 해주지 않아도 함수를 호출했을 때 값을 사용할 수 있다.

그 외에 이 들의 차이점에서 많은 기술적인 이점들이 있을 것 같은데 차차 공부하면서 느끼게되면 추가적으로 정리할 예정이다. 오늘도 화이팅👏

profile
ZEP에서 프론트엔드 개발을 하고 있습니다.

0개의 댓글