three dots (...)

three dots(...)

자바스크립트에서 three dots(...)는 두 가지 역할을 한다.

하나는 Array/Object spread operator,

나머지는 Rest operator다.

 

 

---

Array/Object spread operator

배열과 객체를 펼친다.  => 그 안의 요소를 개별적으로 뽑는다.

다음의 예를 보면 이해하기가 쉽다.

 

const adrian = {
    fullName: 'Adrian Oprea',
    occupation: 'Software developer',
    age: 31,
    website: 'https://oprea.rocks'
};

const bill = {
    ...adrian,
    fullName: 'Bill Gates',
    website: 'https://microsoft.com'
};



//bill = {fullName: "Bill Gates", 
//	occupation: "Software developer", 
//        age: 31, 
//        website: "https://microsoft.com"}

위 코드를 보면

adrian이라는 객체의 요소를 bill이라는 객체에 넣은 것을 볼 수 있다.

다만 bill 객체가 ...adrian 이후에 fullName/website 키의 값을 재할당 해주었기 때문에

두 키가 갖는 값은 원래 bill 객체가 갖고 있는 값이라는 것을 알 수 있다.

 

아래는 다른 예시다,

let obj = {
  a: 1,
  b: 2,
  x: 3,
  y: 4
}

let {a, b, ...c} = obj;
let newObj = {a, b, ...c};
console.log(newObj);            // {a: 1, b: 2, x: 3, y: 4}

 

이는 배열에도 마찬가지로 작동한다.

const numbers1 = [1, 2, 3, 4, 5];
const numbers2 = [ ...numbers1, 1, 2, 6,7,8]; // this will be [1, 2, 3, 4, 5, 1, 2, 6, 7, 8]

 

 

 

Rest operator

주의할 점. 항상 인자 마지막에 작성하기.

함수에 인자로 사용될 때는 rest operator로써 작동한다.

이 rest operator의 뜻은, 나머지 argument를 의미한다. 

function printMaxNums(...args){
	console.log(args);
};

printMaxNums(10, 30, 40); // [10,30,40]

위 코드를 보면, ...args에 10,30,40이 '배열'로 변환되어 들어갔음을 알 수 있다.

 

주의 할 점이 있다면 res parameter는 항상 '배열'이라는 것이다.

따라서, 아래와 같이 나온다.

function getAllParams(required1, required2, ...args) {
      return [required1, required2, args];
    }
    
getAllParams(123); //[123,undefined,[]])