2. 함수

1. 함수란?

함수는 어떠한 작업을 하기 위해 필요한  문(statement)들을 묶어둔 코드 블록이다.

미리 함수 정의(function defintion)를 해두고 함수 호출(function call/invoke)을 통해 사용한다.

함수 호출이 되면 코드 블록에 담겨있는 문들이 일괄적으로 실행되고 반환값(return value)을 반환한다.

 

 

2. 함수를 사용하는 이유

1) 코드의 재사용

동일한 작업을 반복수행 해야한다면 같은 코드를 여러 번 작성하는 것 보다 함수를 정의하여 재사용 하는 것이 편하다.

 

2) 유지보수의 편의성

코드를 수정해야할 때 만약 함수를 사용하지 않는다면 사용된 모든 곳의 값을 변경해야 하지만 함수를 사용하면 한번만 수정해도 코드 전체에 적용이 된다.

 

3) 코드의 가독성 향상

함수명과 매개변수명을 적절하게 지으면 함수의 내부 코드를 이해하지 않고도 함수의 역할을 파악할 수 있게 해준다.

이는 매번 코드를 해석할 필요성을 줄여주고 다른 사람들이 코드를 읽기 매우 편해진다.

 

 

3. 함수 정의

함수는 4가지 방식으로 정의가 가능하다.

 

1) 함수 선언문

함수 선언문은 함수 이름을 생략할 수 없다.

 

2) 함수 표현식

함수 표현식은 함수 이름을 생략할 수 있다. 하지만 함수 이름으로 호출하면 오류가 발생한다. // 참조오류 : fff가 정의되지 않았습니다

※ 주의해야할 점

함수 표현식은 함수 선언문과 다르게 호이스팅 되지 않기 때문에 함수 표현식 이전에 함수 호출이 불가능하다.

 

3) Function 생성자 함수

자바스크립트에서 제공하는 빌트인 함수 Function 생성자 함수 사용

※ 생성자 함수는 자바스크립트에서 기본 제공되는 객체 생성 함수이다. 

※ 이 방식은 보안문제와 전역범위로 한정된 함수만 생성할 수 있다는 점 때문에 잘 사용되지 않는다.

 

4) 화살표 함수

ES6에 도입된 화살표 함수

function 키워드 대신 화살표 (=>) 를 사용해 좀 더 간략한 방식으로 함수를 선언 할 수 있다.

심지어 화살표 함수는 내부 동작 또한 간략화되어 빠르게 동작할 수 있다.

 

하지만 간략화 된 만큼 화살표 함수는 this, super, arguments, new.target에 대한 바인딩이 없고

생성자로 사용할 수 없으며 중복된 매개변수 명 선언이 불가능하다.

 

일반적인 상황에서는 전통적인 함수 표현인 함수 표현식을 사용하는 것이 안전하지만 

짧은 코드를 아주 간단하게 짤 수 있다! (함수 이름과 return을 생략할 수 있다.)

또한 화살표 내부에서 this는 바인딩되지 않기 때문에 콜백함수의 this와 외부함수의 this 간 불일치 문제를 해결할 수 있다.

(하지만 이에 대한 문제는 아직 다루기 어려움이 있어 화살표 함수는 짧은 코드 작성시에만 사용하도록 하자....)