<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js01/ex02</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h2>자바스크립트 function 예제2</h2>
<script>
// 함수 선언
function fn01(name) {
console.log("fn01 호출 : " + name);
// arguments: 자바스크립트 함수 호출 시 자동 생성
console.dir(arguments);
// console.dir(arguments[0]);
// console.dir(arguments[1]);
// console.dir(arguments[2]);
for(var i = 0; i<arguments.length; i++){
console.log(`arguments[${i}] =>` + arguments[i]);
}
// arguments의 내장 속성은 제한적이다.
//arguments.forEach((item, i) =>{
// console.log(item, i);
//});
}
// ...args: ES6 이상에서는 rest parameters 사용 권장
var fn02 = (...args) => {
console.log("fn02 호출");
//console.dir(args);
// Array는 Arguments보다 훨씬 더 많은 속성을 가지고 있다.
args.forEach((item, i) =>{
console.log(item, i);
});
}
// 함수 호출
// 매개변수의 타입과 개수에 상관없이 인자 사용 가능
fn01("홍길동", 23);
fn02(1111, 2222, 3333);
console.dir(Array);
</script>
</body>
</html>
