✏️ 한 주간 배운 내용 정리

초보자를 위한 JavaScript 200제 내용을 참고하였습니다.

---

📘 arguments 객체 이해하기

자바스크립트 함수는 매개 변수를 가진다.

여기서 매개변수와 같이 사용되는 용어가 바로 전달 인자(argument) 이다.

• 매개 변수 : 함수 선언 시 작성되는 변수
• 전달 인자 : 함수가 호출될 때 전달되는 값

매개변수 외에 함수에서만 사용 가능한 특별한 객체를 제공하는데, 바로 argument 객체 이다.

---

예제

function sum() {
	var total = 0;
	for (val i = 0; i < arguments.length; i++) {
		total += arguments[i]; //arguments 객체는 배열과 유사하게 인덱스를 통해 접근할 수 있다.
	}
	console.log(arguments instanceof Array); //instanceof 연산자를 이용하여 arguments 객체가 배열이 아닌 것을 확인할 수 있다.
	return total;
}

var sumOf1to3 = sum(1, 2, 3); //sum 함수는 매개변수를 정의하고 있지 않지만, 전달 인자로는 1, 2, 3을 전달하고 있다.
console.log(sumOf1to3); //에러 발생 X

function testArg() {
	var newArr = Array.prototype.slice.call(arguments); //arguments 객체를 배열로 바꾸기 위해 slice 메소드를 호출한다. 
	console.log(newArr); //arguments 객체의 요소들을 복사하는 새로운 배열이 만들어 진다.
	console.log(newArr.indexOf('b')); //배열이기 때문에 indexOf 메소드를 사용하여 문자열 b의 인덱스를 반환한다.
	console.log(arguments.indexOf('b')); //arguments 객체는 배열이 아니기 때문에 에러가 발생한다.
}

testArg('a', 'b');

결과

false
6
["a", "b"]
1
function-arguments.js:19 Uncaught TypeError: arguments.indexOf is not a function

---

📕 함수 나머지 매개변수 이해하기

나머지 매개변수는 arguments 객체와 다르게 매개변수를 작성하는 곳에서 작성하고, 다른 매개변수와의 차이점을 두기 위해 ... 연산자와 함께 작성한다.

function(parameter, ...restParameter) {
     // arguments 객체는 나머지 매개변수와 다르게 함수 몸통에서만 사용한다.
}

arguments 객체와 나머지 매개변수와의 가장 큰 차이점

• arguments 객체 : 배열 X
• 나머지 매개변수 : 배열

---

예시

function sum(...args) { //sum 함수를 args라는 나머지 매개변수로 정의
	var total = 0;
	for (var i = 0; i < args.length; i++) {
		total += args[i];
	}
	console.log(args.indexOf(1)) //나머지 매개변수인 args는 배열이기 때문에 [index]를 통해 접근이 가능하고 indexOf 메소드를 사용할 수 있다.
	return total;
}
console.log(sum(1, 2, 3));

function sum2(a, b, ...others) { //a, b 매개변수 외에 others라는 나머지 매개변수로 정의
	var total = a + b;
	for (var i = 0; i < others.length; i++) {
		total += others[i];
	}
	return total;
}
console.log(sum2(1, 2)); //a, b 매개변수에 1, 2로 인자 전달. (others는 빈 배열)
console.log(sum2(1, 2, 3, 4)); //a, b 매개변수보다 더 많은 인자가 전달되어 1, 2는 a, b에 전달 되고 나머지 3, 4는 others 나머지 매개변수의 배열의 요소로 전달.

결과

0
6
3
10

---

초보자를 위한 JavaScript 200제 내용을 참고하였습니다.