function 1. 함수정의 방식(함수 선언문, 함수 표현식, 호이스팅)

0. 함수는 왜 쓸까?

함수는 필요할 때 여러번 호출이 가능하다. 코드의 재사용, 유지보수의 편의성, 코드의 신뢰성, 코드의 가독성을 높인다.

 

함수정의방식으로는 4가지가 있다.

 

1. 함수선언문

function 함수명 (매개변수_parameter){
  함수내용
}

//예시

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

• 함수선언문은 함수 이름을 생략할 수 없다.
• 함수선언문은 표현식이 아닌 문이다. 표현식이 아닌 문은 변수에 할당할 수 없다.

 

2. 함수표현식

변수 = function(parameter){
	//코드
}

//예시

let add = function(x,y){
	return x+y;
 };
 
 console.log(add(1,3)); //4

자바스크립트에서 함수는 객체 타입의 값이다. 변수에 할당할 수도 있고 프로퍼티 값이 될 수도 있고 배열의 요소가 될 수도 있다. 이처럼 값의 성질을 갖는 객체를 일급객체라 한다. 자바스크립트의 함수는 일급객체다.

 

일급객체(값의 성질을 가짐) => 변수에 할당할 수 있음. => 함수 표현식으로 정의 가능.

 

3. 함수 생성 시점과 함수 호이스팅

//함수 호출
        console.log(add(2,5));
        console.log(sub(2,5));

        //함수선언문
        function add(x, y){
            return x + y;
        }
        //함수표현식
        let sub = function(x,y){
            return x+y;
        }

 

자바스크립트는 위에서 아래로 코드를 읽어 내려간다.

• 함수 선언문은 어디서든 호출 가능하다. 함수 표현식은  코드에 도달한 이후에만 호출이 가능하다.
• 함수 선언문으로 작성된 add 함수는 잘 출력되지만 함수 표현식으로 작성된 sub의 결과는 출력되지 않는다.
• 함수 선언문으로 정의한 함수는 함수 선언문 이전에 호출할 수 있다. 함수 표현식으로 정의한 함수는 함수 표현식 이전에 호출할 수 없다.
• 이는 함수 선언문으로 정의한 함수와 함수 표현식으로 정의한 함수의 생성시점이 다르기 때문이다.

 

※ 함수 호이스팅(function hoisting)

• 함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징.
• 함수 선언문은 코드가 한 줄씩 순차적으로 실행되는 시점인 런타임 이전에 자바스크립트 엔진에 의해 먼저 실행된다.
• 즉, 런타임 이전에 함수 객체가 먼저 생성되므로 함수 선언문 이전에 함수를 참조할 수 있고, 호출도 할 수 있다.
• 함수 호이스팅과 변수 호이스팅은 차이가 존재하는데, 함수 표현식으로 함수를 정의하면 함수 호이스팅이 아닌 변수 호이스팅이 발생한다.

결론: 함수선언문 => 함수 호이스팅 , 함수표현식 => 변수 호이스팅(함수 호이스팅x)

 

---

참고

 

모던 자바스크립트 Deep Dive