Modern JavaScript Deep Dive 11장

함수

일련의 과정을 문으로 구현하고 코드블록으로 감싸서 하나의 실행단위로 정의한 것.
코드 재 사용성, 유지보수 편의성, 코드 신뢰성을 높일 수 있음. 실행 시점 결정 가능.

function add(x,y) {
	return x + y;
}

add(2,5); // 7

• 매개변수 : 함수 내부로 입력을 전달받는 변수
  인수 : 입력
  반환값 : 출력
  함수이름 : 함수는 객체 타입 값. 여러 개 존재할 수 있으므로 특정 함수 구별하기 위해 식별자인 함수 이름 사용 가능. 함수 역할을 잘 설명해야 함.(코드 가독성 향상)

함수 호출

미리 정의된 일련의 과정을 실행하기 위해 필요한 입력(인수)를 매개변수를 통해 함수에 전달하면서 함수의 실행 명시적으로 지시하는 것. 실행 결과 반환 값 반환함.

var result =add(2, 5);

console.log(result); // 7

함수 리터럴

함수 리터럴이 평가되어 함수 객체를 생성. 즉, 함수는 객체. 함수는 호출 가능 (일반 객체는 호출 불가)

• 구성요소
  함수 이름 : 식별자(식별자 네이밍 규칙 준수), 함수 몸체 내에서만 참조 가능, 생략 가능. Ex) 기명함수, 무명/익명 함수
  
  매개변수 목록 : 0개 이상 매개변수를 소괄호로 감싸고 쉼표로 구분. 지정한 인수가 순서대로 할당(순서에 의미가 있음). 함수 몸체 내에서 변수와 동일하게 취급(식별자 네이밍 규칙 준수)
  
  함수 몸체 : 함수 호출 되었을 때, 일괄적으로 실행될 문들을 하나의 실행 단위로 정의한 코드 블록. 함수 호출에 의해 실행됨.

var f = function add(x,y){
	return x + y;
}

함수 정의

정의된 함수는 자바스크립트 엔진에 의해 평가되어 함수 객체가 됨.

• 함수 선언문 (표현식이 아닌 문)
  함수 리터럴과 형태 동일. (기명 함수 리터럴은 코드 문맥에 따라 함수 선언문 또는 함수 리터럴 표현식으로 해석. 리터럴이 단독으로 사용될 경우 선언문으로 해석. 크롬 개발자 도구에서 선언문 실행 시 undefined 출력.) 함수 이름 생략 불가.

function add(x, y){
	return x + y;
}

function foo(){ console.log('foo') }
foo(); // foo
함수 선언문으로 정의한 함수는 런타임 이전에 먼저 객체를 생성하고 함수 이름과 동일한 식별자를 암묵적으로 생성하고 생성된 함수 객체를 할당함. 즉, 함수 선언문 이전에 함수를 참조/호출 할 수 있음(함수 객체를 가리키는 식별자를 호출). 함수 선언문이 코드 선두로 끌어올려진 것처럼 동작하는 자바 스크립트 고유한 특징을 함수 호이스팅 이라고 함.

• 함수 표현식 (표현식인 문)
  자바스크립트 함수는 일급 객체(값의 성질을 갖는 객체). 함수 리터럴이 값으로 평가되어야 하는 문맥(함수 리터럴을 변수 할당. 피연산자로 사용 등)에서는 함수 리터럴로 생성한 함수 객체를 할당 가능. 함수 리터럴을 표현식으로 해석. 함수 이름 생략 가능.

var add = function (x,y){
	return x + y;
}

(function bar() { console.log('bar'); });
bar(); // ReferenceError: bar is not defined;
함수 표현식은 암묵적으로 식별자를 생성하지 않음. bar()로 호출 시 함수 이름을 호출하는 것으로 해석 되서, ReferenceError발생함.

함수 표현식은 변수 선언문과 변수 할당문을 한번에 기술한 축약 표현과 동일하게 동작.
변수 선언은 런타임 이전에 실행되어 undefined로 초기화되지만 변수 할당문의 값은 할당문이 실행되는 시점, 즉 런타임에 평가되므로 함수 표현식의 함수 리터럴도 할당문이 실행되는 시점에 평가되어 함수 객체가 됨. 변수 호이스팅이 발생함.

• Function 생성자 함수
  빌트인 함수인 Function 생성자 함수에 매개변수 목록과 함수 몸체를 문자열로 전달하면서 new 연산자와 함께 호출하면 함수 객체를 생성해서 반환함.(new연산자 없이 호출해도 결과는 동일)
  
  클로저를 생성하지 않음. 함수 선언문/표현식으로 생성한 함수와 다르게 동작

var add = new Function('x', 'y', 'return x + y');

console.log(add(2,5)); // 7

• 화살표 함수(ES6)
  function키워드 대신 화살표를 사용해 좀 더 간략한 방법으로 함수 선언 가능. 항상 익명 함수로 정의
  
  생성자 함수로 사용 불가. 기존 함수와 this 바인딩이 다르고, prototype프로퍼티가 없으며, arguments 객체를 생성하지 않음

var add = (x,y) => x + y;
console.log(add(2,5)); // 7