TIL 21.10.07 Javascript

함수

함수

입력을 주면 아웃풋을 주는 녀석이다.

함수는 사용자가 필요할 때 반복적으로 호출할 수 있어 코드의 재사용성, 유지보수의 편의성, 코드의 신뢰성 측면에서 유용하다. 함수 이름은 코드의 내부를 이해하지 않아도 파악할 수 있게 짓는다.

함수 정의시 함수 리터럴로 표현한다. 리터럴은 값을 생성하기 위한 표기 방법이고 그러한 방법 중 함수 리터럴이 있어 함수 리터럴로 표현한다고 말한다. 함수는 객체인데 그 것은 나중에 다루기로 하고 일단 함수를 알아가는 시간을 갖도록 하자.

let 변수 = function 함수이름() { 
  console.log('나는함수');
}

변수(); //함수 호출 => 나는 함수

함수 정의

함수 선언문

함수 선언문은 표현식이 아니다. 표현식의 경우 어느 특정한 값이 계산되는 특징이 있다. 다른 말로는 
변수에 할당할 수 있다. 값으로 환원되기 때문이다.

함수 선언문은 또한 함수 이름을 생략할 수 없다. 자바스크립트의 경우 함수를 선언하면 암묵적으로 함수
이름과 같은 변수가 생성되고 함수 리터럴을 할당하는 식으로 객체 생성이 이루어진다(그렇지만 선언문과 
표현식의 동작이 완전히 일치하는 것은 아니다.

일령 함수 선언문의 경우 함수이름과 동일한 변수에 함수 리터럴이 할당되어 변수를 통해 함수를 호출할 수
있다. 그렇지만 표현식의 경우 함수 이름으로 호출할 수 없고 지정한 변수 이름을 통해 호출이 가능하다.

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

함수 표현식

자바스크립트 함수는 일급객체이다. 여기서는 편의상 함수를 값처럼 사용할 수 있다는 의미이다.
표현식이므로 어느 특정 값으로 환원된다. 정리하면 함수 리터럴로 생선한 함수 객체를 변수에 할
당하여 함수를 정의하는 방식을 함수 표현식이라고 한다.

함수표현식은 함수이름을 생략할 수 있다. 왜냐하면 새로운 변수에 해당 함수 리터럴을 할당하기 때문이다.
앞선 선언문이 암묵적으로 변수를 만들어 함수 리터럴을 할당해주었다면 함수 표현식은 사용자가 만들어서 
할당하기 때문에 이름을 적지 않아도 된다.

따라서 함수 표현식에 함수 이름을 작명하여 해당 이름으로 함수를 호출 할 경우 함수가 호출되지 않는다.

함수 이름은 함수 몸체 내에서만 참조할 수 있고 외부에서는 참조할 수 없다. 이는 선언문과 표현식 모두에 
해당되는 특징이다.

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

console.log(f1(1,2)) //3
console.log(add(1,2)); //ReferenceError: add is not defined

그런데 형태만 놓고 보면 선언문과 표현식에서 함수의 형태는 동일하다. 암묵적 변수의 할당이 있냐 명시
적 변수의 할당이 있냐의 차이이다.

이에 이름이 있는 함수의 경우 문맥에 따라 컴퓨터에 의해 선언문으로 해석되거나 표현식으로 해석된다.

function foo() {console.log('foo')}; 
foo(); // foo

(function bar() {console.log('bar')};);
bar(); // 문맥에 의해 표현식으로 해석된 경우 -> ReferencError: bar is not defined

//정리
선언문과 표현식의 경우 객체가 생성되는 방식이 비슷하지만 동일하지 않다. 둘다 기명함수를 사용
하더라도 선언문은 함수이름이 변수이름이 되어 해당 변수에 객체(함수 리터럴)이 할당되지만 표현
식의 경우 사용자가 지정한 변수이름에 객체가 할당되어 함수 이름으로 호출이 가능하지 않다. 왜
냐하면 함수 이름은 함수 몸체에서만 참조할 수 있고 외부에선 참조할 수 없는 특징이 있기 때문
이다. 이는 선언문과 표현식 모두 동일하게 적용된다.

Function 생성자 함수

빌트인 함수인 Function 생성자 함수에 매개변수 목록과 함수 몸체를 문자열로 전달하면서 new 연산자와
함께 호출시 함수 객체를 생성해서 반환한다. 
함수 선언문이나 표현식으로 생성한 함수와 다르게 작동한다. 이는 일반적이지 않고 권장되지 않는다.

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

화살표 함수

function 키워드 대신 화살표 =>를 사용해 좀 더 간략한 방법으로 함수를 선언할 수 있다.
하지만 기존 함수 선언문과 함수 표현식을 완저히 대체하기 위해 고안된 것은 아니다. 
표현 뿐만 아니라 내부 동작 또한 간략화 되어 있다.

1. 기존함수와 this 바인딩 

함수 생성 시점과 함수 호이스팅

함수 호이스팅에 들어가기에 앞서 변수 호이스팅 개념을 이해해야 한다. 자바스크립트는 그 언어의 특성으로 '런타임' 이전 '소스코드의 평가 과정' 이라는 단계가 존재한다. 이 단계에선 자바스크립트 엔진이 var, let, const, function, function*, class 키워드를 사용해서 선언하는 모든 식별자(선언문)은 런타임 이전에 먼저 실행하고 런타임 때 해당 부분을 제외한 소스코드를 한줄 씩 순차적으로 실행시킨다.

함수 선언문의 호이스팅
이제 다시 함수 선언문과 함수 표현식의 생성시점을 살펴보기로 하자. 함수 선언문의 경우 런타임 이전 '소스코드의 평가 과정'에서 객체가 함수이름과 동일한 변수에 할당된다. 따라서 함수 선언문 이전에 해당 함수를 참조하고 호출할 수 있다. 함수 선언문의 코드가 선두로 끌려 올려진 것처럼 동작하는 js고유의 특징을 호이스팅 이라고한다.

함수 표현식의 호이스팅
표현식의 경우 변수에 객체를 할당하는 것이다. 객체의 할당은 런타임 시간에 이루어진다. 함수 선언문은 호이스팅 되지만 표현식의 경우 변수 호이스팅만 발생한다.

호이스팅 정리
자바스크립트의 이러한 특징으로 인해 전문가들은 함수의선언문 보다 함수의 표현식을 사용할 것을 권장한다.

함수관련 용어

매개변수(parameter)
함수 내부로 입력을 전달받는 변수를 의미한다.

인수(argument)
입력하는 수를 의미한다.