자바스크립트에서 점 3개(…) 활용법

안녕하세요. 이번시간에는 자바스크립트에서 점 3개(…)가 뭘 의미하는지 알아보도록 할게요. 아래 예제를 보시면 아마 느낌이 확오실건데요.

const adrian = {
  fullName: 'Adrian Oprea',
  occupation: 'Software developer',
  age: 31
};

위와 같은 오브젝트를 하나 만들었다고 치고, 이거랑 비슷한 오브젝트를 만들고 싶은거에요. 이거랑 다 똑같은데 fullName만 다른 새로운 오브젝트를 만들고 싶을때 아래와 같이 선언하실수 있어요.

const bill = {
  ...adrian,
  fullName: 'Bill Gates'
};

그러면 bill이라는 오브젝트에는 안봐도 아시겠지만 아래와 같은 값이 할당됩니다.

{
  occupation: 'Software developer',
  age: 31,
  fullName: 'Bill Gates'
}

fullName은 나중에 정의한 Bill Gates로 엎어쳐 지는거죠.

같은 방법으로 array에도 사용할수가 있는데요.

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

위와 같이 정의를 하면요, numbers2에는 numbers1에 있는 애들에 추가로 뒤에 값을 더 붙여라 이런 뜻이 되요. 그래서 numbers2는 아래와 같이 됩니다.

[1, 2, 3, 4, 5, 1, 2, 6, 7, 8]

여기서 주의하셔야하는 점은요, 1이랑 2가 numbers1에 있다고 해당값을 빼고 붙이지 않습니다. 그냥 무식하게 갖다 붙이는거에요. concat아시죠? Array.prototype.concat이라고 보시면 됩니다.

얘를 함수의 인자에서 사용하는 경우도 있는데요, 이때는 인자들을 모두 하나의 배열에 담는거에요.

function test(...numbers) {
    console.log(numbers)
};
test(1,2,3,4);

이렇게 함수의 인자를 여러개 보내면, numbers라는 인자에 담겨서 numbers는 아래와 같은 값을 가지게 됩니다.

[1, 2, 3, 4]

마지막으로, 오브젝트에서 특정 값만 골라서 따로 저장하고 싶을때 아래와 같이 활용하실수 있습니다. 예를 들어 사용자가 입력값으로 개인신상정보를 아래와 같이 입력했다고 합시다.

let input_data = {
  'no': '1234',
  'id': 'ABCD',
  'department': 'Engineering Team',
  'name': 'Sungok',
  'age': '21',
};

이때, id와 name만 별도의 변수에 담고, 나머지 정보는 배열에 따로 저장하고 싶을때 아래와 같이 선언하실수 있습니다.

let {id, name, ...args} = input_data;

그러면, id와 name에는 key로 검색하여 value를 담아주고, 나머지 데이타는 args에 담기게 됩니다. 각각의 변수들을 출력해보면 다음과 같이 나옵니다.

> id
"ABCD"
> name
"Sungok"
> args
{
  no: "1234",
  department: "Engineering Team",
  age: "21"
}

이상 자바스크립트에서 점 3개(…)을 활용하는 방법에 대해서 알아보는 시간이었습니다. 감사합니다.