[js] 함수

argumets객체

function sub(x, y) {
    console.log(arguments);
    return x - y;
}

sub(5, 2, 9);

 

length로 인수 객체도 확인할 수 있습니다.

인덱스가 0부터 시작하여 각 인덱스에 해당하는 값도 확인할 수 있습니다.

배열을 출력하듯이 for of로 각 값을 출력해보겠습니다.

 

function sub(x, y) {
    for (const argument of arguments) {
        console.log(argument)
    }
    return x - y;
}

sub(5, 2, 9);

인수 각 값이 올바르게 출력됩니다.

 

그렇다면 배열 내장함수인 forEach로 해당 값을 출력해볼까요?

function sub(x, y) {
    arguments.forEach((argument) => {
        console.log(argument);
    })
    return x - y;
}

sub(5, 2, 9);

 

이와 같은 오류가 발생합니다.

 

그렇다면 map은 어떤가 살펴보겠습니다.

function sub(x, y) {
    const biggerTwo = arguments.map((argument) => argument > 2);
    console.log(biggerTwo);
    
    return x - y;
}

sub(5, 2, 9);

동일한 오류가 발생합니다.

그래서 마지막으로 filter를 실험해보았습니다.

 

function sub(x, y) {
    const biggerTwo = arguments.filter((argument) => argument > 2);
    console.log(biggerTwo);
    
    return x - y;
}

 

filter도 오류가 납니다. 배열 내장함수가 안되는것으로 판단합니다.

좀 더 확실하게 살펴보기 위하여 MDN 정의를 살펴보겠습니다.

 

argments객체는 함수에 전달된 인수에 해당하는 Array형태의 객체입니다.

 

"Array 형태"란 argumets가 Array의 forEach, map과 같은 내장 메서드를 가지고 있지 않다는 뜻입니다.

MDN을 통하여 배열의 내장 메서드를 사용하지 못하는것을 확인할 수 있습니다.

 

직접 argumets의 값에 접근하여 값을 변경할 수도 있습니다.

function sub(x, y) {
    let count = 10;
    const argumentsLength = arguments.length;
    for (let index = 0; index < argumentsLength; index++) {
        arguments[index] = count++;
        console.log(index, arguments[index]);
    }
    return x - y;
}

sub(5, 2, 9);

 

function sub(x, y) {
    const argsToArray = Array.from(arguments);
    console.log(argsToArray);
    return x - y;
}

sub(5, 2, 9);

배열로 변경됩니다.

 

즉시 실행 함수를 사용하는 이유

private한 변수를 만들 수 있습니다.

Unchecked runtime.lastError: The message port closed before a response was received.
(function () {
  const msg = 'hello world';
})();
console.log(msg);

msg는 전역에서 사용할 수 없어서 전역 스코프의 오염을 막을 수 있습니다.

 

그렇다면 사용하는 경우는 언제일까요?

 

즉시 실행 함수를 사용하는 경우

- 초기화

(function () {
    const text = 'first';

    initText = text;
})();

console.log(initText);
console.log(text);

초기화를 위하여 사용합니다.

전역에 변수를 추가하지 않아도 되기 때문에 코드 충돌 없이 구현할 수 있습니다. 그렇다보니 플러그인이나 라이브러리 등을 만들 때 많이 사용됩니다.

 

- 라이브러리 전역 변수의 충돌 방지

jQuery나 Prototype 라이브러리는 $라는 동일한 전역변수를 사용합니다. 두개의 라이브러리를 함께 사용하면 $변수가 충돌합니다. 

(function ($) {

})(jQuery);

여기서 $는 전역 변수가 아닌 jQuery object의 지역변수입니다. Prototype라이브러리의 $와 충돌없이 사용할 수 있는것입니다.

 

참고자료

- arguments객체(MDN)

- 즉시실행함수