티스토리 뷰
유효범위(scope)
변수의 수명을 나타낸다.
var vscope = 'global';
function fscope(){
alert(vscope);
}
fscope(); // global 전역변수 이므로 함수 밖에서 선언한 vscope에 접근할 수 있다.함수 밖에서 변수를 선언하면 전역변수가 된다.
전역변수는 애플리케이션 전역에서 접근이 가능하다.
어떤 함수 안에서도 전역변수에 접근할 수 있다.
같은 이름의 지역변수와 전역변수가 동시에 정의되어 있으면 지역변수가 우선된다.
var vscope = 'global';
function fscope(){
var vscope = 'local';
alert('함수안'+vscope);
}
fscope(); // 함수안 local
alert('함수밖'+vscope); // 함수밖 globalvar를 사용하지 않은 지역변수는 전역변수가 된다.
var vscope = 'global';
function fscope(){
vscope = 'local';
alert('함수안'+vscope);
}
fscope(); // 함수안 local
alert('함수밖'+vscope); // 함수밖 local
전역변수의 사용
전역변수를 사용해야 하는 경우에는 하나의 객체를 전역변수로 만들고 객체의 속성으로 변수를 관리한다.
MYAPP = {}
MYAPP.calculator = {
'left' : null,
'right' : null
}
MYAPP.coordinate = {
'left' : null,
'right' : null
}
MYAPP.calculator.left = 10;
MYAPP.calculator.right = 20;
function sum(){
return MYAPP.calculator.left + MYAPP.calculator.right;
}
document.write(sum()); // 30전역변수를 사용하고 싶지 않다면 익명함수를 호출하면 된다.
(function(){
var MYAPP = {}
MYAPP.calculator = {
'left' : null,
'right' : null
}
MYAPP.coordinate = {
'left' : null,
'right' : null
}
MYAPP.calculator.left = 10;
MYAPP.calculator.right = 20;
function sum(){
return MYAPP.calculator.left + MYAPP.calculator.right;
}
document.write(sum());
}()) 함수 유효 범위
for(var i = 0; i < 1; i++){
var name = 'aa';
}
alert(name); // aa아래는 에러가 발생한다. name은 지역변수로 for문 안에서 선언되었는데 이를 for문 밖에서 호출하기 때문이다.
for(int i = 0; i < 10; i++){
String name = "aa";
}
System.out.println(name);★ 자바스크립트의 지역변수는 함수에서만 유효하다.
정적 유효범위
자바스크립트는 함수가 선언된 시점에서의 유효범위를 갖는다.
이를 정적 유효범위(static scoping) 혹은 렉시컬(lexical scoping)이라고 한다.
var i = 5;
function a(){
var i = 10;
b();
}
function b(){
document.write(i);
}
a(); // 5값으로서의 함수
javascript의 함수는 값이 될 수 있다.
function a(){}함수 a는 변수 a에 담겨진 값이다.
함수는 객체의 값으로 포함될 수 있다. 이렇게 객체의 속성 값으로 담겨진 함수를 메소드(method)라고 부른다.
a = {
b: function(){
}
};함수는 값이기 때문에 다른 함수의 인자로 전달될 수도 있다.
function cal(func, num){
return func(num)
}
function increase(num){
return num+1
}
function decrease(num){
return num-1
}
alert(cal(increase, 1)); // 2
alert(cal(increase, 1)); // 0함수는 함수의 리턴값으로도 사용할 수 있다.
var process = [
function(input) { return input + 10;},
function(input) { return input * input;},
function(input) { return input + input / 2;}
];
var input = 1;
for(var i = 0, i < process.length; i++){
input = process[i](input);
}
alert(input);콜백
처리 위임
값으로 사용될 수 있는 특성을 이용하면 함수의 인자로 함수에 전달할 수 있다.
function sortNumber(a,b){
return b-a; // a와 b의 순서를 바꾸면 정렬순서가 반대가 된다.
}
var numbers = [20, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1];
alert(numbers.sort(sortNumber)); // array, [20, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1]비동기 처리
시간이 오래걸리는 작업이 있을 때 작업이 완료된 후에 처리할 일을 콜백으로 지정하면
해당 작업이 끝났을 때 미리 등록한 작업을 실행하도록 할 수 있다.
datasource.json.js
{"title":"JavaScript", "name":"aa"}demo1.html
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<script type="text/javascript">
$.get('./datasource.json.js', function(result){
console.log(result);
}, 'json');
</script>
</body>
</html>
클로저(closure)
클로저는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가르킨다.
내부함수
자바스크립트는 함수 안에서 또 다른 함수를 선언할 수 있다.
function outter(){
function inner(){
var title = 'coding everybody';
alert(title);
}
inner();
}
outter(); // coding everybody함수 outter의 내부에는 함수 inner가 정의되어 있다. 이를 내부함수라고 한다.
내부함수는 외부함수의 지역변수에 접근할 수 있다.
function outter(){
var title = 'coding everybody';
function inner(){
alert(title);
}
inner();
}
outter(); // coding everybody내부함수는 외부함수의 지역변수에 접근할 수 있는데, 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도
내부함수가 외부함수의 변수에 접근할 수 있다. 이러한 메커니즘을 클로저라고 한다.
function outter(){
var title = 'coding everybody';
return function(){
alert(title);
}
}
inner = outter();
inner(); // coding everybodyinner = outter();에서 결과가 변수 inner에 담긴다. 그 결과는 이름 없는 함수이다.
실행이 inner();로 넘어오면 outter 함수는 실행이 끝났기 때문에 이 함수의 지역변수는 소멸되는 것이 자연스럽다.
결과값으로 coding everybody가 출력된 것은 외부함수의 지역변수 title에 소멸되지 않았음을 의미한다.
클로저란 내부함수가 외부함수의 지역변수에 접근할 수 있고,
외부함수는 외부함수의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는 특성을 의미한다.
arguments
함수에는 arguments라는 변수에 담긴 숨겨진 유사 배열이 있다.
이 배열에는 함수를 호출할 때 입력한 인자가 담겨있다.
function sum(){
var i, _sum = 0;
for(i = 0, i < argumemts.length; i++){
document.write(i+' : '+arguments[i]+'<br/>');
_sum += arguments[i];
}
return _sum;
}
document.write('result : ' + sum(1,2,3,4)); // 10sum()은 인자로 전달된 값을 모두 더해서 리턴하는 함수다.
인자에 대한 정의가 없는데 마지막에서 4개의 인자를 전달하고있다. arguments라는 특수 배열이 있기 때문에 가능하다.
arguments는 함수안에서 사용할 수 있도록 그 이름이나 특성이 약속되어 있는 일종의 배열이다.
argumemts[0]은 함수로 전달된 첫번째 인자를 알아낼 수 있다.
arguments.length로 함수에 전달된 인자의 개수를 알아낼 수도 있다.
여기에 반복문을 결합하면 함수로 전달된 인자의 값을 순차적으로 가져올 수 있고,
그 값을 더해서 리턴하면 총합을 구하는 함수가 된다.
매개변수의 개수
함수.length : 함수에 정의된 인자의 수
arguments.length : 함수에 전달된 실제 인자의 수
function zero(){
console.log(
'zero.length', zero.length,
'arguments', arguments.lengtgh
);
}
function one(arg1){
console.log(
'one.length', one.length,
'arguments', arguments.length
);
}
function two(arg1, arg2){
console.log(
'two.length', two.length,
'arguments', arguments.length
);
}
zero(); // zero.length 0 arguments 0
one('val1', 'val2'); // one.length 1 arguments 2
two('val1'); // two.length 2 arguments 1
함수 호출
기본적인 호출방법
function func(){
}
func();위에서 함수 func는 Function이라는 객체의 인스턴스다.
따라서 func는 객체 Function이 가지고 있는 메소드들을 상속하고 있다.
함수를 호출할 때 사용할 메소드는 Function.apply와 Function.call이다.
function sum(arg1, arg2){
return arg1+arg2;
}
alert(sum.apply(null, [1,2])) // 3apply 메소드는 두 개의 인자를 가진다.
첫 번째 인자는 함수가 실행될 맥락이다.
두 번째 인자는 배열이다. 이 배열에 담겨있는 원소가 함수의 인자로 순차적으로 대입된다.
o1 = {val1:1, val2:2, val3:3}
o2 = {v1:10, v2:50, v3:100, v4:25}
function sum(){
var _sum = 0;
for(name in this){
_sum += this[name];
}
return _sum;
}
alert(sum.apply(o1)); // 6
alert(sum.apply(o2)); // 185o1과 o2는 각각 3, 4개의 속성을 가지고 있다.
함수 sum은 객체의 속성을 열거 할 때 사용하는 for in 문을 이용해서 객체 자신(this)의 값을 열거한 후
각 속성의 값을 지역변수 _sum에 저장한 후 리턴한다.
참고사이트
https://www.opentutorials.org/course/743
'do > javascript' 카테고리의 다른 글
| javascript 3 (0) | 2019.04.29 |
|---|---|
| javascript 1 (0) | 2019.04.25 |