드림엘리 : Javascript - 6. Function

Functions 함수

• function : 프로그램 안에서 각각의 작은 기능들을 수행하는 것, 즉 프로그램을 구성하는 굉장히 기본적인 building block
• 프로그램 안에서 각각 저마다 기능을 진행하는 함수들 존재, 이런 절차적인 언어같은 경우 함수가 프로그램에서 굉장히 중요한 기능을 담당하고 있어 sub-program이라 불리기도 한다. 또한 함수는 여러번 재사용이 가능하다는 강점이 있다.
• 대체적으로 function은 한가지의 task나 어떠한 값을 계산하기 위해 쓰여진다.
• 추가된 class의 경우에도 java 처럼 pure한 oriented가 아니라 prototype을 베이스로한 가짜의 object oriented 이므로 자바스크립트도 procedural language(절차적인 언어)라고 볼 수 있다.
• fuction은 대체적으로 parameters(input)을 받아서 이것들을 잘 처리한 후 return(output)하는 것을 말한다
  • function 이름 잘 정의해야 함 : 언어 자체 존재하는 function을 쓸 때 혹은 API(Application Programming Interface)를 쓸 때 함수의 이름을 보고 이함수는 이런 일을 하겠구나 생각할 수 있다
  • function에서는 input과 output 중요 :전달되어야 하는 parameter이 무엇인지 어떤 값이 return될지 기대할 수 있는 지 인터페이스를 포고 이런 일들을 수행할 수 있구나 하고 예상할 수 있다.

1. Function declaration 함수 선언

• js에서의 function을 정의하는 방법
• function 함수이름(param1, param2){함수 안 기본적인 business logic 작성한 다음 return;}
• 중요! 하나의 함수는 한 가지의 일만 하도록 만들어야 함
• naming 함수이름 작성하기 : 변수이름 정할 때는 명사로 이름을 지정했지만 함수는 무언가를 동작하는 것이기 때문에 doSomething 이런 식으로 command 형태, 동사(verb) 형태로 이름을 지정해야 함
  • 함수 이름을 정하기가 너무 어렵다면 함수 내에서 너무 많은 것들을 하고 있진 않은지 한번 생각해 볼 필요 있다.
  • 함수 이름을 정했는 데 createCardAndPoint 이런 식으로 정했다면 이것을 세분화해서 나눌 순 있진 않을지 생각해봐야 조금 더 함수를 깨끗하게 만들 수 있다. ex) createCard, createPoint
  • 중요! first-class function : js에서 function은 object이다.
    • 함수가 object로 간주되기 때문에 함수를 변수에 할당할 수 있고, function의 parameter로도 전달이 되며 return값으로도 return 될 수 있다.
    • ex) 함수이름. 하면 해당함수가 object로 전환되어 해당 함수의 속성값들을 확인해 볼 수 있다.
• typescript에서 함수 사용시 함수의 parameter와 return 값에 타입을 명시하도록 되어져 있다.
  • 규모있는 프로젝트를 하거나 현업에서 다양한 개발자들과 일을 하거나 작성한 것을 라이브러리 형태로 api 로 제공해야 할 때 typescript를 쓰는 것이 조금 더 명확하고 개발 일을 더 쉽게 도와준다. 함수의 interface만 봐도 그 함수가 정확하게 무엇을 하는지 함수의 이름과 전달되는 parameter 그리고 그의 데이터 타입, 어떤 값이 return되는지 확실하게 확인할 수 있기 때문이다.
  • 반대로 js에서는 이런 interface가 정확하게 명시되어 있지 않기 때문에 프로그램을 만들 때 많은 문제가 있다. 이것을 보완하고자 typescript가 나온 것 
  • //Typescript // parameter type은 string, return type은 number function log(message: string): number { console.log(message); return 0; }

Parameters

• primitive type의 parameters : 메모리에 value가 그대로 저장되어 있기 때문에 value가 전달됨
• object type의 parameters : 메모리에 reference가 저장되기 때문에 reference가 전달됨, object는 reference가 전달되기 때문에 함수 안에서 object의 값을 변경하게 되면 그 변경된 사항이 그대로 메모리에 적용되기 때문에 추후에 변경된 사항들을 확인이 가능하다

Default Parameters

• ES6에서 추가된 사항
• parameter가 여러 개 일때 parameter의 값이 전달되지 않았을 경우를 대비해서 씀, parameter의 값이 전달되지 않았을 경우 사용할 값(default value)을 함수의 parameter 에서 = 으로 작성

function name (param1, param2 = default value) {

}

• 사용자가 paramter을 전달하지 않을 때 default value가 대체되어서 사용되어짐

Rest Parameters

• ES6에서 추가된 사항
• Rest Parameter : parameter를 ...parmeter 형식으로 작성한 것
• 배열 형태로 전달됨
• 배열 출력시 간편하게 하는 법
  • for of 사용

    for (const arg of args /*args에 있는 값 하나하나가 arg로 지정됨*/) {
      console.log(arg); // arg 출력
    }

  • 배열 함수 forEach 사용

    args.forEach((arg) => console.log(arg));

Return

• return type이 없는 함수들은 return undefined; 가 들어가있는 거나 똑같으므로 생략이 가능하다.
• 모든 함수에는 return undefined; 이거나 값을 return 할 수 있다.

Early return, early exit

• if와 같이 조건이 있을 경우 블록 안에서 로직을 많이 작성하는 경우 가성비가 떨어짐 이런 경우 if와 else를 번갈아 쓰기 보다는 조건이 맞지 않는 경우 빨리 return 해서 함수를 종료하고 조건이 맞을 때 그다음에 와서 필요한 로직들을 쭉 실행하는 것이 좋다.
• 조건이 맞지 않는 경우, 값이 undefined인 경우, 값이 -1인 경우 빨리 return하고 필요한 로직들은 그 뒤에 작성하는 것이 더 좋다.

---

2. Function Expression

• first-class function(변수 할당o, parameter로서의 사용o, return 값으로서의 사용)이 가능하게 하는 것
• anonymous function : 함수에 이름이 없는 것, 함수 이름 없이 필요한 부분만 작성해서 변수에 할당할 수 있다.

  변수 = function (param) {};

• named function : 이름이 있는 함수
  • expression에서 이름을 쓰는 경우는 디버깅할때 stack traces에 함수 이름이 나오게 하기 위해서 사용
  • recursion : 함수 안에서 자신스스로를 또다른 함수로 호출할 때 사용 ex) 피보나치 수열 계산, 반복되는 평균 값 계산

    변수 = function name(param) {};

• 변수에 함수 할당시 변수를 함수 호출하듯이 할 수 있다 ex)변수(param));
  • 다시 그 변수를 다른 변수에 할당하게 되면 그 다른 변수가 함수를 가리키고 있기 때문에 똑같이 다른변수(param); 처음 할당된 함수 출력
• function declaration과 function expression의 큰차이점 : function expression의 경우 함수가 할당된 다음부터 호출이 가능한 반면에 function declaration은 hoist가 된다.(함수가 선언되기 이전에 호출할 수 있다.) 왜냐하면 js 엔진이 선언된 것을 제일 위로 올려주기 때문이다.

Callback

• 함수 안에 여러 함수를 parameter로 전달해서 상황이 맞으면 전달된 함수를 호출하는 것을 callback function이라 한다.
• 함수를 무한대로 호출하게 되면 maximum call stack size exceeded라고 뜨며 call stack이 꽉 찼다는 에러 발생

Arrow Function

• 함수를 간결하게 만들어 주는 좋은 것
• 항상 이름이 없는 anonymous function이다.
• fuction 키워드 없이 화살표로 함수 구성할 수 있다.(한 줄 일 경우 {}과 return 키워드 생략 가능)

변수 = (param) => {body..return;}

IIFE(Immediately Invoked Function Expression)

• 함수 선언시 나중에 따로 함수 호출을 해줘야 그 함수가 실행되는 것이 일반적이지만 함수 선언과 동시에 바로 호출을 하기 위해서 함수가 선언된 부분을 ()로 묶음 다음에 함수를 호출하듯이 (); 를 그 뒤에 붙여주면 함수 선언과 동시에 호출이 가능하다

  (function name() {body.. return;})();

• 최근에는 자주 쓰이지는 않지만 js에서 바로 함수를 실행하고 싶을 때 유용하게 쓰인다.