JavaScript Function (자바스크립트 함수)

JavaScript Function

 

함수 정의하기

• 자바스크립트 함수는 3가지 방법으로 생성할 수 있다.
  • 함수 선언문
  • 함수 표현식
  • Function() 생성자 함수

 

1. 함수 선언문 방식

 

• 함수 선언문 방식은 객체 리터렁 방식과 같다. 자바스크립트에서는 함수도 일반 객체처럼 취급하기 때문이다.

 

• 함수 선언문 방식으로 정의할 경우 반드시 함수명이 정의 되어야 한다.

 

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

 

2. 함수 표현식 방식

 

• 자바스크립트에서는 함수도 하나의 값처럼 취급된다.

 

• 함수를 만들고 변수에 할당하여 생성하는 것을 함수 표현식이라 한다.

 //sum 이라는 변수에 두 값을 더해주는 익명 함수 참조 값을 저장한다.
  var sum = function(x, y) {
    return x+y;
  }
  var add = sum;
  console.log(add(3,3));  //6
  console.log(sum(3,4));  //7

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

  console.log(sum(3,3));  //6
  console.log(add(3,3));  //add is not defined 에러 발생

   > 함수 표현식에서 사용된 함수 이름은 외부 코드에서 접근이 불가능하다. 대신 재귀 호출과 같은 내부에서 호출은 가능하다.

 

 

3. Funtion() 생성자 함수를 통한 호출

 

• 일반적으로 자주 사용되지는 않는다.

 

var add = new Function('x', 'y', 'return x+y'); 
console.log(add(3,3)); //6

 

 

함수 호이스팅

• 더글라스 크락포드의 자바스크립트 핵심가이드 에서는 함수 호이스팅 때문에 함수 표현식만 사용 할 것을 권장한다.

 

함수 선언문 방식 - 함수 호이스팅 때문에 함수가 정의되기 전부터 사용이 가능하다.

 add(3,3); //6

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

 add(3,4); //7

 

함수 표현식 방식 - 함수 표현식의 경우 함수 호이스팅이 일어나지 않는다.

 add(3,3); //Error

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

 add(3,4); //7