📒자바스크립트 함수

자바스크립에서 함수는 객체 타입의 값이다.

리터럴은 값을 생성하기 위한 표기법이다. 숫자 리터럴, 객체 리터럴로 숫자, 객체를 생성하듯 함수 리터럴로 함수를 생성할 수 있다.

자바스크립트에서 함수는 4가지 방식으로 정의할 수 있다.

• 함수 선언문
• 함수 표현식
• Function 생성자 함수
• 화살표 함수

정의된 함수는 자바스크립트 엔진에 의해 실행되어 함수 객체를 생성한다.

자바스크립트 함수는 일급 객체이며 호출가능한 객체(callable)이다.

함수도 객체이므로 프로퍼티를 가지고 있다.

✔️함수 정의 방식

📌함수 선언문

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

함수 선언문은 표현식이 아니므로 변수에 할당할 수 없다.

자바스크립트 엔진은 함수 호출을 위해 함수 이름과 동일한 식별자를 암묵적으로 생성하여 함수 객체를 바인딩한다.

함수는 함수 이름으로 호출하는 것이 아니고 식별자로 호출한다. 또한 함수 이름은 정의된 함수 내부에서만 유효하다.

👉 호이스팅

선언문이 코드 최상단으로 끌어 올려진 것처럼 동작하는 현상을 호이스팅이라고 한다.

모든 선언문은 런타임 이전에 자바스크림트 엔진에 의해 먼저 실행된다.

함수 선언문은 호이스팅으로 인해 먼저 실행되어서, 식별자가 생성되고 함수 객체가 바인딩된다.

따라서 함수 선언문으로 정의한 함수는 선언문 이전에 호출할 수 있다.

함수 호이스팅은 함수를 호출하기 전에 반드시 함수를 선언해야 한다는 규칙을 무시하기 때문에 함수 표현식을 사용할 것을 권장한다.

📌함수 표현식

함수 표현식은 기명 함수 표현식, 익명 함수 표현식이 있다.

👉기명 함수 표현식

기명 함수 표현식은 함수 선언문과 형태가 같다. 하지만 함수 리터럴을 피연산자 자리에 사용하면 함수 리터럴 표현식으로 해석된다.

표현식은 평가되어 값을 생성하여 반환하기 때문에 생성한 함수 객체를 변수에 할당할 수 있다.

🚨변수 이름과 함수 이름이 다른 기명 함수 표현식

함수는 함수 이름이 아닌 함수 객체를 가리키는 식별자로 호출한다. 또한 함수 이름은 정의된 함수 내부에서만 유효하다

따라서 생성된 함수가 할당된 식별자(변수)로 함수를 호출합니다.

👉익명 함수 표현식

익명 함수 표현식은 함수 이름이 생략된 함수 리터럴이다.

익명 함수 표현식은 함수 이름이 없지만 함수 객체가 할당된 변수 이름으로 함수 이름이 결정된다.

👉호이스팅

함수 표현식은 보통 변수에 할당하는 식으로 많이 사용된다.

함수 표현식은 선언문이 아니기 때문에 함수 호이스팅이 발생하지 않는다.

📌Function 생성자 함수

new연산자와 함께 호출하여 함수 객체를 생성한다. 이 부분은 많이 사용하지 않기에 넘어간다.

📌화살표 함수

ES6에 도입된 함수다.

화살표 함수는 기존 함수 정의 방식보다 표현이 간단하며 가독성이 좋다. 내부 동작도 간략화 되어있다.

특히 화살표 함수는 콜백 함수 내부에서this가 전역 객체를 가리키는 문제를 해결하기 위한 대안으로 유용하다.

👉일반 함수와의 차이

🌟화살표 함수는 non-constructor다.

non-constructor이기 때문에 prototype 프로퍼티가 없고 프로토타입 객체도 생성하지 않는다.

🌟중복된 매개변수 이름을 선언할 수 없다.

일반 함수는 중복된 매개변수 이름을 선언할 수 있지만(strict mode에서는 불가능),

화살표 함수는 중복된 이름의 매개변수 선언하면 에러가 발생한다.

🌟화살표 함수는 함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않는다.

화살표 함수 내부에서 this, arguments, super, new.target을 참조하면

스코프 체인을 통해 상위 스코프의 this, arguments, super, new.target를 참조한다.

즉, 화살표 함수는 함수 자체의 this, arguments, super, new.target를 갖지 않는다.

화살표 함수와 화살표 함수가 중첩되어 있는 경우 상위 화살표 함수에도 this가 바인딩이 없기 때문에 더 상위 스코프 체인에서 존재하는 this를 참조한다.

프로퍼티에 할당한 화살표 함수(ES6에서 의미하는 메서드가 아니다)도 마찬가지다.

const counter = {
  num: 1,
  increase: () => ++this.num
};

console.log(counter.increase()); // NaN

화살표 함수는 함수 자체의 this 바인딩을 갖지 않기 때문에 Function.prototype.call, apply, bind메서드를 사용해도 화살표 함수 내부의 this를 교체할 수 없다.

즉, 위 메서드를 사용해도 상위 스코프의 this바인딩을 참조한다.

✔️매개변수와 인수

자바스크립트 함수는 매개 변수와 인수의 갯수가 일치하는지 확인하지 않는다.

📌매개변수

함수가 호출되면 함수 몸체 내에서 암묵적으로 매개변수가 생성되고 undefined로 초기화된 이후 인수가 순서대로 할당된다.

자바스크립트는 동적 타입 언어로 매개변수의 타입을 미리 정할 수 없다.

적절한 인수를 전달받았는지 항상 타입을 확인할 필요가 있다.

매개변수 기본값을 지정할 수도 있다.

👉rest 파라미터

선언한 매개변수 이름앞에 ...을 붙여서 정의한 매개변수를 rest 파라미터라고 한다.

rest 파라미터는 전달받은 인수들을 배열에 저장한다.

인수와 매개변수는 순서대로 매칭되기 때문에 rest 파라미터는 맨 마지막에 선언되어야 한다.

rest 파라미터는 하나만 선언할 수 있다.

rest 파라미터에는 기본값을 지정할 수 없다.

📌인수

전달된 인수들은 arguments프로퍼티 값인 arguments 객체에 보관된다.

✔️반환문

return 반환문은 생략 가능하다.

return 반환문을 생략하거나, 반환값을 명시하지 않으면 undefined를 반환한다.

✔️일급 객체

자바스크립트 함수는 일급 객체다.

일급 객체는 다음과 같은 특징을 가진다.

• 런타임에 생성 가능
• 변수나 자료구조에 저장 가능
• 매개변수에 전달 가능
• 반환값으로 사용 가능

📌함수 객체의 프로퍼티

함수도 객체이기 때문에 프로퍼티를 가진다.

하지만 일급 객체로 일반 객체는 가지지 않는 고유의 프로퍼티를 가지고 있다.

함수 객체의 고유 프로퍼티에 대해서 알아보자.

👉arguments 프로퍼티

arguments 프로퍼티 값은 함수 호출 시 전달된 인수들을 담고있는 arguments 객체다.

arguments 객체는 유사 배열 객체이며 이터러블(iterable)이다.

arguments 프로퍼티는 ES3부터 표준에서 폐지되었다. Function.arguments를 사용하지 말고 함수 내부에서 지역 변수처럼 사용할 수 있는 argument 객체를 사용하면 된다.

👉caller 프로퍼티

caller프로퍼티는 ECMAScript에 포함되지 않은 비표준 프로퍼티다.

caller프로퍼티 값은 나를 호출한 함수다.

👉length 프로퍼티

length프로퍼티의 값은 선언한 매개변수의 갯수다.

👉name 프로퍼티

name프로퍼티 값은 함수 이름이다. name프로퍼티는 ES6부터 표준이 되었으므로 ES5와 동작이 다를 수 있다.

ES5에서 익명 함수 표현식의 경우 name프로퍼티 값은 빈 문자열이다.

ES6에서 익명 함수 표현식의 경우 함수 객체가 바인딩 된 식별자가 name프로퍼티 값이다.

👉prototype 프로퍼티

prototype 프로퍼티는 생성자 함수로 호출할 수 있는 함수 객체(constructor)만 소유하는 프로퍼티다.

prototype 프로퍼티는 함수가 생성자 함수로 호출될 때, 생성될 인스턴스의 프로토타입 객체를 가리킨다.

✔️ES6의 메서드

ES6 이전에 모든 함수는 일반 함수로서 그리고 생성자 함수로서 호출할 수 있다.

따라서, ES6 이전의 모든 함수는 callable이면서 constructor이다.

ES6 이전에는 객체에 바인딩 된 함수를 메서드라고 불렀다. 이 메서드도 callable이며 constructor다.

var obj = {
  x: 1,
  y: 2,
  foo: function () {return this.x}
  bar: () => {return this.y} // ES6 이전에는 화살표 함수가 없다. 하지만 이렇게 화살표 함수도 프로퍼티 키에 바인딩 가능하다.
};

또한 파라미터로 전달되는 콜백 함수 또한 constructor이다.

ES6 이전의 모든 함수는 consturcor이기 때문에 불필요한 프로토타입 객체를 생성한다.

📌메서드

ES6 사양부터 메서드는 메서드 축약 표현으로 정의된 함수만을 의미한다.

ES6 메서드는 constructor가 아니고 따라서 프로토타입 객체도 생성하지 않고 prototype 프로퍼티도 가지지 않는다.

🚨 표준 빌트인 객체가 제공하는 프로토타입 메서드와 정적 메서드는 모두 non-constructor다.

ES6 메서드는 super 키워드를 사용할 수 있다.

ES6 이전 방식의 메서드(익명 함수 표현식을 프로퍼티 값으로 할당하는 방식)은 사용하지 않는 것이 좋다.

ES6 메서드는 자신이 바인딩 되어있는 객체를 가리키는 [[HomeObject]] 내부 슬롯을 가진다.