• Q&A
  • 회원가입
  • 로그인

[Functions] JS - Function Definition - 함수선언방법 + 함수호출방법 ★★★ (= 함수구문 + 함수특징)

53  

JS 함수 선언 방법 3가지

 

1.

function 키워드 사용해 함수 선언 (= 함수 정의)

 

2.

함수선언 방식 (function declaration) : 함수명 사용 방식 (Hoisting 가능)

함수식 방식 (function expression) : 변수 사용 방식 (Hoisting 불가)

Function 생성자 이용 방식 : 객체 선언 이용한 변수 사용 방식인데, 거의 사용 X 

 


 

1.

함수 : 자주 사용하는 코드를 필요할 때 호출해 사용 위해 정의해 둔 코드.

 

2.

선언된 함수는 즉시 실행 안 함. 사용 위해 함수를 호출할 때만 실행 됨.

 

3.

JS에서 ; (세미콜론)은 실행 구문을 분리할 때 사용하는데,
함수는 바로 실행 되는 건 아니므로 ; (세미콜론)으로 안 끝내는 게 일반적.

 

 

 

함수 정의 방법 1 : 함수선언 방식 (Function Declaration)

구문

 

function 함수명(매개변수) {

  // 실행코드

}

 


특징

 

① 함수에 이름을 붙여, 함수명으로 함수 호출.

② 실행문이 아니므로 끝에 ; (세미콜론) 안 붙이는 게 일반적.

③ Hoisting 됨. (즉, 함수 정의 전 호출 코드 사용 가능)
④ 자체호출 불가.

 


예제

 

<p id="demo"></p>


<script>

var x = homzzang(4, 3);

document.getElementById("demo").innerHTML = x;


function homzzang(a, b) {

  return a * b;

}

</script>

 

결과보기

 

함수 정의 방법 2 : 함수식 방식 (Function Expression)

구문

 

var 변수 = function (매개변수) {실행코드};

 


특징

 

① 함수를 변수에 담아, 변수명으로 함수 호출.

② 실행문이므로 끝에 ; (세미콜론) 붙여야 함

③ Hoisting 안 됨. (즉, 함수 정의 전 호출코드 사용 불가)

④ 자체호출가능.

 


예제

 

<p id="demo"></p>


<script>

var x = function (a, b) {return a * b};

document.getElementById("demo").innerHTML = x(4, 3);

</script>

 

결과보기


PS1. 함수명 유무

 

기명 함수표현식

var hz = function hz() {  

    /* 실행코드 */

}; 


익명 함수표현식

var hz = function() {  

    /* 실행코드 */

};

 


PS2. 즉시 실행함수 ※ jQuery 즉시 실행 구문


기명 즉시실행함수

(function hz() {

    /* 실행코드 */

}());


익명 즉시실행함수 ※ JS 전문가 권장 표기법

(function() {

    /* 실행코드 */

}());


익명 즉시실행함수

(function() {

    /* 실행코드 */

})();

 

 

함수 정의 방법 3 : Function 생성자 방식 (거의 사용 X)

 

var 변수 = new Function("a", "b", "return a * b");

 


 

① JS 내장 키워드인 Function() 메서드 이용.

② 첫글자는 대문자, 나머지는 소문자로 적음.

③ 매개변수가 실행코드가 모두 매개변수 임에 주의.
④ 보통, 이 방법 대신 함수식 선언 방식 이용.

 


 

<p id="demo"></p>


<script>

var x = new Function("a", "b", "return a * b");

document.getElementById("demo").innerHTML = x(4, 3);

</script>

 

결과보기

※ JS에서 new 키워드는 대부분 생략 가능.

 

 

JS 함수 특징

  

특징1. Hoisting 기능은 함수명 사용 방식만 가능.

함수명 사용 방식은 hoisting 작동하나, 변수 사용 방식은 hoisting 작동 안함.

[함수명 사용 방식]

 

homzzang(5); // 정상 호출 O


function homzzang(x) {

  return x * x;

}

 


[변수 사용 방식]

 

homzzang(5); // 정상 호출 X

var homzzang = function(x) {return x * x;};

 

 

특징2. 함수 자체호출은 변수 사용 방식만 가능

함수명 사용 방식은 자체호출 불가이나, 변수 사용 방식은 자체호출 사용 가능.

[함수명 사용 방식]

 

<p id="demo"></p>


<script>

function homzzang() {

  document.getElementById("demo").innerHTML = "홈짱닷컴 Homzzang.com";

(); // 정상 출력 X

</script>

 

결과보기


[변수 사용 방식]

 

<p id="demo"></p>


<script>

(function () {

  document.getElementById("demo").innerHTML = "홈짱닷컴 Homzzang.com";

})(); // 정상 출력 O

</script>

 

결과보기

 

특징3. 함수는 변수값으로 사용 가능.

 

<p id="demo"></p>


<script>

function homzzang(a, b) {

  return a * b;

}

var x = homzzang(4, 3);

document.getElementById("demo").innerHTML = x;

</script>


결과보기

※ 변수 사용 방식은 당연하고, 함수명 사용 방식 역시 변수값으로 사용 가능.

 

특징4. 함수는 표현식에 사용 가능

 

<p id="demo"></p>


<script>

function homzzang(a, b) {

  return a * b;

}

var x = homzzang(4, 3) * 2;

document.getElementById("demo").innerHTML = x;

</script>

 

결과보기

 

특징5. 함수는 객체 일종


<p id="demo"></p>


<script>

function homzzang(a, b) {

  return arguments.length; // 매개변수 개수

}

document.getElementById("demo").innerHTML = homzzang(4, 3);

</script>

 

결과보기


 

1.

typeof 연산자는 함수에 대해 function 문자열 반환하나.

함수의 본질을 가장 잘 설명하는 건 객체라는 사실임.

 

2.

JS 함수는 속성 (property)과 메서드(method) 갖는데,

arguments.length 속성은 함수호출될 때 넘겨받은 매개변수 개수 반환.

 

 

특징6. toString() 메서드는 함수코드자체를 출력

 

<p id="demo"></p>


<script>

function homzzang(a, b) {

  return a * b;

}
var x = 
homzzang.toString();

document.getElementById("demo").innerHTML = x;

</script>

 

결과보기 


PS.

 

객체 메서드 (a method to the object)

객체의 속성으로 정의된 함수

 

객체 생성자 (an object constructor)

새 객체를 생성하는 함수

 

 

특징7. 화살표 함수 선언 방식은 (IE11 및 그 이하 버전)은 지원 X

예제1

 

// JS ES5 버전

var x = function(x, y) {

  return x * y;

}


// JS ES6 버전

const x = (x, y) => x * y;

 


예제2

 

<p id="demo"></p>


<script>

const x = (x, y) => x * y;

document.getElementById("demo").innerHTML = x(5, 5);

</script>

 

결과보기


특징

 

1.

함수식 방식 (= 변수 사용 함수정의방식)을 아주 간단하게 표현 가능.

즉, 함수 선언 시, function 및 return 키워드, {} 기호가 불필요함.

 

2.

this 키워드 안 갖음. (∵ 객체 메서드 표현하기 부적합하므로)

 

3.

Hoisting 지원 안됨. (∴ 반드시 함수 호출 전에 함수 정의 필요.)

4.

var 보단 const 키워드 사용해 화살표 함수 선언. 
(∵ 함수식은 항상 상수값을 갖으므로)

 

5.
return {} 기호는 되도록이면 항상 사용하는 게 바람직함.

(∵ 함수가 단일구문일 때만 return 키워드 및 {} 기호 생략 가능.)

아래 예제 참고. 

 

<p id="demo"></p>

<script>

const x = (x, y) => { return x * y };

document.getElementById("demo").innerHTML = x(5, 5);

</script>

 

결과보기

※ 화살표 함수 정의 방식은 IE 11 및 그 이하에선 지원 안 함.

 


이름
비밀번호
자동등록방지

방문자 수

오늘 356
어제 1,588
최대 2,271
전체 864,810
Since 2012