Frontend/JavaScript
[생활코딩] JS문법(함수)- arguments
blueprint-12
2022. 1. 14. 20:12
//sum()함수는 전달받는 매개변수가 지정되어있지 않음
function sum() {
//변수 i는 loop를 위한 변수 굳이 따로 뺄 필요없이 for문 내부에 let i 라고 써줘도 된다.
let i, _sum = 0;
for (i = 0; i < arguments.length; i++) {
document.write(`${i} ${arguments[i]} <br/>`);
_sum += arguments[i];
}
return _sum;
}
//sum()에 4개의 인자(1,2,3,4)를 전달
document.write(`result : ${sum(1, 2, 3, 4)}`);
- 함수에는 arguments라는 변수에 담긴 숨겨진 유사 배열(배열과 비슷하긴한데 배열은 아닌 것)이 있다. 실제로는 arguments 객체의 인스턴스입니다.
- 이 배열에는 함수를 호출할 때 입력한 인자가 담겨있다.
- 코드를 보면 함수 sum에 매개변수가 비어있음에도 sum의 인자(argument)로 4개의 숫자를 전달하고 있다.
- JS는 매우 관대한 언어라서 함수에 매개변수를 정의하지 않더라도 혹은 매개변수의 숫자와 다르다하더라도 인자의 갯수를 마음대로 지정해도 오류가 나지 않습니다.
- a += 1;은 a = a+1;과 같습니다.
- arguments는 함수안에서 사용할 수 있도록 그 이름이나 특성이 약속되어 있는 일종의 배열(객체) // 배열과 유사할 뿐이지 배열과 같은 것은 아닙니다.
- arguments를 사용하면 전달받는 인자의 정보를 제대로 알지 못해도 활용할 수 있다.
- 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
- 주의할 점은 함수.length와 arguments.length가 다르다는 것이다.
- arguments.length : 함수로 전달된 실제 인자의 수를 나타냄
- 함수.length : 함수에 정의된 매개변수의 수를 의미
- 코드를 보면 함수one()에서 one.length를 했을 때는 1, arguments.length를 했을 때는 2를 결과로 출력한다.
- 이유는 전달받은 인자는 2개인데 one함수에 정의된 매개변수는 "arg1"하나 이기 때문이다.
- 두 가지 차이를 이용해서 코드를 작성할 때 사용자가 인자로 전달하는 값이 함수에 정의된 매개변수의 수를 초과하면 경고창을 띄우는 등 활용을 할 수 있겠죠!