자바스킙트의 실행 순서 때문에 발생하는 문제를 하나 살펴보겠다.
실행결과를 예측해보자.

<script>
for (var i = 0; i < 3; i++) {
setTimeout(function () {
alert(i);
}, 0);
}
</script>

대부분 0, 1, 2를 출력한다고 생각했을 것이다.
그런데 코드를 실행하면 3, 3, 3을 출력한다.

이는 setTimeout() 함수를 호출하는 시점이 반복문이 모두 끝난 이후이므로 발생하는 문제다.
따라서 0, 1, 2를 출력하려면 변수를 따로 복사해두어야 한다.

이 문제를 자기 호출 함수와 클로저를 활용하여 해결해보자.

<script>
for (var i = 0; i < 3; i++) {
(function (closed_i) {
setTimeout(function () {
alert(closed_i);
}, 0);
})(i);
}
</script>

이렇게 하면 반복문을 도는 동안 클로저가 생성되어 변수 closed_i에 값을 저장할 수 있다.

또는 나중에 배우겠지만,
배열의 forEach() 메서드를 활용해도 된다.

<script>
[0, 1, 2].forEach(function (i) {
setTimeout(function () {
alert(i);
}, 0);
});
</script>






참고 서적 : 모던 웹을 위한 JavaScript + jQuery 입문(개정판)

윤인성 지음. 한빛미디어

'웹개발 > javascript' 카테고리의 다른 글

자바스크립트 내장 함수  (0) 2019.02.03
자바스크립트 클로저 closure  (0) 2019.02.02
자바스크립트 내부 함수  (0) 2019.02.02
자바스크립트 리턴값 (return 키워드)  (0) 2019.02.02
자바스크립트 가변 인자 함수  (0) 2019.02.02
자바스크립트는 자체적으로 몇 가지 함수를 제공한다.
이렇게 기본적으로 내장된 함수를 내장 함수라고 부른다.

지금까지 사용해봤던 alert() 함수와 prompt() 함수가 내장함수다.

alert, prompt 이외의 다양한 내장 함수를 살펴보자.

1. 타이머 함수
타이머 함수는 특정한 시간에 특정한 함수를 실행할 수 있게 해주는 함수다.
4가지 종류가 있다.

setTimeout(function, millisecond)
setInterval(function, millisecond)
clearTimeout(id)
clearInterval(id)

setTimeout() 함수는 특정한 시간 후에 함수를 한 번 실행하고,
setInterval() 함수는 특정한 시간마다 함수를 실행한다.

먼저, setTimeout() 함수의 예제를 살펴보자.

<script>
//3초 후에 함수를 실행한다.
setTimeout(function() {
alert('3초가 지났습니다.');
}, 3000);
</script>

위에 코드를 실행하면,
3초 후에 경고창을 출력된다.

그 다음으로, setInterval() 함수를 살펴보자.

<script>
//3초마다 함수를 실행한다.
setInterval(function () {
alert('3초마다 출력합니다.');
}, 3000);
</script>

위에 코드를 실행하면,
3초마다 setInterval() 함수가 실행되면서, 경고창을 출력한다.

setInterval() 함수는 특정 시간마다 지속적으로 실행되기 때문에,
타이머를 멈출 필요가 있다.

타이머를 멈추려면, clearTimeout() 함수와 clearInterval() 함수를 사용한다.

setTimeout() 함수와 setInterval() 함수를 사용하면 타이머 아이디를 리턴하는데,
이 타이머 아이디를 clearTimeout() 함수와 clearInterval() 함수의 매개변수에 넣어주면
타이머를 정지할 수 있다.

clearInterval() 함수를 적용해봄으로써, 사용법을 공부해보자.
10초 동안 경고창을 계속 출력하도록 수정해보자.
<script>
//1초마다 함수를 실행한다.
var intervalID = setInterval(function () {
alert('1초마다 출력합니다.');
}, 1000);

//10초 후 함수를 실행한다.
setTimeout(function () {
//타이머를 종료한다.
clearInterval(intervalID);
}, 10000);
</script>






참고 서적 : 모던 웹을 위한 JavaScript + jQuery 입문(개정판)

윤인성 지음. 한빛미디어

'웹개발 > javascript' 카테고리의 다른 글

자바스크립트의 실행 순서와 관련된 문제  (0) 2019.02.07
자바스크립트 클로저 closure  (0) 2019.02.02
자바스크립트 내부 함수  (0) 2019.02.02
자바스크립트 리턴값 (return 키워드)  (0) 2019.02.02
자바스크립트 가변 인자 함수  (0) 2019.02.02
다음 예제를 살펴보자.

<script>
function test(name) {
var output = 'Hello ' + name + ' ... !';
}

alert(output);
</script>

코드를 실행하면,
Uncaught ReferenceError: output is not defined
웹페이지에 오류가 발생하여 경고창을 출력하지 않는다.

함수 안에 있는 변수는 지역 변수이므로 함수 외부에서 사용할 수 없다.
지역 변수는 함수가 실행될 때 생성되고 함수가 종료될 때 사라진다.

하지만, 클로저를 사용하면 이 규칙을 위반할 수 있다.

다음 코드를 살펴보자.

<script>
function test(name) {
var output = 'Hello ' + name + ' .. !';
return function () {
alert(output);
};
}

test('JavaScript')();
</script>

위에 코드를 실행해보면,
변수 output은 지역 변수이므로 함수가 종료될 때 사라져야 하지만
변수 output의 내용을 경고창으로 출력한다.

클로저의 정의는 워낙 다양한데

지역 변수를 남겨두는 현상을 클로저라고 부르기도 하고,
함수 test () 내부의 변수들이 살아있는 것이므로 test() 함수로 생성된 공간을 클로저라고 부르기도 한다.
또한, 리턴된 함수 자체를 클로저라고 부르기도 하며, 살아남은 지역 변수 output을 클로저라고 부르기도 한다.

위에 코드에서
지역 변수 output을 남겨둔다고 외부에서 마음대로 사용할 수 있는 것은 아니다.
반드시 리턴된 클로저 함수를 사용해야 지역 변수 output을 사용할 수 있다.
클로저 함수로 인해 남은 지역 변수는 각각의 클로저 함수의 고유한 변수이다.


다음 코드도 살펴보자.

<script>
function test(name) {
var output = 'Hello ' + name + ' .. !';
return function () {
alert(output);
};
}
var test_1 = test('Web');
var test_2 = test('JavaScript');

test_1();
test_2();
</script>

함수 test_1()과 test_2()를 호출하면,
각 함수가 고유한 지역 변수 output이 있다는 것을 알 수 있다.

클로저 함수를 처음 접하면 어디에 사용하는지 감이 잘 잡히지 않는다.
클로저와 관련된 것은 직접 여러 가지 프로그램을 접하면서 이해하고 느껴야 한다.

나중에 캡슐화 부분에서 다시 한번 클로저와 관련된 공부를 해보자.






참고 서적 : 모던 웹을 위한 JavaScript + jQuery 입문(개정판)

윤인성 지음. 한빛미디어

'웹개발 > javascript' 카테고리의 다른 글

자바스크립트의 실행 순서와 관련된 문제  (0) 2019.02.07
자바스크립트 내장 함수  (0) 2019.02.03
자바스크립트 내부 함수  (0) 2019.02.02
자바스크립트 리턴값 (return 키워드)  (0) 2019.02.02
자바스크립트 가변 인자 함수  (0) 2019.02.02
프로그램 개발은 혼자 하는 일이 아니다.
프로그램의 규모가 커지면 커질수록 다른 사람과 함께 프로그램을 개발하며 여러 가지 충돌이 발생한다.

내부 함수는 이러한 충돌을 막기 위한 방법이다.
내부 함수는 다음과 같이 함수 내부에 선언하는 함수를 의미한다.

<script>
function 외부 함수() {
function 내부 함수1() {
//함수 코드
}

function 내부 함수2() {
//함수 코드
}

//함수 코드
}
</script>






참고 서적 : 모던 웹을 위한 JavaScript + jQuery 입문(개정판)

윤인성 지음. 한빛미디어

'웹개발 > javascript' 카테고리의 다른 글

자바스크립트 내장 함수  (0) 2019.02.03
자바스크립트 클로저 closure  (0) 2019.02.02
자바스크립트 리턴값 (return 키워드)  (0) 2019.02.02
자바스크립트 가변 인자 함수  (0) 2019.02.02
자바스크립트 매개변수  (0) 2019.02.01
자바스크립트에서 return 키워드로 함수를 호출한 곳으로 값을 넘길 수 있다.
원래 return 키워드는 함수가 실행되는 도중에 함수를 호출한 곳으로 돌아가라는 의미이다.
따라서 return 키워드를 사용하면 값을 지정하지 않아도 함수를 호출한 곳으로 돌아간다.

다음 예제를 보자.

<script>
//함수 생성
function returnFunction() {
alert('문장 A');
return;
alert('문장 B');
}

//함수 호출
returnFunction();
</script>

출력 결과는 어떻게 나올까?

return 키워드를 '문장 B' 이전에 사용했기 때문에
해당 위치에서 함수가 종료된다.
따라서 '문장 A'만 출력된다.

그렇다면, 아무 값도 리턴하지 않으면 어떠한 결과가 출력될까?

다음 예제를 살펴보자.

<script>
//함수 생성
function returnFunction() {
alert('문장 A');
return;
alert('문장 B');
}
//함수 호출
var output = returnFunction();
alert(typeof (output) + ' : ' + output);
</script>

위에 코드를 실행하면, '문장 A' 경고창이 한번 출력된다.
그리고 변수 output의 자료형과 값을 출력하는데
함수에서 아무 값도 리턴하지 않았기 때문에
자료형, 값이 모두 undefined로 출력된다.






참고 서적 : 모던 웹을 위한 JavaScript + jQuery 입문(개정판)

윤인성 지음. 한빛미디어

'웹개발 > javascript' 카테고리의 다른 글

자바스크립트 클로저 closure  (0) 2019.02.02
자바스크립트 내부 함수  (0) 2019.02.02
자바스크립트 가변 인자 함수  (0) 2019.02.02
자바스크립트 매개변수  (0) 2019.02.01
자바스크립트 선언적 함수  (0) 2019.02.01
자바스크립트 가변 인자 함수는
매개변수를 선언된 형태와 다르게 사용했을 때, 매개변수를 모두 활용하는 함수를 말한다.

매개변수로 입력된 숫자를 모두 더하는 sumAll( ) 함수를 작성하면서,
가변 인자를 공부해보자.

<script>
//함수 생성
function sumAll() {
alert(typeof (arguments) + ' : ' + arguments.length);
}

//함수 호출
sumAll(1, 2, 3, 4, 5, 6, 7, 8, 9);
</script>

위에 코드를 보면, 함수 내부에 arguments 변수를 사용하고 있다.
자바스크립트의 모든 함수는 내부에 변수 arguments가 기본적으로 있다.
변수 arguments는 매개변수의 배열이다.

코드를 실행하면, 배열은 객체이므로 object 자료형을 출력할 것이고
함수를 호출할 때, 아홉 개의 매개변수를 입력했으므로 arguments.length의 값은 9로 나올 것이다.

이제 아홉 개의 매개변수를 모두 더해서 리턴하는 함수를 만들어보자.

<script>
//함수 생성
function sumAll() {
var output = 0;
for (var i = 0; i < arguments.length; i++) {
output += arguments[i];
}
return output;
}

//함수 호출 및 출력
alert(sumAll(1, 2, 3, 4, 5, 6, 7, 8, 9));
</script>

결과는 '45'가 나올 것이다.
끝.






참고 서적 : 모던 웹을 위한 JavaScript + jQuery 입문(개정판)

윤인성 지음. 한빛미디어

'웹개발 > javascript' 카테고리의 다른 글

자바스크립트 내부 함수  (0) 2019.02.02
자바스크립트 리턴값 (return 키워드)  (0) 2019.02.02
자바스크립트 매개변수  (0) 2019.02.01
자바스크립트 선언적 함수  (0) 2019.02.01
자바스크립트 익명 함수  (0) 2019.02.01

+ Recent posts

티스토리툴바