Javascript, ES5, ES6

전개 연산자(Spread Operator) 정리

Developer88 2024. 9. 12. 17:04
반응형

오늘은 Javascript의 전개연산자(Spread Operator)에 대해서 정리해 보겠습니다.

 

1. 전개연산자

...는 전개 연산자(Spread Operator)로 ES6부터 도입되었는데요.

배열이나 객체를 펼쳐서(확장해서),

다른 배열이나 객체로 복사하거나 병합할 때 사용합니다.

코드를 더 간결하게 해주고 가독성을 높여줍니다.

 

1-1. 배열병합

전개연산자를 이용한 배열병합을 잘 이해하도록 도와주는 코드를 보겠습니다.

아래의 arr1과 arr2는 전개 연산자인 '...'을 이용해서,

아래와 같이 conbinedArray라는 병합된 array를 쉽게 만들어 낼 수 있습니다.

 

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const combinedArray = [...arr1, ...arr2];
console.log(combinedArray); // [1, 2, 3, 4, 5, 6]

 

 

1-2. 객체 병합

전개 연산자(Spread Operator)를 이용하면,

객체도 아래와 같이 쉽게 병합할 수 있습니다.

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };

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

 

좀 더 실질적인 예를 보도록 하겠습니다.

아래는 nodejs에서의 코드 일부분인데요.

cookieOptions라는 다른 코드에서도 공통적으로 쓰이는,

cookie옵션과,

maxAge값을 병합해서,

res.cookie()함수의 세번째 인자로 전달하였습니다.

 

const cookieOptions = {
  httpOnly: true,
  secure: true,
};
res.cookie('accessToken', jwtAccessToken, { 
  ...cookieOptions,
  maxAge: 15 * 60 * 1000
});

 

728x90