arguments : 함수에 있는 유사 배열이다.
예제
function sum(){
    var i, _sum = 0;   
    for(i = 0; i < arguments.length; i++){
        document.write(i+' : '+arguments[i]+'<br />');
        _sum += arguments[i];
    }  
    return _sum;
}
document.write('result : ' + sum(1,2,3,4));

 

함수 sum은 인자로 전달된 값을 모두 더해서 리턴하는 함수다. 그런데 1행처럼 함수 sum은 인자에 대한 정의하가 없다. 하지만 마지막 라인에서는 4개의 인자를 함수 sum으로 전달하고 있다. 함수의 정의부분에서 인자에 대한 구현이 없음에도 인자를 전달 할 수 있는 것은 왜 그럴까? 그것은 arguments라는 특수한 배열이 있기 때문이다.

arguments는 함수안에서 사용할 수 있도록 그 이름이나 특성이 약속되어 있는 일종의 배열이다. arguments[0]은 함수로 전달된 첫번째 인자를 알아낼 수 있다. 또 arguments.length를 이용해서 함수로 전달된 인자의 개수를 알아낼 수도 있다. 이러한 특성에 반복문을 결합하면 함수로 전달된 인자의 값을 순차적으로 가져올 수 있다. 그 값을 더해서 리턴하면 인자로 전달된 값에 대한 총합을 구하는 함수를 만들 수 있다.

 

매개변수의 수 : 함수.length와 arguments.length 두가지 수가 존재한다. 함수.length는 함수로 전달된 실제 인자의 수를 의미하고, arguments.length는 함수에 정의된 인자의 수를 의미한다.


예제
function zero(){
    console.log(
        'zero.length', zero.length,
        'arguments', arguments.length
    );
}
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

'Programming > Javascript' 카테고리의 다른 글

생성자와 new  (0) 2018.01.03
함수의 호출  (0) 2018.01.03
내부함수와 클로저  (0) 2018.01.03
값으로써의 함수와 콜백, 그리고 비동기 처리  (0) 2018.01.03
유효범위  (0) 2018.01.02
블로그 이미지

꼴통보안인

,

내부함수 : 자바스크립트는 함수 안에 또 다른 함수를 선언할 수 있다. 내부함수는 외부함수의 지역변수에 접근할 수 있다. 동일한 외부함수 안에서 만들어진 내부함수나 메소드는 외부함수의 지역변수를 공유한다.
예제
//
function outter(){
 function inner(){
  var title='coding everybody';
  alert(title);
 }
 inner();
}
outter();

 

//
function outter(){
 var title='coding everybody';
 function inner(){
  alert(title);
 }
 inner();
}
outter();

 

클로저 :내부함수가 외부함수의 지역변수에 접근할 수 있고, 외부함수는 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는 특성을 의미한다. 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것이다. 외부함수의 실행이 끝나서 외부함수가 소멸된 후에도 내부함수가 외부함수의 변수에 접근할 수 있다. 또한 객체의 메소드에서 사용할 수 있다.
예제
//
function outter(){
 var title='coding everybody';
 return function() {
  alert(title);
 }
}
inner=outter();
inner();

 

//
function factory_movie(title){
    return {
        get_title : function (){
            return title;
        },
        set_title : function(_title){
            title = _title
        }
    }
}
ghost = factory_movie('Ghost in the shell');
matrix = factory_movie('Matrix');
 
alert(ghost.get_title());
alert(matrix.get_title());
 
ghost.set_title('공각기동대');
 
alert(ghost.get_title());
alert(matrix.get_title());

 

클로저 응용
// 에러코드
var arr = []
for(var i = 0; i < 5; i++){
    arr[i] = function(){
        return i;
    }
}
for(var index in arr) {
    console.log(arr[index]());
}

 

함수가 함수 외부의 컨텍스트에 접근할 수 있을것 같지만 결과는 아래와 같이 나온다.

 

 

위 코드는 아래와 같이 정상 코드로 변경해야 한다.

 

// 정상코드
var arr = []
for(var i = 0; i < 5; i++){
    arr[i] = function(id) {
        return function(){
            return id;
        }
    }(i);
}
for(var index in arr) {
    console.log(arr[index]());
}

 

'Programming > Javascript' 카테고리의 다른 글

함수의 호출  (0) 2018.01.03
arguments, 매개변수의 수  (0) 2018.01.03
값으로써의 함수와 콜백, 그리고 비동기 처리  (0) 2018.01.03
유효범위  (0) 2018.01.02
모듈, 라이브러리  (0) 2018.01.02
블로그 이미지

꼴통보안인

,

값으로의 함수 : 자바스크립트에서는 함수도 객체, 일종의 값이다.
예제
//
function a(){}

 

위 예제에서 함수 a는 변수 a에 담겨진 값이다. 또한 함수는 객체의 값으로 포함될 수 잇다. 이렇게 객체의 속성 값으로 담겨진 함수를 메소드라 부른다.

 

//
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));
alert(cal(decrease, 1));

 

아래 예제를 통해 함수는 함수의 리턴값으로도 사용 가능한 것을 알 수 있다.


예제
function cal(mode){
 var funcs={
  'plus' : function(left,right){return left+right},
  'minus' : function(left,right){return left-right}
 }
 return funcs[mode];
}

alert(cal('plus')(2,1));
alert(cal('minus'))2,1));

 

아래 예제를 통해 함수는 배열값으로도 사용 가능한 것을 알 수 있다.

예제
var process = [
 function(input){return input+10;},
 function(input){return input*input;},
 function(input){return input/2;}
];

var input=1;

for(var i=0;i<process.length;i++){
 input = process[i](input);
}

alert(input);

 

콜백 : 함수가 수신하는 인자가 함수인 경우. 콜백은 비동기 처리에서도 유용하게 사용된다.


예제
// 문자로 정렬
var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];
alert(numbers.sort(sortNumber)); // [1,10,2,20,3,4,5,6,7,8,9]

 

// 배열 정렬
function sortNumber(a,b){
    // 위의 예제와 비교해서 a와 b의 순서를 바꾸면 정렬순서가 반대가 된다.
    return b-a;
}
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","author":"egoing"}

//demo1.html
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.2.1.min"></script>
</head>
<body>
<script type="text/javascript">
    $.get('http://localhost/javascript/datasource.json.js', function(result){
        console.log(result);
    }, 'json');
</script>
</body>
</html>

 

'Programming > Javascript' 카테고리의 다른 글

arguments, 매개변수의 수  (0) 2018.01.03
내부함수와 클로저  (0) 2018.01.03
유효범위  (0) 2018.01.02
모듈, 라이브러리  (0) 2018.01.02
객체  (0) 2018.01.02
블로그 이미지

꼴통보안인

,