[JavaScript] 함수

 

 

 

함수

 

 

다른 언어들과 다르게 자바스크립트의 함수는 객체 타입의 값으로, 변수에 저장할 수 있다. 

 

let func = function(a,b){
  return a+b;
}

let temp = func(1,2)

console.log(temp); // 3

 

위와 같이 함수 표현식에서는 함수의 이름을 생략해도 되지만, 함수 선언문에서는 함수의 이름을 생략할 수 없다.

 

function(a,b){
  return a+b;
} // 함수 이름을 지어 줘야 오류가 사라진다.

function add(a,b){
	return a+b;
} // 선언문.

 

 

하지만, 다음 식은 변수에 선언문을 할당하는 것 처럼 보인다.

 

let something = function add(a,b){
  return a+b;
}

 

위에서 정의한 함수를 호출하려면 something(1,2)처럼 식별자를 사용해야 한다.

자바스크립트 엔진은 코드의 문맥에 따라 함수 리터럴을 표현식이나 문으로 해석한다. 

 

좀 더 자세히 알아보자.

 

함수 이름은 함수 내부에서만 사용할 수 있다. 

 

function add(){
  return 2+3;
}

console.log(add());

 

하지만 위의 코드를 살펴보면, 함수 바깥에서도 함수의 이름을 사용해서 함수를 호출하는 걸 확인할 수 있다.

 

function add(){
  return 2+3;
}

// 위의 코드를 작성하마녀 아래와 같이 실행된다.

var add = function add(){
  return 2+3;

 

이름 있는 함수를 생성하면 자바스크립트 엔진은 생성한 함수를 호출하기 위해 함수 이름과 같은 변수(식별자)를 생성하고 함수 객체를 할당한다.

 

함수 선언문은 표현식이 아닌 문이고, 함수 표현식은 표현식인 문이다. 위의 설명을 잘 읽고 이해하자.

 

 

호이스팅

 

 

이처럼 자바스크립트에서 함수를 변수에 할당할 수 있고, 프로퍼티 값이 될 수 있고 배열의 요소로도 활용할 수도 있으며 매개변수와 인자도 될 수 있는 이유는 함수가 일급 객체이기 때문이다.

 

앞에서 살펴본 함수를 정의하는 두 가지 방법에는 생성 시점에서의 차이가 있다.

 

console.log(asdf()); // 오류가 발생한다.

let asdf = function(){
  return 123;
}

console.log(asdfq()); // 오류가 발생하지 않는다.

function asdfq(){
  return 1234;
}

 

앞에서 배웠던 호이스팅 현상이 함수에서도 발생한다. 

함수 선언문으로 정의한 함수는 런타임 이전에 함수 객체가 먼저 생성되기 때문에 함수 선언문 이전에 호출할 수 있다.

 

변수 호이스팅은 변수를 undefined로 초기화하지만, 함수 호이스팅은 함수 객체로 초기화하는 점에 유의하자.

 

명확한 코드를 위해 함수를 정의할 때는 함수 표현식으로 정의하도록 하자.

 

 

이 두 가지 방법 외에도 new 연산자를 사용해서 함수를 정의하는 방법과 화살표를 사용해 람다식으로 함수를 정의하는 방법도 있는데, 이 부분은 다음에 알아보자.

 

 

호출

 

 

자바스크립트에서 함수를 호출할 때 인자로 받는 원소와 매개변수로 주어지는 요소의 값은 같지 않아도 된다.

 

let a = function(a,b,c,d){
  return a+b+c+d;
}

let b = function(a,b){
  return a+b;
}
console.log(a(1,2,3)); //NaN
console.log(b(1,2,3,4,5)); // 3

 

인자가 부족한 경우 할당되지 않은 매개변수는 undefined로 초기화되고, 인자가 많은 경우 초과된 인자는 무시된다.

 

 

 

콜백 함수

 

 

일급 함수의 특징을 이용해 함수를 좀 더 효과적으로 사용할 수 있다.

 

let odd_print = function(i){
  if(i % 2 == 0){
    console.log(i);
  }
}

let printing = function(n, f){
  for(let i = 0; i<n; i++){
    f(i);
  }
}

printing(10,odd_print);

 

여러 가지 이벤트 처리에 사용되는 중요한 패턴이다.