소년코딩의 자바스크립트 강좌 11. 함수(function)

---

자바스크립트에서는 함수도 객체다.

모든 함수는 Function 타입의 인스턴스이며 다른 참조타입과 마찬가지로 프로퍼티와 메서드가 있다.

함수 이름은 단순히 함수 객체를 가리키는 포인터일 뿐이다.

---

1. Function

자바스크립트에서 함수를 생성하는 방법은 다음과 같은 3가지가 있다.

• 함수 선언문(function statement)
• 함수 표현식(function expression)
• Function() 생성자 함수(잘 사용하지 않으므로 pass 하겠다.)

 

- 함수 리터럴

객체 리터럴, 배열 리터럴 방식이 있듯 함수 리터럴을 이용해 함수를 생성할 수 있다.

함수 선언문이나 함수 표현식 방법 모두 이런 함수 리터럴 방식으로 생성한다.

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

1) 함수 선언문(function statement)

함수 선언문 방식은 함수 리터럴 형태와 같다.

주의할 점은 선언문 방식으로 정의된 함수는 반드시 "함수명"이 정의되어 있어야 한다는 것이다.

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

 

2) 함수 표현식(function expression)

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

그러므로 함수도 숫자나 문자열처럼 변수에 저장하는 것이 가능하다.

함수 리터럴로 하나의 함수를 만들고, 여기에 생성된 함수를 변수에 저장하는것을 함수 표현식이라고 한다.

// add() 함수 표현식
var add = function (x, y) {        // 익명 함수
    return x + y;
};
 
var plus = add;
 
console.log(add(3, 4));  // 7
console.log(plus(5, 6)); // 11 

 

함수 표현식에서는 함수 이름이 선택사항이며, 이름이 없으면 익명 함수라 하고, 이것을 익명 함수를 이용한 익명 함수 표현식이라고 한다.

반대로 함수 이름이 포함된 함수 표현식을 기명 함수 표현식이라고 한다.

// 기명 함수 표현식의 함수 호출 방법
var add = function sum(x, y) {
    return x + y;
}
 
console.log(add(3, 4));      // 7
console.log(sum(3, 4));      // Error!! -> sum is not defined

sum() 함수 호출을 하면 에러가 발생된다 -> 함수 표현식에서 사용된 함수 이름은 외부 코드에서 접근이 불가능하기 때문이다.

 

함수 표현식에서 사용된 이름은 정의된 함수 내부에서 해당 함수를 재귀적으로 호출할때 사용된다.

// 기명 함수 표현식을 이용한 재귀적인 호출
// 팩토리얼 함수
var fact = function factorial(n) {    
    if(n <= 1) {        
        return 1;    
    } else {        
        return n * factorial(n-1);    
    }
};
 
console.log(fact(4));       // 24

---

2. 함수 호이스팅

함수 선언이 소스코드에서 해당 함수를 실행하는 부분보다 뒤에 있다 하더라도 함수 선언을 '끌어올리는 것(hoist)' 이다.

이것이 가능한 이유는 자바스크립트 변수 생성과 초기화의 작업이 분리되어 진행되기 때문인데 자세한 내용은 다음에 알아보겠다.

 

1) 함수 선언문에서의 함수 호이스팅

console.log(sum(10, 10));        // 20 
 
// 함수 선언문 방식
function sum(num1, num2) {
    return sum1 + sum2;
}

sum() 함수가 정의되지 않은 시점에서도 정의되기 이전의 sum() 함수를 호출하는 것이 가능하다. 함수가 자신이 위치한 코드에 상관없이 함수 선언문 형태로 정의한 함수의 유효범위는 코드의 맨 처음부터 시작한다.

이것을 함수 호이스팅이라고 한다.

 

2) 함수 표현식에서의 함수 호이스팅

console.log(sum(10, 10));        // uncaught type error! 
 
// 함수 표현식 방식
var sum = function (num1, num2) {
    return num1 + num2;
}
console.log(sum(10, 10));        // 20

함수 표현식 형태로 정의되어 있으면 호이스팅이 일어나지 않는다. 따라서 sum() 함수가 정의된 이후에 호출이 가능하다.

---

 

by 소년코딩

추천은 글쓴이에게 큰 도움이 됩니다.

악플보다 무서운 무플, 댓글은 블로그 운영에 큰 힘이됩니다.