[JavaScript] Spread/rest 문법

스프레트

스프레드 문법

스프레드는 배열을 풀어서 인자로 전달 혹은 배열을 풀어서 각 요소로 넣을때 사용한다.

function 함수명(인자1, 인자2, 인자3) {
    return 인자1 + 인자2 + 인자3
}

let 배열변수 = [배열1, 배열2, 배열3]


// apply() 사용하여 함수 출력
함수명.apply(null, 배열변수) // 배열1 + 배열2 + 배열3

// ... 전개구문 사용해서 함수 출력
함수명(...배열변수) /// 배열1 + 배열2 + 배열3

mdn 예시

function sum (v,w,x,y,z) {
    return v + w + x + y + z
}
let num = [1,2]

//전개 문구 여러번 쓸 수 있다.
sum(...num, 3, 4, ...[5]) // 15

---

배열 복사

let arr = [1,2,3]
let arr2 = [...arr] // arr.slice() 와 유사

arr2.push(4);

arr2; //[1,2,3,4]
arr 는 영향 받지 않음 // [1,2,3]

/! 하지만 적용 안돼는 부분도 있다.

let a = [[1], [2], [3]]
let b = [...a];

b.shift().shift(); // 1
/! 하지만 a에 영향이 있음 

a; // [[], [2], [3]]

그렇다면 배열을 더 좋게 연결 하는 방법은 없을까?

Array.prototype.concat()을 사용하여 배열 끝에 이어붙이는걸 사용한다.

let a = [1,2,3]
let b = [4,5,6]

/! concat() 사용
a = a.concat(b); // b의 모든 항목을 a에 붙임 [1,2,3,4,5,6]

/! 전개 문구 사용
a = [...a, ...b]; // [1,2,3,4,5,6]

/! Array.prototype.unshift()는 배열의 앞쪽에 값을 넣는데 사용한다.
Array.prototype.unshift.apply(a,b) // [4,5,6,1,2,3]

---

Rest 문법

파라미터 배열의 형태로 받아서 사용할 수 있다. 파라미터 개수가 가변적일 경우 유용하다.

용어🧐
Parameter(매개변수) : 함수의 정의에서 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수

function 함수명(x,y,z) { //x,y,z라는 3개의 parameter를 가지는 함수를 정의
    reutnr x + y + z
}

용어🧐
Argument(인수) : 함수가 호출될 때 함수로 값을 전달 해주는 값

함수명(1,2,3) // argument로 1,2,3을 전달하여 함수를 호출함