spread문법 , rest파라미터 , arguments의 차이

2023. 7. 25. 20:38· 프론트엔드/JS

이 셋 각각의 개념을 알고있다고 생각했는데, 또 모아놓고 생각해보니 뒤죽박죽이 되어버렸다.
이 꼴은 개념을 정확히는 모르고 있다는 말이겠지!
이번에 확실히 정리해보겠다.

 

 

✅ rest 파라미터

- 파라미터에 ...를 이용해서 받으면 나머지 인자를 받아 하나의 "배열"로 만들어 사용하게 됨.

- ( "배열"이기 때문에 배열의 메소드 사용가능함.)

- rest 파라미터는 항상 마지막에 있어야 함. 

 

function x(a, ...rest) {
  console.log(Array.isArray(rest)); // true
  console.log(a, rest); // 1, [2,3,4,5]
}
 x(1, 2, 3, 4, 5);

 

✅  arguments

- 함수를 호출할때 입력한 모든 인자가 담겨있음.

- rest는 배열, arguments는 유사배열임.

- "유사배열"이기 때문에 배열의 모든 메소드 사용 불가능. 그러나 length() , for of 등은 사용가능

- 실행컨텍스트 생성시 arguments객체 생성됨.

 

function x1() {
  console.log(arguments); // {0:"a" , 1:"b" , 2:"c" , 3:"d" , 4:"e"}
}

 x1('a', 'b', 'c', 'd', 'e');



✅ spread 

- 배열 또는 이터러블(iterable)을 "개별" 요소로 분리한다.

- rest는 마지막에 써야 하지만, spread는 어디든 써도 상관없음.

 

사용1) 객체에도 spread 쓸 수 있음.

 const obj = {
    a: 'ㄱ',
    b: 'ㄴ',
    c: 'ㄷ',
    d: 'ㄹ',
    e: 'ㅁ',
  };
  // console.log({ ...obj, f: 'ㅂ' });

 

사용2) 객체나 배열을 복사할 떄 사용

const arr1 = [1, 2, 3, 4];
const arr2 = [...arr1, 5, 6];
// console.log(arr2); [1,2,3,4,5,6]


사용3) spread를 활용해 배열을  -> 객체로 바꿀 수 있음.
: 참고로 배열은 객체로 펼칠 수 있지만, 객체를 배열로 펼칠 수는 없음.

// 1)배열을 객체로
const members = ['ali', 'koko', 'julli'];
const membersObj = { ...members };
// console.log(membersObj); // {0: 'ali', 1: 'koko', 2: 'julli'}

// 2)객체를 배열로
const topic = {
  name: '모던 자바스크립트',
  language: 'JavaScript',
};
const newArray = [...topic]; // TypeError!

'프론트엔드 > JS' 카테고리의 다른 글

디바운스,쓰로틀  (0) 2024.06.12
URLSearchParams  (0) 2023.10.31
parseInt, parseFloat, Math.floor 에 대해  (0) 2023.07.22
History api  (0) 2023.07.02
performance.now()  (0) 2023.06.23
'프론트엔드/JS' 카테고리의 다른 글
  • 디바운스,쓰로틀
  • URLSearchParams
  • parseInt, parseFloat, Math.floor 에 대해
  • History api
journey-dev
journey-dev
journey-devjourney-dev 님의 블로그입니다.
journey-dev
journey-dev
journey-dev
전체
오늘
어제
  • 분류 전체보기 (63)
    • 프론트엔드 (44)
      • JS (8)
      • React (8)
      • vue (9)
      • Typescript (2)
    • CS (0)
      • 자료구조&알고리즘 (2)
      • 네트워크 (2)
    • 개발서적 (1)
      • 코어 자바스크립트 (0)
      • 프론트엔드 성능 최적화 가이드 (1)
    • DB (11)
      • SQL (11)
    • GIT (0)
    • GIS (3)
    • 개발일기 (0)
    • ing (0)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

  • 일단 시작해라. 나중에 완벽해지면 된다.

인기 글

태그

  • 리액트 복기하기!

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.2
journey-dev
spread문법 , rest파라미터 , arguments의 차이
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.