[JavaScript] Spread 연산자, Rest 매개변수

2025. 6. 18. 15:50· 프로그래밍언어/JavaScript
목차
  1. Spread 연산자
  2. Rest 매개변수

Spread 연산자

  • ...객체명, ...배열명
  • 객체나 배열에 저장된 여러개의 값을 개별로 흩뿌리는 연산자
  • 함수 호출시 인자를 Spread연산자를 사용해서 전달 가능
// 1. 배열 Spred
let arr1 = [1, 2, 4, 5];
let arr2 = [4, arr1[0], arr1[2]]; // 배열의 길이가 변경 될 수 있어서 위험한 방법
let arr3 = [4, ...arr1, 6];

console.log(arr3); // [4,1,2,4,5,6]

// 2. 객체 Spred
let obj1 = {
  a: 1,
  b: 2,
};

let obj2 = {
  ...obj1,
  c: 3,
  d: 4,
};

console.log(obj2); // {a:1, b:2, c:3, d:4}

// 3. 함수 인자 Spred로 전달
function funcA(p1, p2, p3, p4, p5 = 6) {
  console.log(p1, p2, p3, p4, p5);
}
funcA(...arr1); // 1, 2, 4, 5, 6

 

 

Rest 매개변수

  • ...매개변수명
  • 나머지 매개변수로 매개변수 ()안에 사용
  • 매개변수를 받을 때 배열 형태로 한 번에 받을 수 있음
  • Rest 매개변수명은 자유롭게 설정가능(꼭 rest가 아니라도 가능)
  • Rest 매개변수는 항상 마지막에 써서 배열의 나머지 값들을 배열 형태로 받아오게 함(Rest 매개변수 뒤 추가 시 오류 발생)
let arr1 = [1, 2, 4, 5];
function funcB(one, two, ...rest) {
  console.log(one, two, rest); // 1 2 [4, 5]
}

funcB(...arr1);

 

 

'프로그래밍언어 > JavaScript' 카테고리의 다른 글

[JavaScript] Date 객체와 날짜  (1) 2025.06.21
[JavaScript] 배열의 메서드  (4) 2025.06.19
[JavaScript] 구조 분해 할당  (0) 2025.06.18
[JavaScript] Truthy&Falsy  (0) 2025.06.18
[JavaScript] AJAX(Asynchronous Javascript And XML)  (0) 2025.03.11
  1. Spread 연산자
  2. Rest 매개변수
'프로그래밍언어/JavaScript' 카테고리의 다른 글
  • [JavaScript] Date 객체와 날짜
  • [JavaScript] 배열의 메서드
  • [JavaScript] 구조 분해 할당
  • [JavaScript] Truthy&Falsy
개발원슝이
개발원슝이
꾸준히 개발공부를 합니다.
개발원슝이
꾸준히 개발슝이
개발원슝이
전체
오늘
어제
  • ALL (242)
    • 프로젝트 (34)
      • clone coding (19)
      • mini project (5)
      • Team project(with KIC) (10)
    • 문제 (37)
      • 백준 (7)
      • 프로그래머스 (14)
      • 정보처리기사실기 (16)
    • 설치 (9)
    • 개발 기초 (13)
    • 프로그래밍언어 (124)
      • HTML (16)
      • CSS (17)
      • JavaScript (22)
      • JAVA (13)
      • JSP (10)
      • Python (22)
      • C언어 (24)
    • 프레임워크 (6)
      • Spring (3)
      • Django (3)
    • DB (2)
      • MySQL (2)
    • AWS (1)
    • 오류 (2)
    • 이것저것 (6)
    • 전공자 개발 (3)
    • 비전공자 개발 (5)

블로그 메뉴

  • 네이버블로그(강의노트)
  • GitHub
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 홍정모의 따라하며 배우는 C언어
  • 파이썬공부
  • 홍정모교수님
  • javascript
  • 코딩테스트
  • 생활코딩
  • 인프런
  • 점프 투 파이썬
  • 백준
  • 따배씨

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.2
개발원슝이
[JavaScript] Spread 연산자, Rest 매개변수
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

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

블로그 게시글

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

모든 영역

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

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