전개 연산자(...)를 활용해봅시다.
배열의 각 값을 인자(Argument)로 넣고싶을 때는
arr[0], arr[1], arr[2], ... , arr[arr.length-1] 등으로 기입해야합니다.
그런데, 인자(Argument)가 많을 때는 시간이 오래 걸리겠죠?
그럴 때 전개연산자를 사용할 수 있습니다.
인자에(...arr)로 전달하면 각 요소(element)들이 하나씩 구분되어 전달됩니다.
반대로, 매개변수(Parameter)로 받을 때는 전개연산자가 각각 구분되어 날라온 요소들을 하나로 모아서 배열 형태로 받습니다.
아래의 그림을 보면서 이해해봅시다.
func04(...array) 하면, array의 요소들이 각각 구분되어 인자로 날라갑니다.
이때, 매개변수는 각각 1:1 대응이되어서 a = 1, b = 2, numbers = 3 이라는 값이 저장됩니다.
한편, func04(...array, ...array) 하면 어떻게 될까요?
인자로 보낼 때 1,2,3,1,2,3, 으로 날라갑니다.
받을 때는 전개연산자가 값들을 배열로 받아버립니다. 즉, a = 1, b = 2, numbers = 3,1,2,3 의 상태가 됩니다.
해설
apply 함수 & 더 발전된 형태의 전개연산자 활용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function func(a,b,c){
document.write(`${a} : ${b} : ${c}` + '<br>');
}
var array = [1,2,3];
func(array); // 123, undefined, undefined
func(array[0], array[1], array[2]); // 배열 요소가 많으면 완전 노가다겠지? 편하게 써보자
func.apply(null, array); // apply 함수를 쓰면, 요소 하나하나를 날려준다. 지금은 null에 대해서는 무시하자. 부모에 대한 형태라고 함.
func(...array); // apply에서 업그레이드 된 것!
function func01(){
document.write(arguments[0] + ' : ' + arguments[1] + ' : ' + arguments[2] + '<br>');
}
func01(10, 20);
func01(10, 20, 30);
//func01(10, 20, 30) 세미콜론을 생략할 수 있다.
function func02(){ // ...arguments 가 생략되어 있습니다.
for(let i of arguments){
document.write(i + ' : ');
}
document.write('<br>');
}
func02(10, 20);
func02(10, 20, 30);
function func03(...numbers) {
console.log(numbers);
}
func03(10, 20, 30);
function func04(a, b, ...numbers) {
document.write('a : ' + a + '<br>');
document.write('b : ' + b + '<br>');
document.write('numbers : ' + numbers + '<br>');
}
var numArr = [1,2,3];
func04(...numArr);
func04(...numArr, ...numArr);
// ...numArr : 인자로 넘길 땐 하나씩 뿌려진다.
// 즉, 1,2,3, 1,2,3이 매개변수로 넘어간다.
// func04에서 인자로 받을 땐, a = 1, b = 2, ....number : 3, 1, 2, 3 이렇게 배열로 받아버린다.
</script>
</head>
<body>
</body>
</html>
'웹 프로그래밍 > JavaScript' 카테고리의 다른 글
| [JS] 객체 배열에서 객체를 꺼내는 for 반복문 VS 객체 내의 요소를 꺼내는 for 반복문 (0) | 2020.06.17 |
|---|---|
| [JS] 객체(Object) 기초 및 활용 : 객체 배열, 객체 생성함수, 깊은 복사 등 (0) | 2020.06.17 |
| [JS] 전개연산자 : 매개변수(parameter)로 받을 때 사용법 (0) | 2020.06.17 |
| [JS] 람다함수와 비슷한 Arrow function (0) | 2020.06.17 |
| [JS] 자동완성 기능 사용하기 : Tern Eclipse IDE 플러그인 설치 및 적용 (0) | 2020.06.17 |
