JavaScript - 함수 선언 방식

1. 함수 선언식 (Function Declarations)

: 일반적인 프로그래밍 언어에서의 함수 선언과 비슷

function 함수이름(){
	.....
}

function add(x , y){         // add => 함수 이름 정의
    return x + y;
}

console.log(add(10,20));     //함수 이름으로 호출

 

2. 함수 표현식(Function Expressions ) 

: 자바스크립트 언어의 특징을 활용한 선언 

// 익명 함수 표현식

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

console.log(add(10,20));        // 30   
console.log(sum(10,20));        // 30

// 기명 함수 표현식

let sum1 = function add(x, y) { return x + y; };		
let sum2 = sum1;

console.log(sum1(10, 20));  // 30
console.log(sum2(10, 30));  // 40
console.log(add(10, 40));   // 함수 외부에서 호출 시 => Uncaught ReferenceError: add is not defined

//기명 함수 표현식 : 함수 외부에서는 함수 이름으로 사용할 수 없으나,
//					함수 내부에서 자기 호출할 때(=재귀 호출)는 사용 가능.


let myfactorial = function factorial(n) { 
    if (n <= 1) return 1;
    return n * factorial(n-1);		// 함수 내부에서 재귀 호출
}

console.log(myfactorial(10));  //3628800

 

함수 선언식과 표현식의 차이점

: 함수 선언식은 호이스팅에 영향을 받지만

  한수 표현식은 호이스팅에 영향을 받지 않음

 

**함수 호이스팅

1) 함수 표현식으로 함수를 선언하는 경우 : 함수 선언 이전에는 함수를 호출 할 수 없음

console.log("20 + 30 = ", add(20, 30));		// Uncaught ReferenceError: Cannot access 'add' before initialization


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

2) 함수 선언문으로 함수를 선언하는 경우 : 함수 선언하기 전에 호출할 수 있음

console.log("20 + 30 = ", add(20, 30));     // 20 + 30 = 50
                                  
function add(x, y) { return x + y; }

console.log("30 + 40 = ", add(30, 40));     // 30 + 40 = 70

**+) 변수 호이스팅

1) var <= 변수의 선언이 호이스팅되어 위치와 관계 없이 사용이 가능

console.log(i);     // undefined

var i;              
console.log(i);     // undefined

i = 10;
console.log(i);     // 10

2) let <= 호이스팅이 되지 않아 변수 선언 후 사용해야 함

console.log("j = ", j);		// <==Uncaught ReferenceError: Cannot access 'j' before initialization
							//선언전에 참조하는 경우 오류가 발생
let j;
console.log("j = ", j);     // j = undefined

j = 10;
console.log("j = ", j);     // j = 10

3. Function() 생성자 함수를 이용 

: 새로운 Function 객체를 생성

new Function ([arg1[, arg2[, ...argN]],] functionBody)

let add = new Function('x', 'y', 'return x + y');

console.log(add(10,20));		//30

함수 표현식과 함수 선언문 vs Function 생성자

Function 생성자로 생성한 Function 객체는 함수를 생성할 때 구문 분석을 수행

반면 함수 표현식이나 함수 선언문으로 함수를 정의하고 코드 내에서 호출한 경우 나머지 코드와 함께 구문 분석

=> Function 생성자가 더 비효율적