Home JavaScript 함수의 arguments, 그리고 form
Post
Cancel

JavaScript 함수의 arguments, 그리고 form

JavaScript의 함수에는 arguments라는 메서드가 존재합니다.

함수를 생성할 때 따로 아규먼트를 명시하지 않아도 자동으로 함수에 인자값들이 들어오게 되면 이 인자값들은 arguments라는 메서드로 할당됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
function addMark() {
    let newData = [];
    for (let i = 0; i < arguments.length; i++) {
        newData.push(arguments[i]);
    }

    return newData;
}

console.log(addMark(1, 2, 3, 4, 5));

// [ 1, 2, 3, 4, 5 ]

위 예제를 실행해보면 인자값으로 넣은 값들이 newData라는 배열의 요소로 삽입된것을 확인할 수 있습니다.

이러한 기능을 이용하면 아규먼트의 갯수를 정의하지 않으므로 얼마만큼의 인자가 들어올지 모르는 상황 즉 가변적인 갯수의 인자를 받아야 하는 상황에서 아래와 같은 덧셈 함수를 만드는등 활용 할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
function addNum() {
    let sum = 0;
    for (let i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}

console.log(addNum(1, 2, 3, 4, 5));

// 15

위 2가지 예제에서 살펴보면 arguments[i]를 공통적으로 사용합니다.
이러한 문법은 흔히 배열에서 특정 값을 추출할 때 사용하지만 사실 arguments의 자료형은 배열이 아닙니다.

이를 조금 더 자세히 설명하기 위해 첫번째 예제(addMark 함수)를 조금 수정하여 만든 아래 예제를 실행하면
ReferenceError: arguments is not defined 에러가 발생합니다.

1
2
3
4
5
6
7
8
function newAddMark() {
    let newData = argumnets.map(function (value) {
        return value;
    });
    console.log(newData);
}

newAddMark(1, 2, 3, 4, 5)

왜냐하면 arguments는 사실 배열의 모양을 하고있지만 배열이 아니라서 map 함수를 이용할 때 에러가 발생하는것입니다.

따라서 아래 예제와 같이 from문을 이용해서 arguments의 Type을 배열로 변환해주면 위와 같은 오류를 해결할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
function newAddMark() {
	// arguments로부터 배열을 생성한다는 의미
    let newArray = Array.from(arguments);
    let newData = newArray.map(function (value) {
        return value;
    });
    console.log(newData);
}

newAddMark(1, 2, 3, 4, 5)
This post is licensed under CC BY 4.0 by the author.