휴식 대 확산 연산자

나는 나머지 연산자와 스프레드 연산자의 차이점에 대해 질문을 받고 공백을 그린 것을 기억합니다. 나는 부트캠프에 있을 때부터 스프레드 연산자를 사용하지 않았으며 그 경우에도 약간 얼버무리는 것 같았습니다.



그래서 저는 나머지 연산자와 스프레드 연산자 간의 사용법과 차이점을 살펴봄으로써 이러한 지식 격차를 해결하고 싶었습니다.

스프레드 연산자와 나머지 연산자는 구문이 매우 유사하기 때문에 혼동하기 쉽습니다.

Spread Operator: iterable의 내용을 개별 요소로 펼칠 수 있습니다.

참고: iterable은 루프를 돌거나 for 루프의 도움으로 반복할 수 있는 객체입니다. 리스트, 튜플, 세트, ​​딕셔너리, 문자열 등과 같은 객체를 이터러블이라고 합니다.

스프레드 예시를 살펴보겠습니다.

const arr = ["My", "name", "is", "Melissa"]

const copyArr = [...arr]

console.log(copyArr)

console.log(...copyArr)

console.log(copyArr)


돌아온다["My", "name", "is", "Melissa"]
스프레드 연산자를 사용하면 수집된 요소를 자체 단일 요소로 풀 수 있습니다.


Rest: 함수가 무한 개수의 인수를 배열로 받아들일 수 있습니다.

예를 살펴보겠습니다.

function logFullName(firstName, ...familyName) {
  console.log(firstName);
  console.log(familyName);
}

logFullName("Robert", "Alfred", "Cole"); 

**업데이트: 제 코드를 수정해 주셔서 감사합니다!

myName의 요소가 분리되어 새 하위 배열로 재구성됩니다. 이것을 디스트럭처링(destructuring)이라고 하며, 배열이나 객체가 더 작은 조각으로 나뉩니다.

콘솔을 살펴보겠습니다.


console.log의 첫 번째console.log(firstName)는 배열 'Robert'의 첫 번째 요소를 반환합니다. 배열의 나머지 요소는 수집되어 familyName이라는 새 하위 배열에 저장됩니다. 이것이 우리가 console.log(familyName) 원래 배열["Alfred", "Cole"]의 나머지 부분으로 구성된 새로운 하위 배열을 얻는 이유입니다.

나머지는 배열의 나머지 부분에 대한 자체 컬렉션을 생성한다는 의미의 니모닉 장치로 생각하십시오. 이 예에서는 새 하위 배열["Alfred", "Cole"]이 됩니다.

**업데이트: 함수 사용 및 구문에 대한 예를 제공해주셔서 감사합니다.

function logParams(...params) {
     console.log(...params);
}

logParams(1,  2,  3, 4);

실행 중인 논리를 더 잘 이해하려면 자신만의 예제를 만들고 선택한 콘솔에서 테스트하십시오. 이것을 연습하면 휴식과 퍼짐에 대해 더 잘 이해할 수 있습니다!