[JavaScript] ... 문법

2022. 6. 11. 16:37·JavaScript
반응형

자바스크립트에서 ... 을 사용하는 문법이 2개가 있다. 

하나는 rest 파라미터, 다른 하나는 spread operator 가 있다. 

 

rest 파라미터 

함수에 파라미터를 넘겨줄 때, 몇 개의 파라미터가 들어갈지 미리 정의할 수 없는 경우가 있다. 

그럴 때 사용하는 것이 rest 파라미터이다. 

function addAll(...num) {
    let sum = 0;
    num.forEach(element => {
    	sum+= element;
    })
    
    return sum;
}

addAll(1,2,3,4,5);
addAll(1,2,3,4,5,6,7,8,9,10);

함수 파라미터의 명칭 앞에 ... 을 붙여주면 파라미터를 여러 개를 받는다는 뜻이다. 

 

특징으로는 

  • 일반 파라미터 뒤에만 올 수 있다. 
function addAll(num, ...otherNum){        // 가능
	// ...
}

function addAll(...num, ...otherNum){     // 불가능, 에러 발생
	// ...
}
  • rest 파라미터 자리에 집어넣은 값들은 전부 [] 안에 담겨있다. 

 

Spread operator 

array 혹은 object의 괄호를 벗기고 싶은 경우에 Spread operator를 사용한다. 

let arr = [3,4,5];
let arr2 = [...arr];

 

괄호를 벗겨주는 ...spread는 array와 object 자료를 괄호를 풀어서 return 해주는 특징이 있다. 

반응형
저작자표시 비영리 변경금지 (새창열림)

'JavaScript' 카테고리의 다른 글

[JavaScript] 자바스크립트의 원시 타입  (1) 2022.06.18
[JavaScript] Destructuring 문법  (0) 2022.06.13
[JavaScript] 콜스택  (1) 2022.06.04
[JavaScript] 제너레이터와 이터레이터  (4) 2022.05.20
[JavaScript] ES6에서의 순회와 이터러블  (2) 2022.05.19
'JavaScript' 카테고리의 다른 글
  • [JavaScript] 자바스크립트의 원시 타입
  • [JavaScript] Destructuring 문법
  • [JavaScript] 콜스택
  • [JavaScript] 제너레이터와 이터레이터
잉여개발자
잉여개발자
풀스택 개발자를 목표로 잉여롭게 개발 공부도 하면서 다양한 취미 생활도 즐기고 있는 잉여 개발자입니다.
  • 잉여개발자
    잉여로운 개발일지
    잉여개발자
    • 분류 전체보기 (789)
      • 개발정보 (36)
      • 개발환경 (7)
      • 개발생활 (19)
      • React (141)
        • 이론 (23)
        • 기능 (12)
        • 실험실 (88)
        • 버그 (6)
        • 패스트캠퍼스 (9)
        • Npm (3)
      • React Native (28)
        • 공통 (6)
        • TypeScript (3)
        • JavaScript (18)
        • 버그 (1)
      • Next.js (30)
        • 이론 (13)
        • 실험실 (13)
        • 버그 (3)
      • Web (35)
      • 알고리즘 (202)
        • 풀이 힌트 (39)
      • JavaScript (47)
      • TypeScript (29)
        • 기초 (27)
        • 실험실 (2)
      • Node.js (13)
        • 이론 (0)
        • 기능 (3)
        • 실험실 (9)
        • 버그 (1)
      • 도커 (4)
      • CCNA (22)
        • 이론 (4)
        • 문제 (18)
      • 취미생활 (167)
        • 잉여로운 칵테일 (2)
        • 잉여의 식물키우기 (130)
        • 잉여로운 여행기 (11)
        • 잉여의 제2외국어 (21)
        • 잉여로운 책장 (2)
      • Java (1)
        • Java의 정석 (1)
      • 꿀팁 공유 (3)
  • 태그

    영어회화
    redux
    타일러영어
    리액트
    Node.js
    자바스크립트
    react
    리얼클래스
    네트워크
    프로그래머스
    typescript
    덤프
    네이버 부스트캠프
    식물
    바질 키우기
    CSS
    Babel
    타입스크립트
    ReactNative
    영어독학
    Docker
    webpack
    CCNA
    next.js
    javascript
    알고리즘
    리얼학습일기
    바질
    다이소
    ChatGPT
  • hELLO· Designed By정상우.v4.10.1
잉여개발자
[JavaScript] ... 문법
상단으로

티스토리툴바