[javascript] 함수 (함수 호이스팅, 매개변수, 반환문)

 

 

함수란?

 

일련의 과정을 문으로 구현하고 코드 블록으로 감싼 하나의 실행 단위

 

매개변수 : 함수 내부로 입력을 전달받는 변수

인수 : 입력

반환값: 출력

 

함수 호출: 인수를 매개변수를 통해 함수에 전달하면서 함수의 실행을 지시하는 것

-> 반환값 반환

 

 

 

함수를 사용하는 이유

 

• 코드의 재사용
• 유지보수의 편의성
• 코드의 신뢰성 높임
• 코드의 가독성 향상

 

 

함수는 함수 리터럴로 생성할 수 있다. 

함수 리터럴은 평가되어 값을 생성하며, 이 값은 객체다. 즉, 함수는 객체다.

(함수가 객체라는 사실은 다른 프로그래밍 언어와 구별되는 JS의 특징이다.)

일반 객체와 다른 점은 일반 객체는 호출할 수 없지만 함수는 호출할 수 있다.

 

 

 

 

함수 정의

 

• 함수 선언문
  
  함수 선언문은 표현식이 아닌 문이다. 피연산자로 사용할 수 없다.
  함수 리터럴을 변수에 할당하거나 피연산자로 사용하면 함수 리터럴 표현식으로 해석한다.
  리터럴 표현식으로 생성된 함수는 호출할 수 없다. 함수를 가리키는 식별자가 없기 때문이다.
  함수 선언문으로 생성된 함수는 호출할 수 있다. 자바스크립트 엔진이 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고, 거기에 함수 객체를 할당한다.
  함수는 함수 이름이 아니라 함수 객체를 가리키는 식별자로 호출한다.
  
  

// 함수 선언문
function add(x,y) {
	return x + y;
}
console.log(add(2,5)) // 7

 

• 함수 표현식
  
  자바스크립트의 함수는 값처럼 변수에 할당할 수도 있고 프로퍼티 값이 될 수도 있으며 배열의 요소가 될 수도 있다. 이처럼 값의 성질을 값는 객체를 일급 객체라 한다.
  함수 선언문은 "표현식이 아닌 문"이고, 함수 표현식은 "표현식인 문"이다.
  함수 표현식은 함수 리터럴로 생성한 함수 객체를 변수에 할당하는 방식으로 정의한다.
  
  

// 함수 표현식
var add = function (x,y) {
	return x + y;
}
console.log(add(2,5)) // 7

 

함수 호이스팅

함수 호이스팅은 함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징이다.

함수 선언문은 런타임(코드가 한 줄씩 순차적으로 실행되는 시점)이전에 자바스크립트 엔진에 의해 먼저 실행된다.

따라서 함수 선언문 이전에 함수를 참조, 호출 할 수 있다.

 

반면에 함수 표현식은 함수 리터럴(변수에 할당되는 값)이 런타임에 평가되어 함수 객체가 된다.

따라서 함수 표현식으로 함수를 정의하면 변수 호이스팅이 발생한다.

 

=> 함수 선언문과 함수 표현식으로 정의한 함수는 생성 시점이 서로 다르기 때문에

함수 선언문은 함수 선언문 이전에 호출 할 수 있고, 함수 표현식은 함수 표현식 이전에 호출할 수 없다.

 

• Function 생성자 함수
  
  일반적이지 않으며 바람직하지 않은 방법이다.
  
  
  
• 화살표 함수
  
  function 키워드 대신 화살표를 사용해 간략하게 함수를 선언한다.
  항상 익명 함수로 정의한다.
  
  

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

  
  
  

함수 호출

 

 

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

 

함수를 정의할 때 선언한 매개변수 x, y는 함수 내에서 변수와 동일하게 취급한다. 함수 내부에서만 참조할 수 있다.

매개변수에 인수가 순서대로 할당되며, 이를 통해 반환값을 가져온다.

 

 

매개변수

이 때 자바스크립트 함수는 매개변수와 인수의 개수가 일치하지 않아도 에러는 발생하지 않는다.

자바스크립트는 동적 타입 언어로, 매개변수의 타입을 사전에 지정할 수 없다.

매개변수는 순서에 의미가 있으며, 가급적 적을수록 좋다. 최대 3개 이상 넘지 않는 것을 권장한다.

 

반환문

 

반환문의 역할

1. 반환문은 함수의 실행을 중단하고 함수를 빠져나간다. 반환문 이후의 문은 실행되지 않고 무시된다.

2. return 키워드 뒤에 오는 표현식을 평가에 반환한다.

 

 

 

 

다양한 함수의 형태

 

• 즉시 실행 함수
  함수 정의와 동시에 즉시 호출된다.
  

  (function () {
  	var a = 3;
      var b = 5;
      return a * b;
  }());​

• 재귀 함수
  자기 자신을 호출하는 재귀 호출을 수행하는 함수를 말한다.
  함수 이름, 함수를 가리키는 식별자로 자기 자신을 재귀 호출 할 수 있다.
  

  function factorial(n){
      if(n<=1) return 1;
      return n * factorial(n-1);
  }
  console.log(factorial(4)); // 4! = 4*3*2*1 = 24​

   자기 자신을 무한 재귀 호출 하기 때문에 탈출 조건을 반드시 만들어야 한다.
  
  
• 중첩 함수(내부 함수)
  함수 내부에 정의된 함수. 외부 함수 내에서만 호출할 수 있다.
  

  function outer(){
  	var x = 1;
      function inner(){ // 중첩 함수
      	var y = 2;
          // 외부 함수의 변수를 참조할 수 있다.
          console.log(x+y); // 3
      }
      inner();
  }
  outer();

  
  
  
• 콜백 함수
  함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수
  이러한 콜백 함수를 전달받은 함수를 고차함수라 한다.
• 순수 함수와 비순수 함수
  순수 함수 : 외부 상태에 의존하지 않으며 외부 상태를 변경하지 않는다.
  비순수 함수 : 외부 상태에 의존하거나 외부 상태를 변경한다.

 

 

 

 

---