반응형
자바스크립트의 호이스팅(Hoisting)
var 변수는 '호이스팅'이라는 현상이 일어난다.
호이스팅이란, 함수 안에 있는 선언들을 모두 끌어올려서
해당 함수 유효범위의 최상단에 선언하는 것을 말한다.
ECMA 6부터 새로 도입된 let, const 변수선언문은 호이스팅 현상이 일어나지 않는다.
//Hoisting (호이스팅)
num = 100;
alert(num);
var num;
alert(num + 20);
//-----------------------
var a = 100;
alert(a);
var b = "Hello";
alert(b);
//-----------------------------
var a;
var b;
a = 100;
alert(a);
b = "Hello";
alert(b);함수의 호이스팅
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
/*
반환형 함수명=메소드명(파라미터) {
* 반환형이 없음
* 자바스크립트의 모든 자료형 var , let
* 파라미터에도 데이터 타입이 없음 그냥 변수 명만
}
*/
//함수 선언
function testFunction() {
alert('call....');
}
function testFunction2(data) {
alert('data : ' + data);
alert('data * 2 : ' + data * 2);
}
function testFunction3(data1, data2) {
alert(`data1 : ${data1}, data2 : ${data2}`);
}
//제일 먼저 나옴
var total = sum(12, 45);
alert('총합 : ' + total);
function sum(a, b) {
return a+b;
}
// 익명함수는 함수 호이스팅이 일어나지 않음 함수 호이스팅은 선언적 함수만 가능
// 익명함수 선언
// 같은 이름의 선언적 함수와 익명 함수가 있다면 익명함수가 무조건 우선순위다
// 선언적 함수는 익명 보다 밑에 있어도 호이스팅으로 함수 선언부가 위로 올라감 동명의 익명함수는 그자리에 있어서 호출하면
// 익명함수가 호출
var temp = function func(){
alert('call func()');
}
function aaa() {
alert('선언적 함수 aaa() 호출...');
}
var func01 = function() {
alert('call func01()');
}
function getSum(a,b) {
let s = 0;
while(a<=b) {
s += a++;
}
return s;
}
// 내부적으로 자기 안에서만 동작하는 함수를 정의 가능
// 내부 함수
//콜백이 아님 항상 정해진 sum이라는 함수를 호출한다.
function printSum(a,b) {
//alert('1 ~ 10 사이의 총합 : ' + getSum(a,b));
function sum(a, b) {
let s = 0;
while(a <= b) {
s += a++;
}
return s;
}
alert('1 ~ 10사이의 총합 : ' + sum(a, b));
}
//콜백함수 - 일반적으로 익명함수만 매개변수로 받을수 있음 자바스크립트에서 매우 중요함....
// 매개변수로 함수를 넘길께요!!
// 자신 함수 호출 된 후에 그 안에서 다른 함수 호출되게 한다=콜백 -> 근데 사용자가 넘겨준 이름으로 함수를 호출한다.
function callbackFunc(f) {
f();
//인자로 함수를 받을 수 있다
//매개변수로 함수를 받을 수 있고
//리턴 타입으로 함수를 받을 수 있다
// var temp = function func(){alert('call func()');} 호출됨..?
}
function testCallback(data, f) {
f(data);
}
//hello라는 변수를 사용자가 넘겨주는 함수에 hello 넣음 동적으로 호출하게 해줌
//////////////////////////////함수 호출부//////////////////////////////////////
testCallback("hello", alert);
function createTag(f) {
f();
}
createTag(function() {
<h1>
})
createTag(function() {
<form>
<input>
})
//라이브러리로 제공하는 함수가 콜백함수 내용부가 달라야 하니까
//입력함수를 호출하면서 재정의 가능 하다 기능 추가하거나 호출하고자 하는 경우
callbackFunc(function() {
alert('익명함수 호출.....');
});
callbackFunc(aaa);
callbackFunc(temp);
callbackFunc(testFunction);
// var total = getSum(1,10);
// alert('1 ~ 10 사이의 총합 : ' + total);
printSum(1,10);
aaa();
func01();
// tmep();
function aaa() {
alert('call aaa()');
}
function aaa(data) {
alert('call aaa(data)');
}
function aaa(a, b) {
alert('call aaa(a, b)');
}
//자바스크립트에서 동일한 함수명을 가진 함수를 선언하면 함수의 내용부가 재정의 재정의 된것임
//맨 마지막에 정의 된 것이 불러짐 매개 변수는 의미 없고 함수의 이름이 중요 그래서 오버로딩이 존재할 수 없음
//맨 마지막에 선언된 함수가 호출됨 함수의 선언부도 호이스팅이 일어남 -> 선언부를 먼저 올려서 실행하고 아래에서 호출부가 구현
//이러한 방식을 선언적 함수 방식이라고 함
aaa();
//함수가 객체 없이 혼자 쓰이기 가능 객체 기반이긴 하나 window class안에 들어 있다고 함
testFunction();
testFunction2(100);
testFunction2("Hello");
testFunction3('A', 12.34);
//자바스크립트에서 오버로딩을 지원 하지는 않는다.
//함수 구분 할 때 함수의 이름으로만 구분
</script>
</head>
<body>
</body>
</html>반응형
'폴리텍 광명융합기술원 > WEB' 카테고리의 다른 글
| [JS] 자바스크립트의 세분화 & DOM level 0 : 고전적 이벤트 모델/인라인 이벤트 모델 (0) | 2020.06.23 |
|---|---|
| [JS] DOM level2 - 표준 이벤트 모델 (0) | 2020.06.22 |
| [JS] JavaScript 논리 연산자 (0) | 2020.06.16 |
| [JS] JavaScript ` backtik ${} 사용 해보기 (0) | 2020.06.16 |
| [JS] JavaScript 내장객체 Date / if / switch (0) | 2020.06.16 |