자바스크립트 모든 함수에는 모든 매개변수를 받아주는 arguments라는 숨겨진 매개변수가 존재 합니다.
arguments라는 숨겨진 매개변수는 배열처럼 사용하지만 배열은 아니고 유사 배열입니다.
|
function exam01() {
console.log(`typeof : ${typeof(arguments)}`);
console.log(`typeof : ${typeof({name:'한사람'})} : ${{name:'한사람'}}`);
console.log(`typeof : ${typeof([1,2, 3, 4])} : ${[1,2, 3, 4]}`);
console.log(`arguments(유사배열) : ${arguments}`);
console.log(`arguments(유사배열) : ${JSON.stringify(arguments)}`);
}
exam01(1, 'string', true); // [1, 'string', true]
console.log("-".repeat(70));
실행 결과 typeof : object typeof : object : [object Object] typeof : object : 1,2,3,4 arguments(유사배열) : [object Arguments] arguments(유사배열) : {"0":1,"1":"string","2":true} ---------------------------------------------------------------------- |
위와 같은 유사 배열을 배열 처럼 출력하고 싶은 경우 배열이 지원하는 메서드를 call() & apply() & bind() 를 이용하여 호출하면 원하는 결과를 얻을 수 있습니다.
ex07.html 파일을 다음과 같이 만듭니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>자바스크립트 Call() & Apply() & Bind() </title> <script> function exam01() { console.log(`typeof : ${typeof(arguments)}`); console.log(`typeof : ${typeof({name:'한사람'})} : ${{name:'한사람'}}`); console.log(`typeof : ${typeof([1,2, 3, 4])} : ${[1,2, 3, 4]}`); console.log(`arguments(유사배열) : ${arguments}`); console.log(`arguments(유사배열) : ${JSON.stringify(arguments)}`); } exam01(1, 'string', true); // [1, 'string', true] console.log("-".repeat(70)); function exam02() { // console.log(arguments.join('=>')); // Uncaught TypeError: arguments.join is not a function console.log(`arguments2 : ${Array.prototype.join.call(arguments)}`); console.log(`arguments2 : ${[].join.call(arguments)}`); console.log(`arguments2 : ${[].join.call(arguments," => ")}`); } exam02(1, 'string', true); // [1, 'string', true] console.log("-".repeat(70)); function exam03() { console.log(`arguments3 : ${Array.prototype.join.apply(arguments)}`); console.log(`arguments3 : ${[].join.apply(arguments)}`); console.log(`arguments3 : ${[].join.apply(arguments,[" => "])}`); } exam03(1, 'string', true); // [1, 'string', true] console.log("-".repeat(70)); function exam04() { console.log(`arguments4 : ${Array.prototype.join.bind(arguments)()}`); console.log(`arguments4 : ${[].join.bind(arguments)()}`); console.log(`arguments4 : ${[].join.bind(arguments)([" => "])}`); } exam04(1, 'string', true); // [1, 'string', true] console.log("-".repeat(70)); function exam05() { // arguments 유사배열을 배열로 만들어 주는 함수 선언 const arguments2array = (arg) => Array.prototype.slice.call(arg); console.log(`arguments5 : ${arguments2array(arguments)}`); console.log(`arguments5 : ${arguments2array(arguments).join(' => ')}`); } exam05(1, 'string', true); </script> </head> <body> <div id="result"></div> </body> </html> | cs |
실행 결과 입니다.
'Front End > Javascript' 카테고리의 다른 글
| [JavaScript] 배열에서 최대값/최소값 구하기 (0) | 2024.11.01 |
|---|---|
| [JavaScript] 콜백 지옥 (Callback Hell) 경험해 보기 (0) | 2024.10.24 |
| [JavaScript] call() & apply() & bind()의 사용 (0) | 2024.10.24 |
| [JavaScript] 콜백(Callback) 함수 5(this 문제점) (1) | 2024.10.24 |
| [JavaScript] 콜백(Callback) 함수 4(활용 사례) (1) | 2024.10.24 |
