CODEDRAGON ㆍDevelopment/JavaScript, jQuery, ...
함수 호이스팅(Function hoisting)
선언적 함수 형태로 함수를 정의할 경우 함수의 유효범위는 코드의 맨처음부터 적용됩니다. 이것을 함수 호이스팅이라고 합니다.
함수 호이스팅이 발생하면 함수 사용전에 반드시 선언해야 한다는 규칙을 무시하게 되므로 코드의 구성과 구조를 엉성하게 만들 수 있습니다.
그래서, 함수 표현식을 사용한 익명함수를 사용할 것을 권장합니다.
함수 호이스팅 발생 원인은
자바스크립트의 변수 생성작업과 초기화 작업이 서로 분리되어서 진행되기 때문입니다.
uncaught type error
함수 표현식을 사용할 경우 함수 호이스팅이 일어나지 않아 함수 생성전에 호출시 uncaught type error가 발생합니다.
소스 코드
document.write(add1(1,2) +'<br>');
//함수 선언문 형태로 add1() 함수 정의
function add1(x, y) {
return x + y;
}
document.write(add1(3, 4) +'<br><br>');
// uncaught type error
document.write(add2(10,20) +'<br>');
// 함수 표현식 형태로 add2() 함수 정의
var add2 = function (x, y) {
return x + y;
};
출처: <https://github.com/10zeroone/study_javascript/blob/master/WebContent/ch04-function/18.html>
전체 소스
<html>
<head>
<meta charset="UTF-8">
<title>함수 호이스팅</title>
<script type="text/javascript">
document.write(add1(1,2) +'<br>');
//함수 선언문 형태로 add1() 함수 정의
function add1(x, y) {
return x + y;
}
document.write(add1(3, 4) +'<br><br>');
// uncaught type error
//document.write(add2(10,20) +'<br>');
// 함수 표현식 형태로 add2() 함수 정의
var add2 = function (x, y) {
return x + y;
};
document.write( add2(30, 40)+'<br>');
</script>
</head>
<body>
</body>
</html>
출처: <https://github.com/10zeroone/study_javascript/blob/master/WebContent/ch04-function/18.html>
'Development > JavaScript, jQuery, ...' 카테고리의 다른 글
| 값으로 할당 (0) | 2014.07.23 |
|---|---|
| 함수도 객체 (0) | 2014.07.18 |
| 기본 타입과 표준 메소드 (0) | 2014.06.29 |
| html-parseInt()/parseFloat() (0) | 2014.06.29 |
| isFinite함수/isNaN함수 (0) | 2014.06.25 |