안녕하세요. Tay 입니다.
함수를 호출할 때 암묵적으로 arguments 객체가 함수 내부로 전달됩니다.
이 arguments 객체를 잘 활용하면 유동적인 함수를 개발할 수 있습니다.
Argument
함수 호출과 동시에 함수 내부로 전달되는 유사 배열 객체
1) index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<!-- <script src="function.js"></script> -->
<!-- <script src="hoisting.js"></script> -->
<!-- <script src="arrow.js"></script> -->
<!-- <script src="use-function.js"></script> -->
<!-- <script src="callback.js"></script> -->
<!-- <script src="inner.js"></script> -->
<script src="arguments.js"></script>
</body>
</html>2) arguments.js
function func(arg1, arg2) {
console.log(arg1, arg2);
console.log(arguments);
}
func(2, 3, 4);
func(1);
console.dir(func);- arg1, 2 인자들을 받는 함수 func 를 선언한다.
- func 함수는 log 로 arg1, 2 를 출력하고, 내부로 전달 된 arguments를 출력한다.
- 인자 (2, 3, 4) 로 func 함수 실행
- 인자 (1) 로 func 함수 실행
- 마지막으로 dir 로 func 메소드 확인
결과 :
1. 인자 (2, 3, 4) 와 arguments
func 는 arg1 과 2 만 출력하기때문에 인자값 4는 생략됐다.
그렇지만, 함수 내부로 전달 된 arguments 를 보면 유사배열 2번 에 4가 삽입되어있다.
2. 인자 (1) 와 arguments
func 함수는 인자값 2개를 받게 되어있지만, 위 내용에서는 1 만 전달했다.
다른 언어라면 에러가 발생하지만, 자바스크립트에서는 자동으로 undefined 가 채워진다.
Arguments property 분석!
 |
 |
| func(2, 3, 4) | func(1) |
- 인자값 4를 받은 변수가 없어서 생략된 것 같으나, arguments 객체의 유사 배열 형식으로 들어가있다.
- 인자값 1만 넣은 경우, arguments 객체의 유사 배열 형식으로 1만 존재
- length 프로퍼티가 존재한다. (인자값의 갯수를 나타낸다.)
- callee 프로퍼티는 실행 중인 함수의 참조값을 나타낸다.
 |
 |
| Arguments.callee | functioin func |
callee 는 실행중인 함수의 참조값을 갖고있기때문에, callee 과 func 는 같은 값을 갖는다.
Arguments 를 이용한 유동적인 함수 작성
function plus() {
var temp = 0;
for (index in arguments) {
temp += arguments[index];
}
console.log(`Plus 1 to ${arguments.length} is ${temp}`);
}
plus(1, 2, 3, 4, 5);인자값 갯수를 설정하지않고 받는대로 더해서 총합을 알려주는 함수이다.
arguments 는 유사배열 형태이기때문에 for - in 문을 사용해서 값을 받는다.
arguments.length 로 인자값 개수를 유동적으로 구한다.
결과 :
위 처럼 arguments 를 이용하면 유동적인 함수를 개발 할 수 있으므로 잘 알아두자!!
이 글은 개인 공부목적으로 작성되었습니다.
정보가 잘못 되거나 궁금한 사항은 댓글로 부탁드립니다!! 읽어주셔서 감사합니다.
'JavaScript > Basic-Javascript' 카테고리의 다른 글
| 자바스크립트 정리하며 배우기[23] - This[2] : 생성자 함수를 호출할 때 this 바인딩 (0) | 2020.03.19 |
|---|---|
| 자바스크립트 정리하며 배우기[22] - This[1] : 함수와 this, this 의 개념, this 와 that (0) | 2020.02.25 |
| 자바스크립트 정리하며 배우기[20] - 내부 함수(inner function) (0) | 2020.02.03 |
| 자바스크립트 정리하며 배우기[19] - 콜백 함수(callback) (0) | 2020.02.03 |
| 자바스크립트 정리하며 배우기[18] - 함수의 프로토타입(prototype property)과 constructor (0) | 2020.01.31 |
