바닥코딩

Spread 연산자 본문

JavaScript/vanilla js

Spread 연산자

개발공부개발공부 2021. 3. 26. 09:30

 spread 연산자 이터러블 오브젝트의 엘리먼트를 하나씩 분리하여 전개할 수 있습니다. spread 연산자로 인해 분리된 엘리먼트들은 어떤 변수에 할당한다거나, 호출하는 함수의 파라미터 값으로 사용하는 여러가지 응용이 가능합니다.

Spread 연산자 문법

 spread 연산자는 기본적으 '...'  점 3개를 연속으로 붙인 기호를 사용합니다. 점 3개에 이어서 이터르블 오브젝트를 작성하면 spread 연산자를 통해 엘리먼트를 전개할 수 있습니다.

let arrOne = [11,12];
let arrTwo = [21,22];

let spreadObj1 = [...arrOne, ...arrTwo, 31,32]; 
console.log(spreadObj1); 
console.log(spreadObj1.length);

위 코드를 보면 arrOne, arrTwo 에 각각 11 12  , 21 22 를 할당 했습니다. 그리고 ...(spread 연산자를) 연결하면 어떤 결과가 나올까요? 

 => 해당 코드와 같은 경우는 [11,12,21,22,31,31] 와 길이 6을 출력합니다. 이렇게 spread 연산자는 자신이 가진 엘리먼트를 분리해 전개하는 것이 가능합니다,

let spreadObj2 = [..."music"];
console.log(spreadObj2);
console.log(spreadObj2.length);

  해당 코드는 spread 연산자 뒤에 문자열이 등장했습니다. 이런경우 spread연산자 전개는 해당 문자열을 철자별로 분류 합니다 결과는["m","u","s","i","c"] 가 되며 길이는 5가 된는 것이죠 

'JavaScript > vanilla js' 카테고리의 다른 글

Template 리터럴  (0) 2021.03.26
동기/비동기 ,callback 함수  (0) 2021.03.25
Map 오브젝트  (0) 2021.03.17
Arrow function  (0) 2021.03.17
프로토 타입  (0) 2021.03.17